Obsługa selektorów CSS 3 przez przeglądarki

Tworzenie aplikacji internetowych wymaga dziś od programistów znajomości XHTML, CSS, a także przestrzegania zasad dostępności i użyteczności. Jeżeli współczesne strony internetowe mają być zgodne ze standardami sieciowymi, a do tego iść w parze z trendem Web 2.0 to sytuacja musi ulec zmianie. Szczególnie, jeśli chodzi o obsługę selektorów CSS 3 w przeglądarkach

Nowoczesne przeglądarki, takie jak Opera, Safari czy Firefox bardzo sumiennie podchodzą do standardów sieciowych rekomendowanych przez W3C. Rownież najmłodszy Google Chrome nie pozostaje w tyle za liderami przeglądarek.

Jedyną czarną owcą wśród tego dojrzałego towarzystwa jest Internet Explorer, który pod żadnym pozorem nie chce dostosować się do nowej sytuacji. Wprawdzie kolejne wersje przeglądarki Microsoftu dają nadzieję na przyszłość. Jednak zmiany następują zbyt wolno, aby wizja zrównania się z nowoczesnymi przeglądarkami była realna.

Nowe selektory CSS 3 dają programistom dużo więcej możliwości podczas tworzenia aplikacji internetowych. Zaawansowane selektory atrybutów, strukturalne pseudo-klasy czy wsparcie dla zawartości generowanej to standard. Jednak nie wszyscy dostrzegają plusy tego standardu.

Poniższa tabela przedstawia selektory CSS 3 i stopień ich obsługi przez najpopularniejsze przeglądarki internetowe. Jak można było się spodziewać IE w każdej wersji odstaje od całości. Wyniki testu zostały opracowane na podstawie testu selektorów CSS 3.

Porównanie przeglądarek pod względem obsługi selektorów CSS 3
Selektor IE6 IE7 IE8 Firefox3 Opera9 Safari Chrome
* passed passed passed passed passed passed passed
E passed passed passed passed passed passed passed
.class buggy passed passed passed passed passed passed
#id passed passed passed passed passed passed passed
E F passed passed passed passed passed passed passed
E > F failed passed failed passed passed passed passed
E + F failed passed passed passed passed passed passed
E[attribute] failed buggy buggy passed passed passed passed
E[attribute=value] failed failed passed passed passed passed passed
E[attribute~=value] failed buggy passed passed passed passed passed
E[attribute|=value] failed buggy passed passed passed passed passed
:first-child failed buggy passed passed passed passed passed
:link passed passed passed passed passed passed passed
:visited passed passed passed passed passed passed passed
:lang() failed failed passed passed passed passed passed
:before failed failed passed passed passed passed passed
::before failed failed failed passed passed passed passed
:after failed failed passed passed passed passed passed
::after failed failed failed passed passed passed passed
:first-letter passed passed passed passed passed passed passed
::first-letter passed failed failed passed passed passed passed
:first-line passed passed passed passed passed passed passed
::first-line passed failed failed passed passed passed passed
E[attribute^=value] failed failed passed passed passed passed passed
E[attribute$=value] failed failed passed passed passed passed passed
E[attribute*=value] failed failed passed passed passed passed passed
E ~ F failed passed passed passed passed passed passed
:root failed failed failed passed passed passed passed
:last-child failed failed failed passed passed passed passed
:only-child failed failed failed passed passed passed passed
:nth-child() failed failed failed failed passed passed passed
:nth-last-child() failed failed failed failed passed passed passed
:first-of-type failed failed failed failed passed passed passed
:last-of-type failed failed failed failed passed passed passed
:only-of-type failed failed failed failed passed passed passed
:nth-of-type failed failed failed failed passed passed passed
:nth-last-of-type failed failed failed failed passed passed passed
:empty failed failed failed passed passed passed passed
:not() failed failed failed passed passed passed passed
:target failed failed failed passed passed passed passed
:enabled failed failed failed passed passed passed passed
:disabled failed failed failed passed passed passed passed
:checked failed failed failed passed passed passed passed
  • Selektor obsługiwany
  • Selektor częściowo obsługiwany
  • Selektor nieobsługiwany

Bezapelacyjnie widać, że Internet Explorer nie radzi sobie z selektorami CSS3. IE8 obsługuje prawidłowo tylko 22 selektory. Mimo, że są wśród nich selektory złożone i selektory atrybutu to nadal jest kropla w morzu potrzeb. Firefox radzi są dużo lepiej w kwestii obsługi selektorów, ponieważ do pełni szczęścia brakuje tylko ośmiu strukturalnych pseudo-klas. Najlepiej wypadają przeglądarki z silnikiem KHTML/Webkit, a także Presto. Zarówno Opera9, Safari3, jak i Google Chrome w pełni obsługują selektory CSS 3.

Internet Explorer dalej pozostaje na szarym końcu, bez większych perspektyw na zmianę. W tej sytuacji najwięcej tracą użytkownicy, którzy nieświadomi każdego dnia używają przestarzałej przeglądarki, tym samym hamując rozwój internetu.

Pora, aby zmienić przeglądarkę na lepszą. Pora, aby programiści zaczęli wykorzystywać selektory CSS, ponieważ dają większe możliwości. W końcu pora, aby twórcy Internet Explorera zrozumieli, że użytkownicy oczekują lepszego produktu niż do tej pory.

Join the Conversation

14 Comments

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *