Библиотека Интернет Индустрии I2R.ru

Предыдущий материал

• Кросс-браузерный CSS. Селекторы
• Кросс-браузерный CSS. Введение в проблему

На самом деле в пятых и шестых версиях браузеров мало багов, которые позволяют скрывать стили. Самым известным и наиболее часто применяемым является метод сокрытия объявлений от браузера Internet Explorer 5, который придумал Тантек Целик.

voice-family

Например, мы имеем таблицу стилей:

#box {
border: 20px solid #000;
padding: 40px;
width: 420px;
voice-family: "\"}\"";
voice-family: inherit;
width: 300px}


В начале описания стилей данного блока мы задаем все объявления, которые будут общими для всех браузеров. Тогда все браузеры сначала установят значение width для блока box в 420 пикселей, а также указанные отступы и рамки. Потом следует конструкция

voice-family: "\"}\"";

Это свойство из звуковых таблиц стилей стандарта CSS-2, так что браузеры его вообще не должны воспринимать, т. е. просто игнорировать и обрабатывать объявления дальше. Однако браузер Internet Explorer 5.x некорректно обрабатывает эту конструкцию. Он считает, что на этом месте блок объявлений для селектора #box заканчивается. Этот браузер по сути дела будет "видеть" вот такую таблицу стилей:

#box {
border: 20px solid #000;
padding: 40px;
width: 420px}


А все остальные браузеры продолжат считывать объявления, и перепишут первоначальное значение ширины на новое значение, которое равно 300 пикселам. Так что для всех остальных браузеров таблица стилей будет выглядеть следующим образом:

#box {
border: 20px solid #000;
padding: 40px;
width: 300px}


Этот метод широко применяется для устранения проблем с блоковой моделью в браузере Internet Explorer 5.x. Заметьте, что Internet Explorer 6 такого бага не имеет. Если он находится в режиме совместимом со стандартами, то все будет хорошо, однако если он находится в режиме обратной совместимости, то блоковая модель будет неправильная и этот метод не обеспечит решения проблемы. Так что надо следить за тем, чтобы в документах всегда правильно указывался тип с помощью !DOCTYPE.

Комментарии

В некоторых браузерах некорректно реализованы комментарии к стилям. Конкретнее, страдают этим все браузеры фирмы Microsoft с третьей до пятой версии. Этот баг исправили только в браузере Internet Explorer 5.5, так что можно скрывать правило от браузеров Internet Explorer 4.x и Internet Explorer 5.0 таким образом:

P/* */{
line-height: 1.5}

Если вставить комментарий непосредственно после селектора, то браузеры Internet Explorer 4-5 это правило просто проигнорируют. Тогда таблица стилей будет формироваться следующим образом. Например, вы хотите, чтобы во всех браузерах, кроме Netscape 4 и Internet Explorer 4-5 высота строки была 1.5. Это реализуется так:

@media all {
P/* */{
line-height: 1.5}}

Кавычки

Есть крайне любопытный баг, связанный с кавычками. Например, если заключать в них значения свойств, то браузеры Opera 5+ и Netscape 6 проигнорируют это значение. Допустим, мы захотим создать элемент <INPUT> c рамкой черного цвета, но не хотим, чтобы этот стиль применялся в браузерах Netscape 6 и Opera 5+. Тогда нам надо написать такой код:

INPUT.blackborder {
border: "1px solid #000"}
. . .
<INPUT TYPE="text" SIZE="12" CLASS="blackborder">


Вообще это имеет смысл, потому что рамки в браузере Opera 5-6 на элементы формы выглядят не так, как надо (новый браузер Opera 7 этим не страдает).

Пора подвести итог и собрать все методы в единую таблицу (табл. 1). Она будет вам ценным помощником в некоторых случаях. Например, вы верстаете страницу и внезапно обнаружили, что какая-то комбинация свойств-значений в таблице стилей приводит к зависанию браузера Netscape 6. Скорее всего, эта комбинация не будет критичной с точки зрения дизайна, так что ее можно просто убрать, но зачем, если она все же делает страницу удобнее или красивее? Можно отключить ее для пользователей браузера Netscape 6 и только. Вы заглядываете в нижеприведенную таблицу, находите, какой метод скрывает стиль от браузера Netscape 6, и успешно его применяете.

Таблица методов сокрытия стилей от основных браузеров

Приведу пару реальных примеров. Я совершенно случайно нашел занимательный и очень неочевидный баг в Netscape 6 (он касается и ранних версий Mozilla, исправлен в браузере Mozilla 0.9.7). У меня был такой стиль:

news:first-line {
font-weight: bold}

И следующий код:

<TABLE WIDTH=252>
<TR>
<TD CLASS="news"><A HREF="#">Если длина этой строки будет больше двух строк, то браузер вылетит</A></TD></TR>
</TABLE>


Так вот. Оказывается, эта комбинация приводит к зависанию браузера - выводится сообщение о недопустимой ошибке. Баг возникает тогда, когда используется псевдоэлемент first-line внутри ограниченного пространства (таблица шириной в 252 пиксела), причем контент внутри таблицы должен занимать не менее трех строк. Эта таблица являлась блоком новостей, и первую строку надо было вывести полужирным шрифтом. Но браузер Netscape 6.2 выполнял недопустимую операцию, так что надо было этот стиль от него скрыть. Решение простое, надо взять в кавычки значение свойства font-weight

news:first-line {
font-weight: "bold"}

Еще один пример. Как вы уже знаете, Internet Explorer 5 некорректно обрабатывает ключевые слова в размере шрифта. Так, если вы установите font-size: small, то размер шрифта будет разный в браузерах фирмы Microsoft и в других браузерах. Чтобы размер совпадал, надо для браузера фирмы Microsoft установить значение small, а для остальных браузеров - значение medium. Это исправлено в браузере Internet Explorer 6, так что нам надо скрыть стиль только от браузеров младших версий. Смотрим в таблицу и видим, что для этого можно воспользоваться комментариями.

Тогда таблица стилей будет выглядеть таким образом:

P {
font-size: small}
P/* */ {
font-size: medium}


Получится, что первую строчку поймут все браузеры и установят размер small, а вторую строчку поймут все браузеры, кроме Internet Explorer 4-5, так что они перепишут первое значение small новым значением medium. В итоге получится, что Internet Explorer 4-5 видит таблицу стилей:

P {
font-size: small}

А все остальные браузеры:

P {
font-size: medium}

Так что размер шрифта будет одинаков во всех браузерах.

Кроме самих каскадных таблиц стилей для кросс-браузерного кода можно пользоваться языком JavaScript. Об этом в следующий раз.

Предыдущий материал

• Кросс-браузерный CSS. Селекторы
• Кросс-браузерный CSS. Введение в проблему