Kategorie
CSS Software

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

Porównanie najpopulaniejszych przeglądarek pod względem obsługi selektorów CSS 3.

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.

14 odpowiedzi na “Obsługa selektorów CSS 3 przez przeglądarki”

Dzięki za wpis – oszczędzasz mój czas ;-)

Brakuje mi tylko testu Firefoksa 3.1 beta, bo tam chyba pełne wsparcie dla selektorów CSS3 już jest, AFAIR.

Nie zmienię mojej opinii, że IE8 w gruncie rzeczy będzie dla webdeweloperów jeszcze gorszy niż IE6. Zastanawia mnie, w jaki sposób mógł przejść Acid2, skoro ma takie braki… Ale brak obsługi ::pseudoelementów z CSS3, podczas gdy :pseudoelementy z CSS2 są obsługiwane (yup, chodzi mi o dwukropki), to już żenujące.

Wybacz podwójny komentarz, ale popełniłeś überFAIL – bez CSS twoja tabela jest całkowicie bezużyteczna. Nie powinieneś obawiać się obrazków, one nie gryzą, jeśli mają tekst zastępczy.

Rzeczywiście zastanawiający jest fakt, że skoro IE6 obsługiwał ::first-letter, ::first-line i E > F to jego kolejne wersje również powinny sobie, z tym radzić. Niestety przewrotny jest sposób działania twórców Internet Explorera, jeśli poprawiając część błędów, tworzą nowe już wcześniej poprawione.

Jeśli chodzi o kwestię, przewagi IE8 nad poprzednimi wersjami to uważam, że pewny postęp istnieje. Jestem także ciekawy jak IE8 wypada na tle obsługi selektorów CSS 2.1, chociaż w momencie pełnej obsługi selektorów CSS 3 przez inne przeglądarki to marny argument.

Jestem dobrej myśli i uważam, że Firefox 3.1 będzie w pełni obsługiwał selektory CSS3.

Rzeczywiście, prezentacja danych w tabeli powinna być niezależna. Dokonam zmian, aby całość była bardziej dostępna i użyteczna.

Sprawdziłem, rzeczywiście Firefox 3.1 obsługuje pozostałe selektory. Chociaż zauważyłem, że nie przechodzi testu :link oraz :visited. Można jednak przymknąć na to oko, w końcu to wersja beta.

Jeśli chodzi o IE oraz jego ślimaczy pęd do doskonałości to przestałem już na to zwracać uwagi. Microsoft powinien zrezygnować z rozwijania silnika Trident i stworzenia IE od nowa. Słyszałem, że planują wykupienie Opery, albo jakieś dofinansowanie. Wówczas mogliby znów stać się monopolistą na rynku.

Autor wpisu

@Łukasz pamiętam jak jakieś 5 lat temu, gdy IE miał ponad 90% udziału w rynku na forum mozillapl.org (i nie tylko) też mieliśmy życzenia aby użytkownicy zaczęli używać „normalnych” przeglądarek…
I te życzenia się wspaniale spełniają, IE ma już mniej niż 50% udziału w rynku (na swoim blogu niedawno pisałem jak to się zmieniało na przestrzeni ostatnich 6 lat – teraz muszę zrobić drobną aktualizację, ale to chyba dopiero po publikacji najbliższego biuletynu Gemiusa).
Natomiast twórcy IE już zrozumieli to co mieli zrozumieć a klawiatury pod palcami im się już pala ;)

@Wasacz nie zapominaj, że testy typu Acid2 czy Acid3 sprawdzają rzeczy, których normalnie raczej się nie spotyka na stronach (szczególnie mam tu na myśli użytą konstrukcję jako całość testu a nie jego poszczególne elementy – nawet jeśli przeglądarka jest w stanie obsłużyć poszczególne elementy w oderwaniu od siebie to w teście może się wyłożyć z uwagi ich na specyficzne połączenie, a gdy została przygotowana specjalnie do testu to pewnie może być także odwrotnie).

Nie oszukujmy się, ale IE nadal ma największy udział, jeśli chodzi o przeglądarki internetowe. Jednak nie to jest największym problemem dla ludzi z branży.

Marna implementacja standardów sieciowych w Internet Explorer to nie jedyna bolączka użytkowników i programistów. Największym problemem jest nieswiadomość ludzi, którzy korzystając z archaicznych przęglądarek hamują rozwój internetu.

„Nowoczesne przeglądarki, takie jak Opera, Safari czy Firefox bardzo sumiennie podchodzą do standardów sieciowych rekomendowanych…”

a z tabelki wynika że Opera, Safari, Chrome! Firefox jest dalej w tabelce jeśli chodzi o zgodność niż Chrome. Antyreklama dla Chrome :P i reklama dla FF.

Firefox 3.1 obsługuje wszystkie selektory CSS3. Nie jestem wielkim zwolennikiem Firefoxa, szczególnie ze względu małej wydajności. Jednak moja codzienna praca wymaga przykładowo Firebuga i kilku innych narzędzi deweloperskich, a Chrome, ani Safari nie są dostępne po Linuxem.

Opera która obsługuje wszystko też jest

Na tym teście widac jak bardzo ie odchodzi od powaznych przegladarek i co tak naprawde daje nam ms …

Wspaniała wiadomość ;) jak zwykle IE w tyle. Ciekawe kiedy to klienci zrozumieją. Nie wiem jak od Was, ale od mojej firmy ciągle wymagają zgodności z IE6, a ostatnio nawet zdarzyło mi się pytanie czemu pańska strona się u mnie nie wyświetla, przyjeżdżam patrzę a gość nadal używa IE 5.5 – i co z takim klientem zrobić?

Możliwość komentowania została wyłączona.