CSS3 jest na takim etapie pożądania, że od kilku lat w nowych wersjach przeglądarek jest on dla mnie głównym wyznacznikiem ich jakości. Producenci prężnie rozwijają swoje produkty pod tym względem, by przekonać do siebie developerów. W końcu na przykładzie firefoksa można stwierdzić, że gdzie koderzy mają wygodniej, tam wciągają innych. :) Każdy silnik wprowadza nowe funkcjonalności według własnej strategii, jedne implementują je lepiej, inne gorzej, niektóre do niedawna w ogóle tego nIE robiły.

Chrome @WebKit

WebKit jest świetnym i innowacyjnym silnikiem, jego wartość wzrosła zwłaszcza przy rosnącej popularności Chrome. Jeżeli któraś z właściwości CSS3 w ogóle ma działać, to pierwej działa na WebKicie. Pierwsi wprowadzili gradienty¹ w CSS, cienie elementów czy płynne animacje. To przyciąga developerów-ewangelistów, którym bardzo pasuje idea strony bez obrazków i bez zbędnych skryptów JS.

Jednak WebKit stawiając na szybkość implementacji kolejnych elementów CSS3, zwraca mniejszą uwagę na renderowanie tych właściwości. Jeszcze z czasów, gdy border-radius był największą nowością CSS3 (chyba do teraz ludzie opisują tę właściwość), w chrome owe zaokrąglone krawędzie były mocno poszarpane. Jeszcze do niedawna, jeśli połączyło się box-shadow: inset wraz z border-radius, zaokrąglenie znikało, a cień się spłycał. Dopiero w Chrome 10 to poprawili.

Firefox @Gecko

Firefox ze swoim Gecko do niedawna obierał inną taktykę, mniej dynamiczną, lecz bardziej dokładną. Gdy kiedyś on wyznaczał trendy, był tym młodym, pełnym zapału lisem i siłą fanów zdobywał swoją pozycję. Teraz jest już topornym seniorem, który każdy krok musi dobrze przemyśleć. Renoma tego wymaga. Nowe rzeczy wprowadza wolniej, przy czym więcej uwagi przykłada do wyświetlania elementów.

W tej chwili chyba żaden silnik nie może się równać z firefoksem pod względem renderowania. Różnią się szczegółami, a to szczegóły wpływają na ocenę całości. Wystarczy spojrzeć na wyświetlanie cieni. Ciekaw jestem jak to się zmieni w stosunku do zmienionego planu wydawniczego.

Detale

Wielkich różnic przy pojedynczych efektach nie ma, wystarczy jednak napisać ciut bardziej skomplikowany kod, a różnice w detalach, zaczynają się przekształcać w różnice na całych obiektach. Spójrz proszę na mojego avatara napisanego w CSS3 i porównaj. ;)

Firefox 5	Chrome 122	Opera 11.11	IE 9	Twoja przeglądarka

Przy tworzeniu nowych standardów jest co obserwować i jest z czym eksperymentować. A istnieją problemy, które były, są i pewnie pozostaną nierozwiązane. ;) A może wy znacie jakieś inne zauważalne różnice pomiędzy przeglądarkami podczas wyświetlania elementów z CSS3?

1. Gradienty początkowo znalazły się w tylko WebKicie, dopiero później zostały dodane do szkiców CSS3. [↩]
2. Tak na prawdę to 14, jednak w tym przypadku nie ma żadnych różnic pomiędzy nimi. ;) [↩]