Кроссбраузерность CSS и CSS хаки
Когда CSS используется не только для оформления текста, но и для работы со слоями при бестабличной верстке, необходимо помнить, чт осовременные браузеры не одинаково трактуют такие важные параметры как margin — внешний отсутп элемента, padding — внутренний отступ элемента, а также параметры position — положение, float — обтекание текстом и ряд других.
Из-за этих различий в трактовке значений параметров, часто случается, что сайты и веб-интерфейсы, которые нормально смотрятся в браузерах Mozilla Firefox, Opera и Safari, вдруг начинают разъезжаться в браузере Internet Explorer.
В основе этих различий в интерпретации браузерами CSS лежит неполное соотвествие браузеров Internet Explorer до версии 7 стандартам CSS, принятым W3C. Поэтому для успешной бестабличной верстки для более ранних версий IE, чем 7, требуется использовать ряд специальных конструкций, называемых CSS хаки. Важно также отметить, что и для других браузеров иногда случается необходимость использовать CSS хак.
Рассмотрим возможное написание CSS, которое было бы интерпретировано только отдельными видами браузеров:
CSS для IE 5, 5.5, 6, 7
Условные комментарии
Браузеры IE давно поддерживают так называемые условные комментарии (Conditional Comments), которые позволяют делать контент видимым только для IE. Условные комментарии – это просто специальным образом сформированные HTML комментарии, которые понимают только определенные версии Internet Explorer’a для Windows. Для примера вы можете использовать условные комментарии для исправления бага прозрачности PNG в IE.
Для их использования нужно :
- Сначала создать общую таблицу стилей для всех браузеров, без каких-либо хаков, чтобы потом продолжить работу по исправлению ошибок при отображении страницы в IE.
- Потом таблица стилей с исправленными ошибками сохраняется отельно и становится таблицей стилей для всех версий IE (например, all-ie.css).
- Сохраните отдельно таблицы стилей с исправлениями ошибок отдельно для каждой версии IE (например, ie-5.0.css).
- Далее необходимо последовательно подключить эти таблицы стилей через HTML-код с помощью условных комментариев.
Синтаксис условных комментариев
Приведенный условный комментарий будет понят браузерами IE5, IE5.5 и IE6, а также IE7 и IE8:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->Применение CSS для IE5
Если вам необходимо применить условный комментарий только для IE5, то необходимо просто указать версию 5.0 в условии if IE 5.0:
<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->Применение CSS для IE5.5
Если необходимо применить относительно IE5.5, то это будет выглядеть так:
<!--[if IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie-5.5.css" />
<![endif]-->Применение CSS для IE6
То же самое для IE6:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->Применение CSS для IE5 и IE5.5 одновременно или для нескольких версий
Если требуется, используя условные комментарии, исправить баг с боксовой моделью в браузерах IE5 и IE5.5, то можно использовать часть индекса версии или операторы сравнения.
Первый пример подключит таблицу стилей к любой версии Internet Explorer’а первая цифра которой 5:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->В качестве альтернативы, можно указать, чтобы таблицы стилей подключались к любой версии браузера, номер которой меньше 6-ти:
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->Вместо lt (less then — меньше) можно также использовать lte (less then or equal to — меньше или равен), gt (greater then — больше), gte (greater then or equal to — больше или равен) главное при всем этом многообразии возможностей правильно выбрать порядок указания условных комментариев, чтобы не попасть в ситуацию, когда для некоторых браузеров группы условных комментариев пересекаются, давая неожиданный результат.
Порядок использования
Если не требуется, чтобы общие таблицы стилей доминировали над таблицами, которые созданы специально для IE, то нужно подключать сначала общие таблицы, а уже потом таблицы для IE. На примере это выглядит так:
<link rel="stylesheet" type="text/css" href="common.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie.css" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie-6.0.css" /> <![endif]--> <!--[if lt IE 6]> <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" /> <![endif]-->
Другие достоинства этого метода
Используя условные комментарии, вы также получаете способ для более достоверного определения версии браузера. Браузеры, которые выдают себя за Internet Explorer, но на самом деле ими не являются, не будут использовать таблицы стилей предназначенные для IE. С помощью этого метода вы можете составить точную статистику относительно того, какую версию IE используют посетители, без ошибок, вызванных программами и браузерами выдающими себя за IE.
Валидность
Возможно, одной из самых приятных частей этой техники является то, что ваши таблицы стилей и ваши тщательно оформленные (X)HTML документы сохранят полное соответствие спецификации.
Отладка условных комментариев
Существует одно предупреждение, о котором стоит упомянуть.
Если вы используете несколько версий Internet Explorer’а на одной машине, то все эти версии будут выдавать себя за самую новую из установленных версий. Это означает, что если вас установлен IE6, но вы просматриваете страницу с помощью IE5, выполниться этот условный комментарий:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->А этот условный комментарий не выполниться:
<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->Для наиболее точного отслеживания различий в обработке CSS разными версиями IE хорошо себя зарекомендовала бесплатная программа
IETester, которая поддерживает все версии IE от 5 до 8. А для быстрого изменения праметров CSS в IE8 по нажатию F12 доступно средство разработчика, напоминающее FireBug в Mozilla Firefox.Аналогично объявлению таблиц стилей, этим способом можно скрывать HTML код от определенной или всех версий IE. Например, надпись «HTML-код» будет отображаться во всех браузерах кроме IE6, если поместить её в условный комментарий следующим образом:
<!--[if !IE 6]>
<p>HTML-код</p>
<![endif]-->Тег <comment>
Следует помнить, что условные комментарии в IE можно использовать везде на странице, а не только для объявления таблиц стилей для соответствующей версии браузера. С помощью условных комментариев можно выводить пользователям IE какую-то дополнительную информацию, которая не видна пользователям других браузеров.
Аналогично условным комментариям в IE 5--IE 8 поддерживается тег <comment>...</comment>. Этот тег позволяет скрыть информацию от пользователей IE, таким образом код:
пользователям IE будет показан как: Это браузер Internet Explorer, а пользователям других браузеров — Это не браузер Internet Explorer.
Тег <comment> не валиден.
CSS хаки IE
Чтобы не загромождать HTML-код объявлением нескольких таблиц стилей или, если требуется сохранить единственный CSS-файл можно написать отдельные стили, которые будут работать только в IE. Причем, есть вариант как для IE6, так и для IE7.
Для IE всех версий. Если поставить перед свойством две наклонные черты ( // ), оно будет восприниматься лишь браузерами IE всех версий. Другие браузеры такое свойство проигнорируют.
Для IE6 существует возможность поставить минус (-) или нижнее подчеркивание (_) перед свойством, при этом IE7 не отреагирует на него. Можно также использовать конструкцию:
* html .style {...} Например:
.style {
background: red; /* для нормальных браузеров */
//background: green; /* для всех IE */
-background: blue; /* для IE6 */
}
* html .style {
background: blue; /* другой способ для IE6 */
} В этом случае фон будет красным в браузерах Opera и Firefox, зеленым в IE7 и синим — в Internet Explorer 6.
В примере меняется цвет фона для разных браузеров. На практике же этот метод используется для того, чтобы добиться идентичности отображения и кроссбраузерности. Чаще всего приходится прибегать к нему при позиционировании и задавать разные значения свойств типа left, top, padding, margin, width и других, связанных с размерами, процентами и пикселами.
Для IE7 используется CSS хак:
*:first-child+html .style {...} или
*+html .style {...} CSS для Firefox
Также существуют специальные CSS хаки, позволяющие показывать стили только браузеру Firefox.
html:root .style {...} /* этот работает ещё и для Safari */ или
.style, x:-moz-any-link {...} Для быстрого изменения праметров CSS в Firefox по нажатию F12 доступно (требует предварительной установки) средство разработчика
Firebug — является лучшим среди аналогов.CSS для Opera
CSS хаки для браузера Opera представлены следующими примерами:
html:first-child .style {...} или (но эту конструкцию видят и современные Mozilla Firefox)
@media all and (min-width: 0) {
.style {...}
} Чтобы было видно только браузеру Opera версии от 10 и выше (на более ранних не тестиорвалось) надо писать так:
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
.element{/*описание стиля только для Оперы*/}
} можно загрузить целый css, как это делали для IE:
<link href="opera.css" rel="stylesheet" type="text/opera" media="all" />
и, наконец, можно воспользоваться /Java Script, в котором загрузить нужные таблицы стилей:
if (navigator.userAgent.indexOf(’Opera’) != -1) { alert("Я - Opera"); document.write(””); // тут ваш код для Opera } else { alert("Я - другой браузер"); document.write(””); // тут ваш код для всех остальных }
Для быстрого изменения праметров CSS в браузере Opera также доступно средство разработчика. Для его открытия надо перейти в меню «Инструменты» — > «Дополнительно» — > «Средства разработки».