Как я уже писал в посте «Специальный хак для Google Chrome«, Google Chrome — основан на движке WebKit и фактически очень похож по восприятию CSS на Safari. Но если под MAC обработка селекторов для Chrome и Safari идентична, то для PС она несколько различается, Chrome здесь превосходит Safari и другие браузеры в обработке селекторов CSS 2.1, и особенно CSS 3.
Ниже приведён список селекторов (включая CSS3) и показана поддержка их браузером Chrome и другими навигаторами.
Пояснения к таблице:
- Зелёная ячейка / √ — означает, что селектор полностью поддерживается.
- Оранжевая ячейка / Δ — означает, что браузер имеет частичную поддержку селектора.
- Красная ячейка / Χ — означает, что браузер не поддерживает данный селектор.
Browsers | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Pattern | Meaning | IE6 | IE7 | IE8 | FF | Op
9 |
Sf | Op | FF | NS | CHROME |
E:active
E:hover E:focus |
Динамический псевдо-класс
Присваивается E на соответствующее действие пользователя. |
Δ | Δ | √ | √ | √ | √ | √ | √ | √ | √ |
Δ | Δ | √ | √ | √ | √ | √ | √ | √ | √ | ||
Χ | Χ | √ | √ | √ | √ | √ | √ | √ | √ | ||
E:before
E:after |
Статический псевдо-класс
Смотрим generated content |
Χ | Χ | Δ 3 | √ | √ | √ | √ | √ | √ | √ |
Χ | Χ | Δ 3 | √ | √ | √ | √ | √ | √ | √ |
iPhn | Windows XP | Mac OSX | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Selector | Saf 3.0 | Chrome | FF 3.0 | FF 2.0 | FF 1.5 | Op
9.0 |
Saf
3.0 |
IE8 | IE7 | IE6 | Saf 3.1 | Saf 1.3 | Op | FF 2 | NS 7.1 |
* | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | |
E | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | |
.class | √ | √ | √ | √ | √ | √ | √ | √ | √ | Δ | √ | √ | √ | √ | √ |
#id | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
E F | √ | √ | √ | √ | √ | √ | √ | 1. | √ | √ | √ | √ | √ | √ | √ |
E > F | √ | √ | √ | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ | √ |
E + F | √ | √ | √ | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ | √ |
E[attr] | √ | √ | √ | √ | √ | √ | √ | Δ | Δ | Χ | √ | √ | √ | √ | Δ |
E[attr=val] | Δ | √ | √ | Δ | Δ | Δ | Δ | √ | √ | Χ | √ | Δ | Δ | Δ | Δ |
E[attr~=val] | Δ | √ | √ | Δ | Δ | √ | Δ | Δ | Δ | Χ | √ | Δ | √ | Δ | Δ |
E[attr|=val] | Δ | √ | √ | Δ | Δ | √ | Δ | Δ | Δ | Χ | √ | Δ | √ | Δ | Δ |
:first-child | Δ | √ | √ | Δ | Δ | Δ | Δ | Δ | Δ | Χ | √ | Δ | Δ | Δ | √ |
:link | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
:visited | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
:lang() | √ | √ | √ | √ | √ | Δ | √ | Δ | Χ | Χ | √ | Χ | Δ | √ | √ |
:before | √ | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | √ | Χ |
::before | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | √ | √ | √ | Χ |
:after | √ | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | √ | Χ |
::after | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | √ | √ | √ | Χ |
:first-letter | √ | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ | √ | √ | Χ |
::first-letter | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | √ | √ | Χ |
:first-line | √ | √ | √ | √ | √ | √ | √ | Χ | √ | √ | √ | √ | √ | √ | Χ |
::first-line | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | √ | √ | √ | √ | √ | Χ |
Новые селекторы CSS3 | |||||||||||||||
E[attr^=val] | Δ | √ | √ | Δ | Δ | Χ | Δ | Χ 2 | Χ | Χ | √ | Δ | Χ | Δ | Δ |
E[attr$=val] | Δ | √ | √ | Δ | Δ | Χ | Δ | Χ 2 | Χ | Χ | √ | Δ | Χ | Δ | Δ |
E[attr*=val] | Δ | √ | √ | Δ | Δ | √ | Δ | Χ 2 | Χ | Χ | √ | Δ | √ | Δ | Δ |
E ~ F | √ | √ | √ | √ | √ | √ | √ | √ | √ | Χ | √ | Χ | √ | √ | Χ |
:root | √ | √ | √ | √ | √ | Χ | √ | Χ | Χ | Χ | √ | √ | Χ | √ | √ |
:last-child | Χ | √ | √ | Δ | Δ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Δ | Δ |
:only-child | Χ | √ | √ | Δ | Δ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Δ | Χ |
:nth-child() | Χ | √ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Χ | Χ |
:nth-last-child() | Χ | √ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Χ | Χ |
:first-of-type | Δ | √ | Χ | Χ | Χ | Χ | Δ | Χ | Χ | Χ | √ | Χ | Χ | Χ | Χ |
:last-of-type | Χ | √ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Χ | Χ |
:only-of-type | Χ | √ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Χ | Χ |
:nth-of-type() | Χ | √ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Χ | Χ |
:nth-last-of-type() | Χ | √ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Χ | Χ |
:empty | Χ | √ | √ | Δ | Δ | Χ | Χ | Χ | Χ | Χ | √ | Χ | Χ | Δ | Δ |
:not() | √ | √ | √ | √ | √ | Χ | √ | Χ | Χ | Χ | √ | √ | Χ | √ | √ |
:target | √ | √ | √ | √ | √ | Χ | √ | Χ | Χ | Χ | √ | √ | Χ | √ | √ |
:enabled | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | Χ | √ | √ | Χ |
:disabled | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | Χ | √ | √ | Χ |
:checked | √ | √ | √ | √ | √ | √ | √ | Χ | Χ | Χ | √ | Χ | √ | √ | √ |
Источник: www.evotech.net, перевод и адаптация»Вебмастеру посвящается…»
И, конечно же, что за пост без постового?
Если вдруг вам надоело читать блоги, то можете взять лопату купить перчатки оптом и отправиться копать, или не копать, а строить.
А, когда устанете, то вам очень кстаи будет заказ пиццы, который можете сделать не отходя от компьютера!