Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)
Несмотря на известность, в них есть много редко используемого.
Например таблица стилей, которая будет видна всем браузерам, кроме IE версий 5-8.
Conditional comments для 6, 7, 8й версии (8я версия тоже их поддерживает — не удивляйтесь):
В случае quirks-mode, хак работает в IE6 и IE7.
Сама Microsoft рекомендует использовать conditional comments (официальный блог). Я в своей работе использую conditional comments для всех IE:
Добавление данной строчки в заголовок web-страницы изменяет тип рендеринга в зависимости от значения content (это не хак, но всё же вещь очень похожая по свойствам на хак):
Во всех перечисленных выше примерах .class — пример класса (можно указать вместо него id, тег и т.д.), а background:red — пример свойства и его значения.
P.S. Напишите пожалуйста в комментариях какие статьи о верстке вы бы хотели видеть — если я разбираюсь в предложенной вами теме — то напишу об этом статьи.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)
Всем известные Conditional comments в IE
Несмотря на известность, в них есть много редко используемого.
Например таблица стилей, которая будет видна всем браузерам, кроме IE версий 5-8.
<!--[if !IE]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->
Conditional comments для 6, 7, 8й версии (8я версия тоже их поддерживает — не удивляйтесь):
<!--[if IE 6]><link href="ie6.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->
Другие хаки для IE
* html .class{background:red}
В случае если у html-страницы есть доктайп, этот хак работает только для IE6.В случае quirks-mode, хак работает в IE6 и IE7.
*+html .class{background:red}
или*:first-child+html .class{background:red}
В случае, если у html-страницы есть доктайп, этот хак работает в IE7.Грязные хаки, работающие только в IE6
.class{<br>_background:red<br>}
.class{<br>-background:red<br>}
Грязные хаки, работающие только в IE7
-,.class{<br>background:red;<br>}
Грязные хаки, работающие в IE6 и IE7
.class{<br>*background:red<br>}
.class{<br>//background:red;<br>}
.class{background:red!ie}
Хак, работающий в IE6 и IE7 по аналогии со свойством !important.Грязный хак для IE6, IE7 & Safari
html*.class{background:red}
Нюанс — в Google Chrome 2 не работает. Хак пригождается в общем для IE css-файле, когда нужно отделить стили от 8-киГрязный хак для Safari 3
html:root*.class{background:red}
Также не работает в Chrome 2. О причине использования такого хака и о других хаках для сафари можно узнать здесь.Грязный хак для FF2, FF3
@-moz-document url-prefix(){<br>.class{background:red}<br>}
Грязный хак для FF2, FF3 и IE7
x:-moz-any-link,.class{background:red}
Грязный хак для FF3 и IE7
x:-moz-any-link,x:default,.class{background:red}
Грязный хак для Opera 9.5 и IE7
noindex:-o-prefocus,.class{background:red}
Для того, чтобы превратить его в хак только для оперы, воспользуйтесь любым обрамляющим хаком, который не поддерживает IE7.Хак для FF2, FF3, Safari 3, Chrome 2, Opera 9.5
html:root .class{background:red}
Хак для Safari 3 и 4!, Chrome 2
@media screen and (-webkit-min-device-pixel-ratio:0) {<br>body:first-of-type .class {background: red}<br>}
Хаки для Safari 3, Chrome 2, Opera 9.5
body:first-of-type .class{background:red}
@media all and (min-width:0){<br>.class{background:red}<br>}
Хак для FF2, FF3, Safari 3 и Chrome 2
html:not([lang*=""]):not(:only-child) .class{background:red}
Этот хак может быть использован к примеру, если вы хотите для Safari и FF сделать скругленные уголки при помощи CSS, а для остальных браузеров хотите, чтобы было картинками.Отделение стилей от IE6
<!--[if !IE 6]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->
html>body .class{background:red}
head+body .class{background:red}
html:first-child .class{background:red}
Отделение стилей от IE6 и IE7
html>/**/body .class{background:red}
Отделение стилей от IE6-8
*|html .class{background:red}
html:not([lang*=""]) .class{background:red}
Об отделении стилей для IE
Сама Microsoft рекомендует использовать conditional comments (официальный блог). Я в своей работе использую conditional comments для всех IE:
<!--[if IE]><link href="ie.css" rel="stylesheet" media="all" /><![endif]-->
А затем дополнительно отделяю хаками * html
и *+html
стили для IE6 и IE7 соответственно. Оставшиеся стили получаются для всех IE.Изменение рендеринга IE8
Добавление данной строчки в заголовок web-страницы изменяет тип рендеринга в зависимости от значения content (это не хак, но всё же вещь очень похожая по свойствам на хак):
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Основные значения content следующие (взято отсюда):- «IE=7» — включает режим Strict в котором рендерятся все страницы;
- «IE=EmulateIE7» — включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);
- «IE=EmulateIE8» — страница форсируется в режим «IE8 Standards» вне зависимости от того, включен ли режим совместимости «Compatibility View» в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.
- «IE=8» — включается режим максимального соответствия стандартам «IE8 Standards».
IE=EmulateIE7
Во всех перечисленных выше примерах .class — пример класса (можно указать вместо него id, тег и т.д.), а background:red — пример свойства и его значения.
P.S. Напишите пожалуйста в комментариях какие статьи о верстке вы бы хотели видеть — если я разбираюсь в предложенной вами теме — то напишу об этом статьи.