CSS селекторы поддерживаемые браузером Google Chrome

Google Chrome

Как я уже писал в посте «Специальный хак для 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	√	√	√	√	√	√	√
E:before E:after	Статический псевдо-класс Смотрим generated content	Χ	Χ	Δ 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, перевод и адаптация»Вебмастеру посвящается…»

И, конечно же, что за пост без постового?

Если вдруг вам надоело читать блоги, то можете взять лопату купить перчатки оптом и отправиться копать, или не копать, а строить.

А, когда устанете, то вам очень кстаи будет заказ пиццы, который можете сделать не отходя от компьютера!

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

Добавить комментарий Отменить ответ