День добрый, уважаемые.
Хочу предупредить что это моя оригинальная статья, это не репост с чужого блога.
Предлагаю к рассмотрению обзор хаков для верстки. Хаки были отобраны с различных ресурсов и заботливо систематизированы. Зачем я это сделал и почему? Да, хаки легко найти в Сети, но на мое ИМХО подача материала оставляет желать лучшего, т.к. нет общей картины, непонятно зачастую какие браузеры поддерживают данный хак — а если такая инфа и дается, то в весьма пространном виде типа «а это для сафари и оперы».
Я выделил 24 характерных хаков и протестировал их работу в 18 браузерах 4х семейств (FifeFox, Opera, Safari, Chrome). В результате получил вот такую таблицу:
По ней можно судить когда хак интепретируется сразу несколькими семействами браузеров, или же несколькими версиями одного семейства, или же быстро найти уникальный для дан��ого семейства (верссии) браузера хак. По горизонтали отложены порядковые номера хаков — их код можно найти в таблице ниже, слева — семейство и версия браузера (FF это Firerox (: ), в области пересечения стоит закрашенная клетка если хак на данную версию браузера воздействует.
Примечание: ряд хаков действуют и на ie — но «conditional comments» спасут отцов российской…
Что у нас следует при беглом осмотре таблицы?
Приведу пример переопределения стилей при использовании хака который воздействует на несколько версий или семейств на примере следующей задачи: выделить стиль для FF 2.0 (пунт 2, подходит с допиливанием к пункту 4.)
Исходные данные:
мы имеем 3 хака, которые понимают только FF: №№3,4,5, причем №5 понимают только FF младше версии 3.0 (но нет гарантий, что его будут понимать и последующие версии — в этом и недостаток хаков).
Решение:
1. определяем стиль элемента в CSS без хаков для всех прочих браузеров.
2. применяем хак для FF всех версий, наш CSS файл пример вид:
3. для того чтобы FF >= 3.0 не применяли последний стиль к элементу, переопределяем его хаком и ставим ПОСЛЕ хака из предыдущего пункта. CSS имеет вид:
Ниже таблица хаков с кодом и номерами — некоторые хаки имеют несколько версий. Вместо #селектор# может быть любая CSS конструкция вроде #index p .class
P.S. Я веду свой блог на нашем корпоративном сайте.
UPD: принимая объективную критику, сделал обзор значительного числа хаков в следующем посте Часть 2
Хочу предупредить что это моя оригинальная статья, это не репост с чужого блога.
Предлагаю к рассмотрению обзор хаков для верстки. Хаки были отобраны с различных ресурсов и заботливо систематизированы. Зачем я это сделал и почему? Да, хаки легко найти в Сети, но на мое ИМХО подача материала оставляет желать лучшего, т.к. нет общей картины, непонятно зачастую какие браузеры поддерживают данный хак — а если такая инфа и дается, то в весьма пространном виде типа «а это для сафари и оперы».
Я выделил 24 характерных хаков и протестировал их работу в 18 браузерах 4х семейств (FifeFox, Opera, Safari, Chrome). В результате получил вот такую таблицу:
По ней можно судить когда хак интепретируется сразу несколькими семействами браузеров, или же несколькими версиями одного семейства, или же быстро найти уникальный для дан��ого семейства (верссии) браузера хак. По горизонтали отложены порядковые номера хаков — их код можно найти в таблице ниже, слева — семейство и версия браузера (FF это Firerox (: ), в области пересечения стоит закрашенная клетка если хак на данную версию браузера воздействует.
Примечание: ряд хаков действуют и на ie — но «conditional comments» спасут отцов российской…
Что у нас следует при беглом осмотре таблицы?
- уникальные хаки есть для всех семейств кроме Chrome
- несмотря на то, что нет хака для ФФ 2 (у него рендеринг значительно отличается от 3-й версии и немало доставляет...), есть относительно простой финт ухом, позволяющий победить нежелание 2-й версии ФФ понимать display-inline (для примера)
- хаки для Оперы охватывают ряд версий, но не все, однако можно при необходимости применить оба хака сразу
- вряд ли понадобится, но можно отделить хром от сафари комбинацией хаков №14,№23 и переопределив стиль для FF 3.0 хаком №23
- как ни странно, есть хаки которые кем-то где то публиковались, но не работают (№№2,11,21)
- хаки — зло и лучше их не использовать
Приведу пример переопределения стилей при использовании хака который воздействует на несколько версий или семейств на примере следующей задачи: выделить стиль для 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
