1. Тип документа.
2. Умовні коментарі.
3. CSS хакі.
4. Internet Explorer 6
5. Internet Explorer 7
6. Internet Explorer 8
7. Opera
8. Mozilla Firefox
9. Safari

Кожен верстальник рано чи пізно стикається з необхідністю забороняти або дозволяти різним браузерам обробку будь-яких CSS стилів. Це пов'язано з тим, що не дивлячись на стандарти, браузери часом відображають різні елементи сторінки по своєму. Самим «особливим» браузером заслужено вважається Internet Explorer 6. Приводить в жах початківців верстальників (веб-майстрів, програмістів), і дратівливий всіх бувалих.

Для того, щоб верстка була правильною і відображалася у всіх браузерах однаково, часом необхідно застосовувати особливі методи, це так звані CSS хакі. Від частини саме в цьому і полягають секрети кросбраузерності верстки.

Варто зазначити, що я не є прихильником CSS хаков, тому що це не ідеальний варіант вирішення тієї чи іншої ситуації, що склалася. Дуже часто можна обійтися і без них, варто тільки трохи подумати. Більш того, з виходом нових версій браузерів, деякі хакі втрачають свою актуальність.

Тип документа.

Насамперед переконайтеся в тому, що у вас заданий тип документа, для HTML він задається тегом (на самому початку документа):

& Lt;! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "//www.w3.org/TR/html4/strict.dtd" & gt;

Умовні коментарі.

Так само часом в уникненні використання CSS хаков, можна застосувати умовні коментарі, це не тільки більш правильно і валідність, а ще й є хорошим тоном. Наприклад ви можете все стилі призначені для IE6 винести в окремий файл, і підключати його в вашому документа через тег LINK, при цьому уклавши його в умовний коментар, таким чином він буде розпізнаватися тільки IE6.

Наприклад, для IE 6:

& Lt;! - [if lte IE 6] & gt; & lt; link href = "style_ie6.css" rel = "stylesheet" type = "text / css" / & gt; & lt;! [Endif] - & gt;

А цей варіант вже для IE 7:

& Lt;! - [if lte IE 7] & gt; & lt; link href = "style_ie7.css" rel = "stylesheet" type = "text / css" / & gt; & lt;! [Endif] - & gt;

У такі умовні коментарі ви можете укладати будь-який HTML код.

CSS хакі.

Перерахую всі можливі варіанти CSS хаков для різних браузерів.

Internet Explorer 6

/ * Перший спосіб * /. style {_background: # F55; } / * Бекграунд прийме # F55 колір тільки в IE6 * / / * Другий спосіб * /. style {- background: # F55; } / * Бекграунд прийме # F55 колір тільки в IE6 * / / * Третій спосіб, впливає на застосування всього стилю, а не окремих їх параметрів. * / * Html. style {background: # F55; } / * Бекграунд прийме # F55 колір тільки в IE6 * /

Internet Explorer 7

* + Html. style {background: # F55; } *: First -child + html. style {background: # F55; } Html & gt; body. style {* background: # F00; }

Internet Explorer 8

.style {background: # F00 \ 0 /; / * Встановивши в кінці значення кольору два слеша з нулем, параметр буде опрацьовано лише IE8 * /}

Opera

@media all and (- webkit -min -device -pixel -ratio: 10000), not all and (- webkit -min -device -pixel -ratio: 0) {. style {background: # F00;}} / * Непроста конструкція * / * | html [xmlns * = ""]. style {background: # F00; } Html: first -child. style {background: # F00; } / * Цей спосіб працює тільки для версій нижче 9.5 * /

Mozilla Firefox

@ - moz -document url -prefix () {. style {background: # F00;}}

Safari

body: last -child: not (: root: root). style {background: # F55; } / * Для Safari & lt; 4.0 * / html [xmlns * = ""] body: last -child. style {background: # F55; } / * Для Safari & lt; 4.0 * /

Останній не дуже популярний браузер в рунеті, але все ж слід знати хакі і для нього. Раптом вам доведеться займатися версткою під зарубіжний проект)).

На завершення. Хочеться ще раз нагадати, що застосування хаков це не професійно, але все ж інколи зручний і швидкий спосіб для вирішення поставленого завдання.

Схожі записи