Wiki-учебник по веб-технологиям: CSS/РасширенныйСборникCSSХаков ...

Главная | |

Расширенный сборник CSS-хаков


Некоторые из представленных в этом сборнике грязных хаков, не привязанных к версиям браузеров, устарели и более не применимы, имейте это ввиду и проверяйте заранее.

Оглавление документа


Под хаком подразумевается метод, позволяющий воспринимать 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{
_background:red
}


.class{
-background:red
}

Грязные хаки, работающие только в IE7


-,.class{
background:red;
}

Грязные хаки, работающие в IE6 и IE7


.class{
*background:red
}


.class{
//background:red;
}


.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(){
.class{background:red}
}

Грязный хак для 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) {
body:first-of-type .class {background: red}
}

Хаки для Safari 3, Chrome 2, Opera 9.5


body:first-of-type .class{background:red}


@media all and (min-width:0){
.class{background:red}
}

Хак для 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 следующие:
В случае нежелания переписывать старые проекты под IE8 — вы можете воспользоваться IE=EmulateIE7

Во всех перечисленных выше примерах .class — пример класса (можно указать вместо него id, тег и т.д.), а background:red — пример свойства и его значения.