Pozbywamy się ręcznego wstawiania prefiksów w kodzie CSS3


26 czerwca 2012 / Michał Kortas


Ilekroć razy zdarzyło Wam się dostosowywać strukturę arkusza CSS do różnych przeglądarek, czuliście pewnie to samo – zażenowanie. Obecnie, kiedy standardem zaczyna stawać się CSS3, developerzy najwyraźniej zapomnieli o zmorze, jaką był Internet Explorer 6 i jego braku dostosowania się do zaleceń konsorcjum W3C. Musieliśmy budować osobne style dla Microsoft’owej przeglądarki, co nie raz przysparzało nam wielu kłopotów. „Wolna amerykanka” zaczęła się ponownie. Korzystając z tzw. prefiksów (-webkit-, -moz-, -o-) bardzo łatwo zapominamy o którymś z nich, a niedoświadczeni webmasterzy budują witryny często tylko pod konkretny model programu.

Stosowanie prefiksów jest konieczne – wdraża funkcje CSS3, które jeszcze nie są do końca sprawdzone – ale niestety posiada jeszcze jedną, bardzo poważną wadę – powoduje spory wzrost wielkości arkuszy stylów.

Spójrzmy na listing przykładowego kodu CSS, zawierającego elementy, wymagające stosowania prefiksów (obecnie prefiksy tu już nie są wymagane).

Jak widzimy, należy napisać instrukcje dla każdej przeglądarki, w tym uwzględniając oficjalny standard, określony przez W3C. Gdybyśmy nie musieli korzystać z prefiksów, nasz kod wyglądałby tak.

Już na pierwszy rzut oka widać oszczędność w rozmiarze pliku. Właśnie w taki sposób powinien wyglądać nasz arkusz CSS – przechodzący poprawnie przez validator, bez powielania kodu i bez prefiksów, które bez wątpienia kiedyś znikną.

Przechodząc do sedna sprawy, warto skorzystać z narzędzia PrefixFree. Jest to skrypt JS, napisany przez panią Lea Verou, która potrzebowała go w swojej codziennej pracy. W skrócie rzec można, że przerabia on cały kod CSS, dodając do niego automatycznie potrzebne w danej chwili prefiksy (wykrywa typ przeglądarki, oraz jego wersję). Wadą tego rozwiązania może być to, że skrypt wykonywany jest oczywiście po stronie użytkownika, przez co może minimalnie opóźnić wczytywanie się strony. Na szczęście jest to właściwie niezauważalne.

Co należy zrobić, aby zastosować u siebie Frefix Free? Wystarczy pobrać skrypt z tego linku > https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js. Jego waga jest zaskakująca – tylko 5kB. Po pobraniu, wrzucamy go do katalogu z naszą stroną i podpinamy w sekcji <head> witryny.

Nawet jeśli obsługa JavaScript zostanie w przeglądarce wyłączona, nasz kod pozostanie poprawny, pozbawiony ewentualnie niektórych funkcji z CSS3. Nie wpłynie to jednak na poprawność wyświetlania struktury dokumentu HTML.
To w zasadzie wszystko. Od teraz możemy formatować nasze witryny bez (nie)zbędnych prefiksów, które potrafią przyprawić nas o zawrót głowy.



6 odpowiedzi na “Pozbywamy się ręcznego wstawiania prefiksów w kodzie CSS3”

  1. Njoi pisze:

    Fajny skrypt, dzięki!

  2. Piotr pisze:

    Prefix-free ładnie działa jeśli używam znacznika ale nie chce mi działać jeśli umieszczam style za pomocą znacznika . Czy trzeba coś jeszcze dodatkowo wpisać?

    • Wypróbuj wstawienie deklaracji umieszczenia skryptu PfefixFree w różnych miejscach, tzn. raz wstaw odpowiedni kod przed , a innym razem zaraz po nim. Daj znać jak efekty :-)

      • Piotr pisze:

        Dziękuję za szybką odpowiedź ale właśnie znalazłem rozwiązanie. Skrypt prefix-free testowałem głównie na Chrome i jak się okazało nie działa on ze znacznikiem lokalnie na komputerze (przynajmniej na moim). Jak umieściłem stronę na serwerze to skrypt prefix-free zaczął działać.

      • Super! Dziękuję serdecznie za informację. Pozdrawiam i powodzenia w tworzeniu strony :-)

  3. darek pisze:

    no a co w przypadku gdy ktoś ma wyłączoną obsługe js?

Skomentuj Michał Kortas Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.