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

Главная | Каталог |

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


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

Оглавление документа
Всем известные Conditional comments в IE
Другие хаки для IE
Грязные хаки, работающие только в IE6
Грязные хаки, работающие только в IE7
Грязные хаки, работающие в IE6 и IE7
Грязный хак для IE6, IE7 & Safari
Грязный хак для Safari 3
Грязный хак для FF2, FF3
Грязный хак для FF2, FF3 и IE7
Грязный хак для FF3 и IE7
Грязный хак для Opera 9.5 и IE7
Хак для FF2, FF3, Safari 3, Chrome 2, Opera 9.5
Хак для Safari 3 и 4!, Chrome 2
Хаки для Safari 3, Chrome 2, Opera 9.5
Хак для FF2, FF3, Safari 3 и Chrome 2
Отделение стилей от IE6
Отделение стилей от IE6 и IE7
Отделение стилей от IE6–8
Об отделении стилей для IE
Изменение рендеринга IE8


Под хаком подразумевается метод, позволяющий воспринимать 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 — пример свойства и его значения.

 
Версия для печати | Поиск: