Крос-браузерний 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> з рамкою чорного кольору, але не хочемо, щоб цей стиль застосовувався в браузерах 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, і успішно його застосовуєте.

Таблиця методів приховування стилів від основних браузерів

NN4 NN6 IE4 IE5 IE5 Opera 6
MEDIA=all так
MEDIA=screen так
@import так так
Селектори за атрибутами так так так так
Селектор спадкоємця так так так так
Voice-family так так
Коментарі так так
Лапки так так так

Наведу пару реальних прикладів. Я абсолютно випадково знайшов цікавий і дуже неочевидний баг в 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. Про це наступного разу.

***

Це переклад статті.