HTML5 & CSS3

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

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

img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
div {
-webkit-box-shadow: 5px;
-moz-box-shadow: 5px;
-o-box-shadow: 5px;
box-shadow: 5px;
}

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.

img {border-radius: 5px;}
div {box-shadow: 5px;}

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.

<script src="prefixfree.min.js"></script>

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.

komentarzy 6

  • Awatar
    Njoi

    26 czerwca 2012 23:08

    Fajny skrypt, dzięki!

    Odpowiedz
  • Awatar
    Piotr

    30 grudnia 2012 01:47

    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ć?

    Odpowiedz
    • Awatar
      Michał Kortas

      30 grudnia 2012 16:58

      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 :-)

      Odpowiedz
      • Awatar
        Piotr

        30 grudnia 2012 18:21

        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ć.

        Odpowiedz
      • Awatar
        Michał Kortas

        30 grudnia 2012 18:40

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

        Odpowiedz
  • Awatar
    darek

    3 kwietnia 2013 18:48

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

    Odpowiedz

Zostaw odpowiedź