При використанні семантичної верстки кожен розробник обов'язково зіткнеться з проблемами кросбраузерності, для вирішення яких в більшості випадків доводиться використовувати так звані «хакі». Зазвичай під цим терміном мається на увазі особливий спосіб написання селектор або правил, який розуміється тільки конкретним браузером. Однак сумісність з CSS в більшості браузерів вже досягла рівня, при якому слід обмежувати використання «хаков».
Як правило, основним джерелом неприємностей буває Internet Explorer. Різноманіття помилок в реалізації CSS в браузерах Microsoft дивує навіть найдосвідченіших верстальників. У зв'язку з цим виникають ситуації, коли необхідно використовувати додаткові або альтернативні правила для IE. Саме в таких випадках рекомендується застосовувати «хакі». Якщо ж вам раптом знадобилися альтернативні правила, скажімо, тільки для Firefox, то рекомендується переглянути ваш код, і в 99% випадків ви знайдете більш елегантне рішення.
Найбільш популярним хаком на сьогодні залишається так званий «star html hack»:
У валідних HTML- і XHMTL-документах селектор HTML завжди грає роль кореневого елемента, а BODY - нащадка першого рівня, але не другого або більш високого рівня. Таким чином, теоретично селектор «* HTML» не повинен застосовуватися до жодного елементу. Але на практиці IE п'ятих і шостих версій через помилки у власному движку інтерпретують даний селектор як HTML і застосовують вказані правила. Оскільки інші сучасні браузери селектор «* HTML» ігнорують, цей прийом можна використовувати в корисливих цілях. Це корисно, але чи правильно?
Рекомендуємо прочитати Як оформити шапку сайту
Незважаючи на те що даний хак коректний з точки зору стандарту CSS, є ряд негативних нюансів.
По-перше, слово «хак» звучить дивно, і розробнику вже це мало б сподобатися.
По-друге, такі хакі для браузера Internet Explorer засмічують код, підвантажуємий і всіма іншими браузерами.
Як же приборкати Internet Explorer, не використовуючи хакі?
альтернативний вихід
Таким чином всі наші хакі можна винести в окремий файл:
Рекомендуємо прочитати Яндекс.Школа вебмайстрів
Матеріали для вивчення:
Приборкуємо Internet Explorer або «чудесні правила»
Як вже говорилося вище, найбільше проблем верстальщику доставляють браузери від Microsoft. Як додати окремі правила тільки для Internet Explorer, ви вже знаєте. Тепер розглянемо, які правила зможуть допомогти нам з приборканням IE.
- The IE / Win Disappearing List-Background Bug
- IE6 Border Chaos
Дане правило також часто застосовується для спонтанно пропадають блоків. Чи не падають або неправильно відображаються, а саме пропадають. Особливо грішить цим Internet Explorer 5.0.
- 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'и.
- Floats, Margins and IE
- The IE Doubled Float-Margin Bug
Рекомендуємо прочитати Як засобами CSS змінити колір маркера html-списку
- Quirky Percentages in IE6's Visual Formatting Model
- Аналог height: 1% для IE 7.
І ще декілька порад:
По-перше, використовуйте дані правила по-можливості тільки для IE. Причому для різних версій рішення може відрізнятися (частіше це відноситься до height: 1% і zoom: 1).
По-друге, зіткнувшись з небажаною поведінкою Explorer'а, якому немає документованого пояснення (або вам просто лінь його шукати) - спробуйте послідовно застосувати до проблемного елементу всіх правил, що впливають на властивість hasLayout. Псоледовательний метод перебору дуже часто використовується в нашій професії.
Матеріали для вивчення: