CSS-хаки

При использовании семантической верстки каждый разработчик обязательно столкнется с проблемами кроссбраузерности, для решения которых в большинстве случаев приходится использовать так называемые «хаки». Обычно под этим термином подразумевается особый способ написания селекторов или правил, понимаемый только конкретным браузером. Однако совместимость с CSS в большинстве браузеров уже достигла уровня, при котором следует ограничивать использование «хаков».

Как правило, основным источником неприятностей бывает Internet Explorer. Многообразие ошибок в реализации CSS в браузерах Microsoft удивляет даже самых опытных верстальщиков. В связи с этим возникают ситуации, когда необходимо использовать дополнительные или альтернативные правила для IE. Именно в таких случаях рекомендуется применять «хаки». Если же вам вдруг понадобились альтернативные правила, скажем, только для Firefox, то рекомендуется пересмотреть ваш код, и в 99% случаев вы найдете более элегантное решение.

Наиболее популярным хаком на сегодня остается так называемый «star html hack»:

#element {
  position:relative; /* Основное правило  для всеx браузеров */
  }
  * HTML #element {
    position:static; /* Переопределение  правила для IE младше седьмой версии */
    }

В валидных HTML- и XHMTL-документах селектор HTML всегда играет роль корневого элемента, а BODY — потомка первого уровня, но не второго или более высокого уровня. Таким образом, теоретически селектор «* HTML» не должен применяться ни к одному элементу. Но на практике IE пятых и шестых версий из-за ошибки в собственном движке интерпретируют данный селектор как HTML и применяют указываемые правила. Поскольку остальные современные браузеры селектор «* HTML» игнорируют, этот прием можно использовать в корыстных целях. Это полезно, но правильно ли?

Несмотря на то что данный хак корректен с точки зрения стандарта CSS, есть ряд негативных нюансов.

Во-первых, слово «хак» звучит странно, и разработчику уже это должно не понравиться.

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

В-третьих, в этом хаке игнорируется недавно вышедший Internet Explorer 7.0, где был исправлен целый ряд ошибок в модуле CSS (более подробно об этом вы можете почитать непосредственно в блоге разработчиков IE7 по адресу blogs.msdn.com/ie).

Как же укротить Internet Explorer, не используя хаки?

Альтернатива синице

В недрах Microsoft Developer Network есть решение получше — conditional comments. Данная технология поддерживается в Internet Explorer, начиная с пятой версии, тем самым охватывая все интересующие нас браузеры. Ниже приводится пример элегантного использования условных комментариев:

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="all"/><![endif]-->

Обычное подключение CSS-файлов, однако увидят вторую строку, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии — if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше (включая свежий седьмой) прочитают код, находящийся внутри комментария и интерпретируют его.

Таким образом все наши хаки можно вынести в отдельный файл:

style.css:

#element {
    position:relative; /* Основное правило для всеx браузеров */
    }

ie.css:

#element {
    position:static; /* Переопределение правила для IE всех версий */
    }

Теперь мы не используем хаки в основном листе стилей; добились того, что альтернативное правило было применено ко всем Explorer’ам, включая седьмой; а также избавили пользователей альтернативных браузеров от загрузки лишнего кода. При этом мы сохранили наш (X)HTML и CSS валидным, так как такой условный комментарий не распознается никем иным кроме IE, включая даже валидатор от W3C.

Условные комментарии гибче, чем кажется на одном примере. Вы можете охватить не только все Explorer’ы, но и все его версии ниже или выше определенной или конкретную его версию; а также подгрузить код, который будут интерпретировать все браузеры, кроме Internet Explorer. К сожалению, это уже тема для отдельной статьи и с этими возможностями читателю следует ознакомится самостоятельно.

Материалы для изучения:

• раздел в Microsoft Developer Network
• Подробное объяснение синтаксиса и методологии использования
• О валидности синтаксиса условных комментариев не для IE

Укрощаем Internet Explorer или «магические правила»

Как уже говорилось выше, больше всего проблем верстальщику доставляют браузеры от Microsoft. Мы уже рассказали о том, как добавить отдельные правила только для Internet Explorer, но не коснулись того, какие же правила нам смогут помочь. Исправляем это досадное упущение.
Все перечисляемые ниже элементы управляют свойством hasLayout. hasLayout не является частью стандарта CSS и является скорее микрософтовской «заплаткой» для веб-разработчиков. Но и на том спасибо, как говорится.

Мы приводим только названия багов, для исправления которых применяются данные правила. Более подробное описание указываемых багов вы можете найти по адресу positioniseverything.net/explorer.html.

position:relative

• The IE/Win Disappearing List-Background Bug
• IE6 Border Chaos

Данное правило также часто применяется для спонтанно пропадающих блоков. Не падающих или неправильно отображающихся, а именно пропадающих. Особенно грешит этим Internet Explorer 5.0.

height:1%

• The IE6 Three Pixel Text-Jog
• The IE Escaping Floats Bug
• IE and italics (будьте осторожны с 5.0, используйте экранирование)
• IE/Win Unscrollable Content Bug
• IE/Win Guillotine Bug
• Quirky Percentages in IE6′s Visual Formatting Model

Применяется также для клиаринга элементов. Задается контейнеру, содержащему float’ы.

display:inline

• Floats, Margins and IE
• The IE Doubled Float-Margin Bug

display:inline-block;

• Quirky Percentages in IE6′s Visual Formatting Model

zoom:1

• Аналог height:1%; для IE 7.

И еще пара советов:
Во-первых, используйте данные правила по-возможности только для IE. Причем для разных версий решение может отличаться (наиболее часто это касается height:1% и zoom:1).
Во-вторых, столкнувшись с нежелательным поведением Explorer’а, которому нет документированного объяснения (или вам просто лень его искать) — попробуйте последовательно применить к проблемному элементу все правила, влияющие на свойство hasLayout. Шаманство — неотъемлемая часть нашей професии.

Материалы для изучения:

• hasLayout property в MSDN
• On having layout
• Магия для IE

Вместо вступления

В последнее время все чаще требованием при разработке сайта становится бестабличная или «дивная» верстка. Оба термина стали чрезвычайно популярны, несмотря на то, что они в корне неверны.

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

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

1. Таблицы используются для табличных данных, а не для визуального позиционирования элементов. К сожалению, мы живем не в идеальном мире и не всегда удается обойтись без этого архаизма, многие макеты просто требуют табличного поведения. Но перед тем как использовать таблицу не по назначению, каждый разработчик должен не раз подумать и попытаться избежать этого. Во многих случаях это вполне реально.
2. Каждый элемент HTML-кода должен нести структурный смысл. Наилучший способ этого добиться — просмотреть вашу страницу с отключенным CSS. Если списки визуально остались списками, а заголовки заголовками, то вы уже близки к семантике, к которой следует стремиться любому профессиональному верстальщику.
3. Разрабатываемый вами код соответствует стандартам (X)HTML и CSS. Семантика невозможна без валидности, несмотря на явную разность этих двух понятий. Вы можете сверстать валидный сайт, но без структурной разметки это будет всего лишь популизм.

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

Проблемы кроссбраузерности и их решения

Правильный DOCTYPE

Правильный DOCTYPE — это то, с чего должен начинаться любой сайт. Вы можете написать трижды правильный (X)HTML и СSS код, но с неправильным или отсутствующим DOCTYPE он не будет валидным и, что самое ужасное, будет работать неправильно.

Согласно спецификациям HTML и XHTML тег DOCTYPE, указанный в первой строке документа, указывает браузеру, какую именно версию (X)HTML вы используете в своем документе. Без указания DOCTYPE браузер будет воспринимать ваш документ в режиме Quirks mode, что приведет, в частности, к неправильной интерпретации блочной модели.

Правильный DOCTYPE обязан содержать полный абсолютный путь к файлу DTD, хранящемуся на серверах w3.org.

Использование правильного DOCTYPE — первый и необходимый путь к валидной кроссбраузерной верстке.

В этой статье мы используем указанный выше XHTML 1.0 Strict.

Подглядеть корректные DOCTYPE, а также подробнее узнать практическое значение этого тега можно в статье Джеффри Зельдмана в переводе Макса Россомахина «Почему так важен DOCTYPE».

Ластики

Одна из самых пространенных причин того, что сайт выглядит по-разному в разных браузерам вызвана тем, что браузеры по умолчанию оформляют многие элементы по-своему.

Для примера возьмем небольшой код:

<fieldset>
    <legend>Авторизация</legend>
    <label for="login">Логин:</label>
    <input id="login" maxlength="15" type="text" />
    <label for="password">Пароль:</label>
    <input id="password" maxlength="15" type="password" />
</fieldset>

Взгляните на результат в Firefox 2.0 (слева) и Internet Explorer 6 (справа):

Разница вызвана тем, что разные браузеры имеют различные значения для полей (margin) и отступов (padding). Разумеется, если задать конкретные величины в правилах для нужных элементов, то все исправится, но можно поступить проще.Существует замечательный селектор *, который выбирает все элементы в документе. Таким образом мы можем заранее обнулить значения для отступов и полей и в дальнейшем задавать их только тогда, когда дефолтные значения нас не устраивают. Эта, на первый взгляд мелочь, поможет вам избежать множества незначительных, но трудно находимых кроссбраузерных несоответствий и просто ошибок в процессе имплементации дизайна.

Добавим чуть-чуть CSS:

* {margin:0;padding:0;}

и посмотрим на результат:

Уже гораздо ближе к тому кроссбраузерному сооветствию, что мы ищем.

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

Во всех примерах нашей статьи вышеупомянутый «ластик» используется по умолчанию.

Материалы для изучения:

• «И отступили поля»
• YUI Reset CSS