Кросс-браузерный CSS. Часть III. Баги

Кросс-браузерный CSS. Часть III. Баги

На самом деле в пятых и шестых версиях браузеров мало багов, которые позволяют скрывать стили. Самым известным и наиболее часто применяемым является метод сокрытия объявлений от браузера 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 Explo-rer 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.

Таблица методов сокрытия стилей от основных браузеров
	NN4	NN6	IE4	IE5	IE6	Opera 5+
MEDIA=all	да
MEDIA=scReen						да
@import	да		да
Селекторы по атрибутам	да		да	да	да
Селектор наследника	да		да	да	да
Voice-family			да	да
Комментарии			да	да
Кавычки	да	да				да

Скорее всего, эта комбинация не будет критичной с точки зрения дизайна, так что ее можно просто убрать, но зачем, если она все же делает страницу удобнее или красивее? Можно отключить ее для пользователей браузера 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. Об этом в следующий раз.

Михаил Дубаков, http://wa.artel.by