Dynamiczny CSS

wtorek, 8 września 2009

Ten tekst został zainspirowany postem na blogu nme.pl.
Zaprezentowane rozwiązanie zainteresowało mnie, ze względu na pewne analogie do moich eksperymentów z gradientami

Wprowadzenie

Na początek muszę napisać że nie jestem zwolennikiem opisywanych technik.

Powinno być tak, że

Tyle teorii, w praktyce i tak wszystko wychodzi zupełnie inaczej.
JavaScript często wspomaga warstwę prezentacyjną, omijając liczne ograniczenia przeglądarek.

Do rzeczy. Istnieje kilka sposobów na modyfikację stylów.

Inline CSS

Najprostszy, polega na modyfikacji właściwości style danego elementu. Jest to łatwy w użyciu i mało elegancki sposób. Jako jedyny działa identycznie na każdej przeglądarce.

W3C DOM CSS Level 2

Oficjalnie istnieje API pozwalające modyfikować style, zdefiniowane za pomocą elementów link i style.

Style opisuje właściwość document.styleSheets

… i na tym koniec, bo obiekt, który otrzymamy nie doczekał się spójnej implementacji. Różnice pomiędzy przeglądarkami zabijają. API wygląda jak jakiś ponury żart. Dokumentacja jest żałosna. Nic dziwnego że rozwiązanie nie zdobyło popularności.

Modyfikacja elementu Style

Jest jeszcze jedna metoda. Użyłem jej przy okazji moich zabaw z gradientami. Wystarczy stworzyć własny element style i wypełnić go treścią. Ma to niezaprzeczalny urok — jest bajecznie proste. Wady? W IE próba modyfikacji elementów style kończy się błędem Unknown error.

Jak nie kijem, to pałką

Z koślawym API modelu DOM CSS, zmierzył się Nme na swoim blogu. W efekcie powstała całkiem elegancka biblioteka.

Oto przykład użycia: 

css.replace('.asd',{'color':'green'});

Metodologia jest wzorowana na jQuery. Nie będę dokładniej opisywał samej biblioteki, wszystko można znaleźć u źródeł.

To o czym chcę podzielić to moje przemyślenia nad dostępnymi możliwościami modyfikowania stylów. Dla tego właśnie zacząłem od małego podsumowania.

Zaskakujące jest słabe wsparcie dla modelu W3C. Dla przykładu Firebug nie pokazuje stylów modyfikowanych w ten sposób. Wygląda na to że Mozilla Fundation utraciła dawny zapał do implementowania standardów, gdy nie mają one wsparcia ze strony swojego głównego konkurenta. Czasy świętych wojen document.getElementById vs document.all minęły już bezpowrotnie.

Dotychczas ignorowałem document.styleSheets, dla tego że nie chciało mi się wnikać w szczegóły poszczególnych implementacji.

Oryginalny interfejs, pomijając liczne wady, ma jednak pewną miłą cechę: Daje dostęp do właściwości style: 

document.styleSheets[0].cssRules[0].style.color = '#00c'

Jedyne czego brakuje, to możliwość łatwego wyszukiwania odpowiedniego opisu z użyciem selektorów CSS, może wystarczyło by zaimplementować tylko ten fragment? 

$.css(".asd").color = "#00c";

Na razie to tylko luźny pomysł…

Linkownia

Etykiety: , , ,

Red 00:42

Komentarze

Prześlij komentarz

Archiwum

…

Subskrybuj

RSS / Atom