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. ;)

© GrovMan dla GrovMan's log, 2011. | # | 6 komentarze | Dodaj do: del.icio.us
Tagi: css, CSS3, plan wydawniczy, przeglądarki

Specyfikacja pozwoli na m.in wykorzystanie nowych właściwości takich jak:

• Schematy kolorów wzbogacone o kanał alfa (półprzezroczystość),
• płynne przejścia,
• zaokrąglone i obrazkowe ramki,
• cienie i wiele innych…

Programiści prowadzą testy nowych funkcji i powoli je wdrażają do swoich produktów. Podczas ich trwania, niektóre właściwości będą różnie zapisywane dla różnych silników przeglądarek, np. jeśli chcemy zaokrąglić lewą, górną krawędź ramki o 0.5em, dla przeglądarki opartej na silniku Gecko, zapiszemy właściwość tak: -moz-border-radius-topleft: 0.5em;, a opartej na silniku WebKit: -webkit-border-top-left-radius: 0.5em;. Jednak dalej są to wersje testowe i zdarzają się wpadki takie jak poruszanie się tekstu przy zaznaczaniu w Gecko czy poszarpane zaokrąglenia w WebKicie. ;)  Z pomocą CSS3 można zrobić figurkę 3D – tak w ramach ciekawostki. Aby zobaczyć, co i jak działa w przeglądarkach, odsyłam do strony CSS3 preview,  a na żywy przykład, świetnie się nadaje strona LWA21, która w całości jest oparta na nowościach trzeciej wersji CSS.

Dzięki CSS3, webmasterzy nie będą musieli wykorzystywać tyle JavaScriptu, aby stworzyć ciekawe efekty na stronie, wiadomo – im mniej JS’a tym lepiej, a ci którzy go nie znają (np. ja) też mogą uzyskać takie efekty bez kombinowania.

© GrovMan dla GrovMan's log, 2009. | # | 5 komentarze | Dodaj do: del.icio.us
Tagi: css, CSS3, internetowe standardy, prezentacja, webmastering