Хаки в вёрстке web-страниц вообще лучше не использовать. Но, раз они есть, грех о них не знать. Тем более, в некоторых случаях это оправдано при использовании определенных особенностей браузера для ускорения рендеринга web-страницы.
Хаком — это метод, позволяющий воспринимать 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: #aa0000;} |
В случае если у html-страницы есть доктайп, этот хак работает только для IE6. А в случае quirks-mode, хак работает в IE6 и IE7.
*+html .class{background: #aa0000;} *:first-child+html .class{background: #aa0000;} |
В случае, если у html-страницы есть доктайп, этот хак работает в IE7.
Только IE6
.class{ _background: #aa0000;} .class{ -background: #aa0000;} |
Только IE7
-,.class{ background: #aa0000;} *+html .style { background: #aa0000;} *:first-child+html .style { background: #aa0000;} html>body .style { *background: #aa0000;} |
Только IE8
.style { background: #aa0000\0/;} |
IE6 и IE7
.class{*background:#aa0000;} .class{//background: #aa0000;} |
.class{background: #aa0000!ie;} |
Хак, работающий в IE6 и IE7 по аналогии со свойством !important.
IE6, IE7 & Safari
html*.class{background: #aa0000;} |
! в Google Chrome 2 не работает. Хак пригождается в общем для IE css-файле, когда нужно отделить стили от IE8.
Safari < 4.0
body:last-child:not(:root:root) .style {background: #aa0000;} html[xmlns*=""] body:last-child .style {background: #aa0000;} |
Только Safari 3
html:root*.class{background: #aa0000;} |
Только FF2 и FF3
@-moz-document url-prefix(){ .class{background: #aa0000;} } |
FF2, FF3 и IE7
x:-moz-any-link,.class{background: #aa0000;} |
FF3 и IE7
x:-moz-any-link,x:default,.class{background: #aa0000;} |
Только Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .style {background: #aa0000;} } *|html[xmlns*=""] .style {background: #aa0000;} /* только для Opera < 9.5 */ html:first-child .style {background: #aa0000;} |
Opera 9.5 и IE7
noindex:-o-prefocus,.class{background: #aa0000;} |
Для того, чтобы превратить его в хак только для оперы, воспользуйтесь любым обрамляющим хаком, который не поддерживает IE7.
Хак для FF2, FF3, Safari 3, Chrome 2, Opera 9.5
html:root .class{background: #aa0000;} |
Хак для Safari 3 и 4!, Chrome 2
@media screen and (-webkit-min-device-pixel-ratio:0) { body:first-of-type .class {background: #aa0000;} } |
Хаки для Safari 3, Chrome 2, Opera 9.5
body:first-of-type .class{background: #aa0000;} @media all and (min-width:0){ .class{background: #aa0000;} } |
Хак для FF2, FF3, Safari 3 и Chrome 2
html:not([lang*=""]):not(:only-child) .class{background: #aa0000;} |
Этот хак может быть использован к примеру, если вы хотите для Safari и FF сделать скругленные уголки при помощи CSS, а для остальных браузеров хотите, чтобы было картинками.
Отделение стилей от IE6
<!--[if !IE 6]--> <link href="styles.css" rel="stylesheet" media="all" /> <!--[endif]--> html>body .class{background: #aa0000;} head+body .class{background: #aa0000;} html:first-child .class{background: #aa0000;} |
Отделение стилей от IE6 и IE7
html>/**/body .class{background: #aa0000;} |
Отделение стилей от IE6-8
*|html .class{background: #aa0000;} html:not([lang*=""]) .class{background: #aa0000;} |
 |
"Большая книга CSS" Дэвид Макфарланд. |
