Предыдущая запись была посвящена “условным комментариям”, и, по логике, эта будет посвящена 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
background: #5ad126!important;
background: #eff216;
}
Заявлена работа: во всех, кроме 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
.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
not all and (-webkit-min-device-pixel-ratio:0)
{ .style14 {background: #5ad126;} }
Заявлена работа в: Opera
Работает в: Opera
Валидность: нет
Хак 15
Заявлена работа в: Opera < 9.5
Работает в: Opera 9.2 (в Опера 9.5 не работает)
Валидность: да
CSS-хак для Safari
Нерабочий бонус-хак (для того, чтобы быть в курсе)
Заявлена работа в: Safari
Работает в: нигде
Валидность: нет
Все хаки вы можете посмотреть на этой странице - примеры CSS-хаков из статьи.
ЭПИЛОГ
Что нужно знать и запомнить о CSS-хаках?
-
Только 1/3 CSS-хаков валидна по спецификации CSS2.1. Если вы борец за валидацию, то хаками особо не попользуешься.
-
Около половины всех хаков действуют не на один браузер, а на несколько, причём иногда на разные версии.
В общем есть три валидных хака: для Ишака 7, ишака меньше шестого и для всех браузеров, кроме ишаков от седьмого и ниже. Как мне кажется этого достаточно, чтобы не прибегать к условным комментариям, которые более громоздки и находятся полностью в шапке сайта, что не очень хорошо для СЕО. Конечно дело вкуса, но всё таки компактность – оно всегда приятнее. В общем рекомендую к опробыванию.
Для тех, кто хочет глубже вникнуть в хаки, предлагаю две страницы:
-
В данной таблице можно поглядеть некоторые другие CSS-хаки, и увидеть в сводной таблице где они работают, а где нет. Плохо в ней одно, что версии браузеров указаны устаревшие. Однако что мешает лично испробовать.
Если есть какие-то замечания и дополнения к статье, буду рад их внести с указанием Вас в качестве помощника=).
У меня также есть вопрос: а какие хаки вы используете?
[UPD]: Konqueror 4.3.3 видит хак 14 (а все остальное у него как у Google Chrome 4) (c) Арзэт
Ссылки по теме
Часть 1: условные комментарии
Часть 2: 15 основных CSS-хаков.
Похожие записи:
01/12/2009 at 21:31 Постоянная ссылка Цитировать
Firefox 3.5.5 видит хак 13. Konqueror 4.3.3 видит хак 14 (а все остальное у него как у Google Chrome 4). А все другое хорошо. Спасибо за хаки.
01/12/2009 at 23:02 Постоянная ссылка Цитировать
Спасибо за дополнение!
Немного обломно, что все хаки надо чуть ли не раз в месяц-два проверять: выходят новые версии браузеров, а в них почти всегда что-то меняют.
13/12/2010 at 13:30 Постоянная ссылка Цитировать
Интересная статейка по CSS хакамCSS Хаки для Firefox, Opera, Safari и Internet Explorer . Есть свежая опера.
13/12/2010 at 18:35 Постоянная ссылка Цитировать
Спасибо! Есть чем пополнить коллекцию хаков =)