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

Под хаком предполагается способ, позволяющий принимать CSS только определенному браузеру.
Хаки могут употребляться не только лишь для исправления багов в верстке, да и в случае использования конкретных особенностей браузера для ускорения рендеринга web-страницы в нём (например CSS3-свойства)

Всем известные Conditional comments в IE

Невзирая на известность, в их есть много изредка применяемого.
К примеру таблица стилей, которая будет видна всем браузерам, не считая IE версий 5-8.

Conditional comments для 6, 7, 8й версии (8я версия тоже их поддерживает — не удивляйтесь):

Другие хаки для 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}

Аспект — в Гугл 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

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:

А потом дополнительно отделяю хаками * html и *+html стили для IE6 и IE7 соответственно. Оставшиеся стили получаются для всех IE.

Изменение рендеринга IE8

Добавление данной строки в заголовок web-страницы изменяет тип рендеринга зависимо от значения content (это не хак, но всё же вещь очень схожая по свойствам на хак):

Главные значения content последующие :
«IE=7» — включает режим Strict в каком рендерятся все странички;
«IE=EmulateIE7» — включает режим сопоставимости с IE7, в каком зависимо от DOCTYPE будет применяться или стандартный для IE7 режим рендеринга (Strict), или quirks-режим (Quirks);
«IE=EmulateIE8» — страничка форсируется в режим «IE8 Standards» вне зависимости от того, включен ли режим сопоставимости «Compatibility View» в браузере юзера, а quirks-страницы показываются в Quirks-режиме.
«IE=8» — врубается режим наибольшего соответствия эталонам «IE8 Standards».
В случае нежелания переписывать старенькые проекты под IE8 — вы сможете пользоваться IE=EmulateIE7
Во всех вышеперечисленных примерах .class — пример класса (можно указать заместо него id, тег и т.д.), а background:red — пример характеристики и его значения.
Источник: www.habrahabr.ru

Похожие материалы раздела: Комментарии закрыты, но вы можете Трекбэк с вашего сайта.

Комментарии закрыты.