“Условные комментарии” и “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
* 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, ишака меньше шестого и для всех браузеров, кроме ишаков от седьмого и ниже. Как мне кажется этого достаточно, чтобы не прибегать к условным комментариям, которые более громоздки и находятся полностью в шапке сайта, что не очень хорошо для СЕО. Конечно дело вкуса, но всё таки компактность – оно всегда приятнее. В общем рекомендую к опробыванию.

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

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

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

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

 

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

, , , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (ещё не оценили)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 4 на запись

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

  1. Firefox 3.5.5 видит хак 13. Konqueror 4.3.3 видит хак 14 (а все остальное у него как у Google Chrome 4). А все другое хорошо. Спасибо за хаки.

  2. Спасибо за дополнение!
    Немного обломно, что все хаки надо чуть ли не раз в месяц-два проверять: выходят новые версии браузеров, а в них почти всегда что-то меняют.

  3. Интересная статейка по CSS хакам  CSS Хаки для Firefox, Opera, Safari и Internet Explorer. Есть свежая опера.

  4. Спасибо! Есть чем пополнить коллекцию хаков =)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии