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

Предыдущая запись была посвящена “условным комментариям”, и, по логике, эта будет посвящена 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

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

Хак 2

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

Хак 3

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

Хак 4

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

Хак 5

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

Хак 6

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

Хак 7

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

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

Хак 8

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

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

Хак 9

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

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

Хак 10

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

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

Хак 11

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

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

Хак 12

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

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

Хак 13

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

CSS-хаки для Opera

Хак 14

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

Хак 15

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

CSS-хак для Safari

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

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

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

ЭПИЛОГ

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

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

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

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

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

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

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

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

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

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

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