Анализ 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
}

Ниже таблица хаков с кодом и номерами — некоторые хаки имеют несколько версий. Вместо #селектор# может быть любая CSS конструкция вроде #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; } }

P.S. Я веду свой блог на нашем корпоративном сайте.

UPD: принимая объективную критику, сделал обзор значительного числа хаков в следующем посте Часть 2