Кирилл Вагин Кирилл Вагин
24 декабря Верстка: CSS хаки tags: CSS Верстка

Предлагаю к рассмотрению обзор хаков для верстки. Хаки были отобраны с различных ресурсов и заботливо систематизированы. Зачем я это сделал и почему? Да, хаки легко найти в Сети, но на мое ИМХО подача материала оставляет желать лучшего, т.к. нет общей картины, непонятно зачастую какие браузеры поддерживают данный хак - а если такая инфа и дается, то в весьма пространном виде типа "а это для сафари и оперы".

Я выделил 24 характерных хаков и протестировал их работу в 18 браузерах 4х семейств (FifeFox, Opera, Safari, Chrome). В результате получил вот такую таблицу:

по ней можно судить когда хак интепретируется сразу несколькими семействами браузеров, или же несколькими версиями одного семейства, или же быстро найти уникальный для данного семейства (верссии) браузера хак. По горизонтали отложены порядковые номера хаков - их код можно найти в таблице ниже, слева - семейство и версия браузера (FF это firerox (: ), в области пересечения стоит закрашенная клетка если хак на данную версию браузера воздействует.

Примечание: ряд хаков действуют и на ie - но "conditional comments" спасут отцов российской...

Что у нас следует при беглом осмотре таблицы?

1. уникальные хаки есть для всех семейств кроме Chrome.

2. несмотря на то, что нет хака для ФФ 2 (у него рендеринг значительно отличается от 3-й версии и немало доставляет...), есть относительно простой финт ухом, позволяющий победить нежелание 2-й версии ФФ понимать display-inline (для примера)

3. хаки для Оперы охватывают ряд версий, но не все, однако можно при необходимости применить оба хака сразу

4. вряд ли понадобится, но можно отделить зерна от плевен хром от сафари комбинацией хаков №14,№23 и переопределив стиль для FF 3.0 хаком №23

5. как ни странно, есть хаки которые кем-то где то публиковались, но не работают (№№2,11,21)

6. хаки - зло и лучше их не использовать

Хочу поделится техникой, переопределения стилей при использовании хака который воздействует на несколько версий или семейств на примере следующей задачи: выделить стиль для FF 2.0 (пунт 2., подходит с допиливанием к пункту 4.).

Исходные данные:

мы имеем 3 хака, которые понимают только FF: №№3,4,5, причем №5 понимают только FF младше версии 3.0 (но нет гарантий, что его будут понимать и последующие версии - в этом и недостаток хаков).

Решение:
1. определяем стиль элемента в CSS без хаков для всех прочих браузеров.

p {
color: red;
}

2. применяем хак для FF всех версий, наш CSS файл пример вид:

p {
color: red;
}

x:-moz-any-link,p
{
color: red
}

3. для того чтобы FF >= 3.0 не применяли последний стиль к элементу, переопределяем его хаком и ставим ПОСЛЕ хака из предыдущего пункта. CSS имеет вид:

p {
color: red;
}

x:-moz-any-link,p {
color: red
}

x:-moz-any-link,x:default,p{
color: red
}

Теперь: любой браузер, кроме FF, читая данный CSS, применит к элементу только первый стиль, т.к. хаки не будут интерпретированы. FF 2.х прочитает первый стиль, прочитает второй стиль, не поймет третий и применит последний прочитанный стиль. FF 3.х прочитает все три стиля и тоже применит последний. Задача решена.

Ниже таблица хаков с кодом и номерами - некоторые хаки имеют несколько версий. Вместо #селектор# может быть любая CSS <=2 конструкция вроде #index p .class

1

html*#селектор#{background:red},

html:root*#селектор#{background:red}

2 -
3 @-moz-document url-prefix(){
#селектор#{background:red}
}
4 x:-moz-any-link,#селектор#{background:red}
5 x:-moz-any-link,x:default,#селектор#{background:red}
6 noindex:-o-prefocus,#селектор#{background:red}
7 html:root #селектор#{background:red}
8 body:first-of-type #селектор#{background:red}
9 @media all and (min-width:0){
#селектор#{background:red}
}
10 html:not([lang*=""]):not(:only-child) #селектор#{background:red}
11 not all and (-webkit-min-device-pixel-ratio:0) {
#селектор#{background: #ff0000;}
}
12 *|html[xmlns*=""] #селектор# {
background: #Ff0000;
}
13 html:first-child #селектор# {
background: #Ff0000;
}
14 body:last-child:not(:root:root) #селектор# {
background: red;
}
15

html[xmlns*=""] body:last-child #селектор# {
background: red;
}

@media all and (min-width: 1px) { {} #селектор# { background: red; } }

16 @media all and (min-width: 1px) { #селектор#{ background: red; } }
17 @media all and (width) { #селектор# { background: red; } }
18 @media all and (min-width:0px) {
head~body #селектор# { background: red; }
}
19 html:not([lang*=""]) #селектор# { background: red; }
20 html:not([lang]) #селектор# { background: red; }
21 html:not[lang*=""] #селектор# { background: red; }
22 html:not([lang*=""]):not(:only-child) #селектор# { background: red; }
23 html:not(:nth-child(1)) #селектор# { background: red; }
24 @media screen and (-webkit-min-device-pixel-ratio:0){
#селектор# { background: red; }
}
14 декабря Гриша
Нашел перевод интересной статьи по CSS хакам для различных браузеров CSS Хаки для Firefox, Opera, Safari и Internet Explorer. Возможно будет интересно.