Рубрики
Верстальщику

Специальные хаки для Firefox 3

CSS хаки для Firefox 3

Картинка с сайта www.alexilin.ru

Когда вышла третья версия Firefox, я стал замечать, что на некоторых сверстанных ранее сайтах верстка выглядит не идеально, при этом во второй версии браузера все выглядело отлично. Естественно, что обновленная версия движка браузера повлияла на это. И так, стала задача, как исправить в Firefox 3 недочеты, которые не видны во второй версии браузера?
Сделать это, в принципе, не сложно, но есть одна неприятность. Те правила, которые исправляют погрешности в Firefox 3, зачастую вызывают новые погрешности в более поздних версиях браузера. В общем, если не брать во внимание скрипт определения браузера и прописывания соответствующего класса (о нем еще напишу в следующих постах), то на помощь приходят хаки. Напомню, что при использовании хаков нужно смириться с тем, что css становиться не валидным. Но это решать вам, использовать хаки или же решать проблему иначе.

Итак, специальные css-хаки для Firefox 3

1.  .sampleclass, x:-moz-any-link { } /* FireFox 2 это чтобы напомнить*/

2.  .sampleclass, x:-moz-any-link, x:default { } /* FireFox 3 */

3.  html>/**/body .sampleclass, x:-moz-any-link, x:default { } /* Только FireFox 3 */

Добавлю лишь, что вместо «.sampleclass» мы вставляем нужный атрибут.

Вот, в принципе, и все. Удачной верстки.

Спонсор поста: Новостной блог о технологии AJAX, где вы найдете все об ajax.

Рубрики
Верстальщику

Укрощая Safari

Верстка для SafariОбычно, работая над каким-либо проектом по верстке, я сто процентов проверяю правильность разметки в трех наиболее популярных на сегодняшний день браузерах: Firefox, Internet Explorer6 и Internet Explorer7. А после того, как проверена верстка на Firefox и исправлены все багги «горячо любимого» мною IE, для полного морального удовлетворения я проверяю верстку в Opera и Safari.

Сразу хочу отметить, что последние версии Safari (3.1 для Windows), Firefox (3.0.x) и Opera (9.5x), при условиях грамотной валидной верстки фактически идентично отображают разметку. По крайней мере, в 90% случаев. Конечно, остаются 10%, о которых мне и хотелось бы написать в этом посте. Вернее даже не 10%, а 5%, поскольку в этом материале я не буду говорить про Opera, а исключительно о Safari.

Итак, поговорим о верстке для Safari

Для начала мне хотелось бы сказать пару слов о замечательном инструменте «Веб-инспектор», который по умолчанию входит в Safari 3. Этот инструмент, конечно, не дотягивает по своим возможностям к известному плагину для Firebug (для Firefox), по позволяет успешно тестировать и отлаживать верстку в Safari.

Кстати, инструмент очень погож, на внедренный в Opera 9.5 помощник разработчика «Opera Dragonfly«. Но о нем позже.

А пока что вкратце скажу, что «Веб-инспектор» позволяет вам проверить код страницы, умеет строит древо элемента, поновляет редактировать css «на лету». Кроме этого, он отображает полную информацию о загрузке страницы. В общем, есть самые необходимые функции.

А сам факт того, что такой инструмент включен в сборку по умолчанию, говорит о том, что создатели Safari думали о разработчиках веб-приложений, чего не скажешь о создателях Internet Explorer.

Ну а теперь собственно о верстке

В принципе начиная верстку для сафари было бы полезно сначала посмотреть на то, какую таблицу стилей использует браузер по умолчанию. Это можно узнать из моей статьи «Правильная очистка свойств и CSS с оглядкой на дефолтные стили браузеров». Или вот по этой ссылкам

Ну, естественно, что знакомство со спецификациями CSS, HTML, XHTML подразумевается по умолчанию.

Когда вы вооружитесь необходимыми знаниями, то можно спокойно верстать. Но при этом конечно не стоит забывать о том, что если вы используете reset.css для обнуления дефолтных стилей, то это вовсе не означает, что вы получите ожидаемый результат на сто процентов. В общем, есть свои нюансы для каждого браузера, и вписать их все в reset.css зачастую нельзя в силу различных причин. И тогда на помощь приходят «хакаи-, трюки- и уловки-css.

Рубрики
Верстальщику

Правильная очистка свойств и CSS с оглядкой на дефолтные стили браузеров

Помнится, не очень давно на Хабре разыгралась нешуточная дискуссия из-за того, что один уважаемый разработчик посчитал глюком нового Firefox 3.0 обработку глобального правила * {display: block;} таким образом, что даже элементы <head> выводились в содержимое страницы.

В общем ситуация неоднозначная, и мнения профессионалов по этому поводу разделились. Но факт остается фактом — если мы используем какие либо глобальные правила для того чтобы сбросить значения браузеров по умолчанию, мы обязательно должны принимать во внимание те правила, которые записаны в дефолтных CSS файлах самого браузера.

Как известно, по умолчанию браузеры используют собственную таблицу стилей для форматирования. После описанного выше случая, я захотел рассмотреть дефолтные CSS-стили популярных браузеров. В этом мне помогла статья User Agent Style Sheets: Basics and Samples, где представлен список исходных стилей различных популярных браузеров. Возможно, это поспособствует большему пониманию CSS и поможет разобраться в спорных ситуациях, на подобие той, которая была приведена выше.

Итак, вот ссылки на дефолтные CSS-стили популярных браузеров

Для того чтобы более-менее представить правильные способы составления правил для сбрасывания настроек браузера по умолчанию, так называемых reset.css, можете сравнить их с вариантами предложенными консорциумом W3C для различных спецификаций:

К сожалению, добраться до стилей горячо любимого многими разработчиками 🙂 браузера IE, мне не удалось. Но думаю — это вопрос времени. Так что, продолжение следует…

Рубрики
Верстальщику

Поговорим о expression в CSS

Применение expression в CSSВ своем посте «Выравнивание высоты контейнеров при верстке DIVами» я писал о том, какими способами можно выровнять высоту <div> относительно друг друга и получить равные по высоте колонки в независимости от контента. Эта статья была опубликована на Хабре, и в комментариях один не очень дружелюбный человек пытался сказать, что применения в данной ситуации js, высчитывающего высоту колонок не применимо, и что, для Internet Explorer лучше воспользоваться для этого ‘expression’. Не буду говорить, что не осликом единым живет этот мир. Так как проблема высоты колонок при верстке слоями актуальна для всех браузеров, но, в этой статье хочу более детально рассмотреть варианты обоснованности и способов применения expression в CSS.

Что такое expression?

CSS expression было представлено в IE 5.0, как метод записи выражений JavaScript непосредственно в свойствах CSS. Все остальные браузеры игнорируют expression. Можно сказать, что это неплохой подарок дизайнерам, поскольку множетсво IE багов может быть исправлено при помощи expression. Но при этом то, что вы напишите в expression нужно как-то записать и для других браузеров.

Рубрики
Верстальщику

Выравнивание высоты контейнеров при верстке DIVами

Думаю, что все, кто осознал все преимущества верстки слоями перед табличной разметкой, ни смог не обратить внимания на один, как по мне, существенный недостаток блочной модели. Что это? Это высота контейнеров.Работая над очередным проектом, я перепробовал несколько вариантов решения данной проблемы, с которыми и хочу познакомить вас в рамках этой статьи.

К сожалению, если мы будем использовать трех- или двухколоночный макет сверстанный «слоями», то в итоге высота контейнеров будет совершенно независима от высоты соседних блоков. И будет напрямую зависеть от контента блока и примененных к нему правил отступа (padding). Несмотря на все свои недостатки, таблицы, как бы сами по себе, решают этот вопрос в силу связности соседних колонок. В случае же использования блоков мы имеем на выходе совершенно независимые контейнеры.

table_layout.png
Пример страницы
с табличной версткой
div_layout.png
Пример верстки «слоями»

Иногда это не играет особой роли и разная высота контейнеров вполне приемлема в рамках дизайнерской концепции. Но бывают случаи, когда необходима именно равная высота блоков в независимости от их содержимого. Именно решению данного вопроса посвящается эта статья.