1. CSS-хакі При використанні семантичної верстки кожен розробник обов'язково зіткнеться з проблемами...
2. Приборкуємо Internet Explorer або «чудесні правила»

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. На жаль, це вже тема для окремої статті і з цими можливостями читачеві варто ознайомлюватися самостійно.

Матеріали для вивчення:

Приборкуємо Internet Explorer або «чудесні правила»

Як вже говорилося вище, найбільше проблем верстальщику доставляють браузери від Microsoft. Як додати окремі правила тільки для Internet Explorer, ви вже знаєте. Тепер розглянемо, які правила зможуть допомогти нам з приборканням IE.

Все що перераховуються нижче елементи керують властивістю 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. Псоледовательний метод перебору дуже часто використовується в нашій професії.

Матеріали для вивчення:

джерело: flack.ru