“Условные комментарии” и “CSS-хаки”. Round 2. 15 основных CSS-хаков.

31 августа 2009 4 Рубрика: HTML&CSS

« Предыдущая запись
“Условные комментарии” и “CSS-хаки”. Round 1.

Следующая запись »
Как запретить выделение контента в браузерах, универсальное решение

Предыдущая запись была посвящена “условным комментариям”, и, по логике, эта будет посвящена CSS-хакам (они же CSS hacks). Не нарушая законов логики (да и не только их – прим.ред.), так и поступим.

Статей по CSS-хакам довольно много, и не удивительно, что все они в целом схожи, а большинство из них подустарело. Решил я значит их скомпановать и посмотреть что выйдет. Как показала практика, не всё что написано работает или работает на данный момент. Итого я выделил 15 основных CSS-хаков, проверил что о них пишут, и проверил насколько правдиво пишут. Итак…

CSS hacks

Условия тестирования

Тестирование хаков проводилось на трёх компьютерах, в большинстве своём в различными версиями браузеров. Вот перечень версий браузеров, по которым проходило тестирование:

Internet Explorer 8 RC1 (8.0.6001.18702, 8.0.6001.18372 и в программе IETester v.0.3.5)
Internet Explorer 7 (собственно 7.0.6001.18000 и в программе IETester v.0.3.5)
Internet Explorer 6 (в программе IETester v.0.3.5)
Internet Explorer 5.5 (в программе IETester v.0.3.5)
Mozilla FireFox (2.0.0.9, 2.0.0.20 и 3.0.6)
Opera (9.01, 9.20, 9.24, 9.50, 10.00beta, 10.00 сборка 1750)
Safari (3.0.4, 3.2.2, 4.0.3)
Google Chrome (0.4.154.33, 1.0.154.48, 2.0.160.0, 3.0.195.4, 4.0.201.1)
Netscape Navigator (9.0.0.6)

Далее будут рассмотрены хаки, указано в чём они должны работать (по материалам других источников), в чём они работают (по собственным тестированиям) и являются ли они валидными по спецификации CSS 2.1 (CSS-валидатор).

CSS-хаки только для Internet Explorer

Хак 1

* html .style1 { background: #5ad126 }

Заявлена работа в: IE 6 и ниже
Работает в: IE 6, IE 5.5
Валидность: да

Хак 2

.style2 { _background: #5ad126; }

Заявлена работа в: IE 6 и ниже
Работает в: IE 6, IE 5.5
Валидность: нет

Хак 3

*+html .style3 { background: #5ad126 }

Заявлена работа в: IE 7, IE 8.beta 1
Работает в: IE 7
Валидность: да

Хак 4

html>body .style4 { *background: #5ad126;}

Заявлена работа в: IE 7
Работает в: IE 7
Валидность: нет

Хак 5

*:first-child+html .style5 { background: #5ad126; }

Заявлена работа в: IE 7, IE 8.beta 1
Работает в: IE 7
Валидность: да

Хак 6

.style6 { //background: #5ad126; }

Заявлена работа в: IE 6, IE 7
Работает в: IE 6, IE 7, IE 5.5
Валидность: нет

Хак 7

.style7 { #background: #5ad126; }

Заявлена работа в: IE 6, IE 7
Работает в: IE 6, IE 7, IE 5.5
Валидность: нет

CSS-хак ко всему, кроме Internet Explorer

Хак 8

.style8 {
background: #5ad126!important;
background: #eff216;
}

Заявлена работа: во всех, кроме IE
Работает: во всех, кроме IE 5.5, IE 6
Валидность: да

CSS-хак для Internet Explorer 7,
Mozilla Firefox и Netscape Navigator

Хак 9

.style9, x:-moz-any-link { background: #5ad126; }

Заявлена работа в: Mozilla Firefox
Работает в: Mozilla Firefox, IE 7, Netscape Navigator
Валидность: нет

CSS-хак для Mozilla Firefox, Google Chrome,
Safari, Netscape Navigator, Opera>=9.5

Хак 10

html:root .style10 { background: #5ad126; }

Заявлена работа в: Mozilla Firefox, Safari, Google Chrome
Работает в: Mozilla Firefox, Safari, Google Chrome, Netscape Navigator, Opera 9.5, Opera 10 beta.
Валидность: нет

CSS-хак для Mozilla Firefox и Netscape Navigator

Хак 11

@-moz-document url-prefix() { .style11 {background: #5ad126;} }

Заявлена работа в: Mozilla Firefox
Работает в: Mozilla Firefox, Netscape Navigator
Валидность: нет

CSS-хак для Google Chrome и Safari

Хак 12

body:last-child:not(:root:root) .style12 { background: #5ad126;}

Заявлена работа в: Google Chrome, Safari
Работает в: Google Chrome (до третьей версии, начиная с третьей не работает), Safari 3.2.2 (а в 3.0.4 и 4.0.3 не работает)
Валидность: нет

CSS-хак для Opera, Google Chrome, Safari

Хак 13

@media all and (min-width: 0) {
.style13 { background: #5ad126; }
}
/*или*/
@media all and (min-width:0px) {
head~body .style13 { background: #5ad126; }
}

Заявлена работа в: Opera
Работает в: Opera, Google Chrome, Safari
Валидность: нет
UPD: Работает в Firefox 3.5.5

CSS-хаки для Opera

Хак 14

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0)
{ .style14 {background: #5ad126;} }

Заявлена работа в: Opera
Работает в: Opera
Валидность: нет

Хак 15

html:first-child .style15 { background: #5ad126; }

Заявлена работа в: Opera < 9.5
Работает в: Opera 9.2 (в Опера 9.5 не работает)
Валидность: да

CSS-хак для Safari

Нерабочий бонус-хак (для того, чтобы быть в курсе)

html[xmlns*=""] body:last-child .style16 { background: #5ad126;}

Заявлена работа в: Safari
Работает в: нигде
Валидность: нет

Все хаки вы можете посмотреть на этой странице - примеры CSS-хаков из статьи.

ЭПИЛОГ

Что нужно знать и запомнить о CSS-хаках?

Только 1/3 CSS-хаков валидна по спецификации CSS2.1. Если вы борец за валидацию, то хаками особо не попользуешься.
Около половины всех хаков действуют не на один браузер, а на несколько, причём иногда на разные версии.

В общем есть три валидных хака: для Ишака 7, ишака меньше шестого и для всех браузеров, кроме ишаков от седьмого и ниже. Как мне кажется этого достаточно, чтобы не прибегать к условным комментариям, которые более громоздки и находятся полностью в шапке сайта, что не очень хорошо для СЕО. Конечно дело вкуса, но всё таки компактность – оно всегда приятнее. В общем рекомендую к опробыванию.

Для тех, кто хочет глубже вникнуть в хаки, предлагаю две страницы:

В данной таблице можно поглядеть некоторые другие CSS-хаки, и увидеть в сводной таблице где они работают, а где нет. Плохо в ней одно, что версии браузеров указаны устаревшие. Однако что мешает лично испробовать.
В этой статье можно ознакомится с CSS-хаками для Gecko, Trident и многим другим.

Если есть какие-то замечания и дополнения к статье, буду рад их внести с указанием Вас в качестве помощника=).
У меня также есть вопрос: а какие хаки вы используете?

[UPD]: Konqueror 4.3.3 видит хак 14 (а все остальное у него как у Google Chrome 4) (c) Арзэт

Ссылки по теме

Часть 1: условные комментарии
Часть 2: 15 основных CSS-хаков.

CSS, css-хаки, html, ie, кроссбраузерность

(ещё не оценили)

Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

Отзывов: 4 на запись