Ostatnio programiści silnika WebKit ostro wzięli się do pracy. Niedawno wspominałem o zaimplementowaniu obsługi reguły font-face. W ostatnich 3 tygodniach dodano kolejne - dosłownie - bajery, które urozmaicą niejedną stronę.

Client-side database storage

Pierwszą z wprowadzonych nowości jest obsługa Client-side database storage, czyli baz danych po stronie klienta. Udostępniono także testową stronę, na której możemy zobaczyć jak działa współpraca z lokalną bazą danych. Jednak wspomniano też, że jest to dopiero wstępna implementacja i nie wszystko jeszcze działa, co zostało opisane w w/w. dokumentacji. Dodatkowo, zawartość bazy można podglądać za pomocą narzędzia WebInspector. Niestety w buildach pod Windowsem chyba jeszcze jest to niemożliwe.

Transformacje CSS

Kolejnym dodatkiem jest obsługa transformacji CSS. Obecnie wspierane są transformacje pochylania, rotacji, przerzucania oraz skalowania elementów.

Funkcjonalność ta realizowana jest poprzez własność -webkit-transform. Jako wartość podajemy listę funkcji realizujących wybrane transformacje, np.

img {
-webkit-transform:rotate(170deg) scale(0.6) skew(-23deg);
}

Obsługiwanymi funkcjami są: scale (skalowanie), scaleX (skalowanie horyzontalne), scaleY (skalowanie wertykalne), rotate (obrót), translate, translateX, translateY, skew (pochylenie), skewX, skewY, matrix.

Domyślnie wszystkie transformacje wykonywane są względem środka obiektu (przykładowo środek obrotu znajduje się dokładnie na środku obiektu transformowanego). Można jednak zmienić to ustawienie za pomocą własności -webkit-transform-origin. Wartości tej własności są identyczne z wartościami własności background-position.

Więcej szczegółów dostępne jest na niżej wymienionych stronach.

• Wpis na blogu deweloperów WebKita
• Demo transformacji
• CSS3 Working Draft - CSS Angles

Animacje CSS

Ostatnią nowością są animacje CSS. Jest to także wstępna implementacja i - zdaniem autorów - jeszcze sporo jest do zrobienia.

Najprostszą formą animacji są przejścia (transitions). Działa to w ten sposób, że jeśli zmianie ulega wartość jednej z własności CSSowych, to przeglądarka stopniowo zmienia wartość ze starej wartości do nowej w odpowiednim przedziale czasowym.

Funkcjonalność ta realizowana jest poprzez własności

• transition-property - określa własność, która ma być przedmiotem animacji, np. opacity
• transition-duration - czas trwania animacji (CSS3 Values and Units - Times)
• ransition-timing-function - funkcja timingu dla przejścia (możliwe wartości: default, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)

Dostępna jest też własność skrótowa transition. Przykładowy zapis będzie miał postać

div {
	opacity: 1;
	-webkit-transition: opacity 1s linear;
}

div:hover {
	opacity: 0;
}

Powyższy kod przypisany do jakiegoś elementu spowoduje jego stopniowe zanikanie, gdy wskażemy go myszką.
Przykład działania:

W przeglądarkach bez obsługi animacji CSS powyższy DIV zniknie od razu, bez płynnego przejścia.

Możemy też zdefiniować kilka przejść dla jednego elementu na raz. Własności transition-property, transition-duration oraz transition-timing-function akceptują także listę wartości oddzieloną przecinkami. Także kod typu

div {
	-webkit-transition-property: opacity, left;
	-webkit-transition-duration: 2s, 4s;
}

także będzie działał. Właność opacity będzie przechodziła przez 2 sekundy, zaś własność left przez 4.

Powyższe można też łączyć z transformacjami CSS.

Podsumowanie

Wszystkie wymienione wyżej nowości możemy potestować na odpowiednich nightly-buildach Safari. Buildy dla MacOSa mają wbudowane nowe funkcjonalności szybciej niż te dla systemu Windows, ale buildy z 1-go listopada wspierają już wszystkie z tych bajerów. Osoby zainteresowane testowaniem zachęcam do ściągnięcia. Obecnie wszystkie wymienione własności CSSowe wymagają przedrostka -webkit-.