Artykuł ten przedstawi użyteczne a zarazem darmowe narzędzie przydatne w pracy każdej osobie zajmującej się Webdesignem. Stworzone przez Leę Verou, które powinno pomóc uwolnić się od męczących prefiksów w CSS. Oto PrefixFree.

W czym tkwi problem przy prefiksach?

Z pewnością każdy zgodzi się ze mną, że CSS 3 jest całkiem fajnym narzędziem i pozwala na robienie rzeczy, które dotychczas były niemożliwe. Jednakże ci, którzy z rzeczonego CSS 3 korzystają, z całą pewnością doświadczyli prefiksowego piekła, które dobrze widoczne jest na poniższym przykładzie (pochodzącym z prawdziwego arkusza stylów!):

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #26ace4;
   background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -o-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: -ms-linear-gradient(transparent, rgba(0,0,0,.3));
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-shadow: .1em .2em .4em -.2em black;
   -moz-box-shadow: .1em .2em .4em -.2em black;
   box-shadow: .1em .2em .4em -.2em black;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -ms-transform: rotate(15deg);
   -webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
   -o-transform: rotate(15deg);
   -ms-transform: rotate(15deg);
   transform: rotate(15deg);
   -webkit-animation: none;
   -moz-animation: none;
   animation: none;
}

Wcale nie mówię, że prefiksy są złe. W gruncie rzeczy, potrzebujemy ich. Rzeczywistość jest jednak taka, że w większości przypadków mogą one spowodować nie tylko problemy z szeroko pojętą konserwacją, ale i rozrost plików CSS. Co więcej, trudniej jest przez nie dostosowywać wartości.

Rozwiązanie: PrefixFree

Kod pisany przez autorkę skryptu w jej codziennej pracy (m.in. jej demo czy prezentacje) nie posiada żadnych prefiksów, nawet w przypadku własności  @keyframes czy transition, które nie są wspierane bez użycia prefiksów. Aby móc tak właśnie robić, napisała ona skrypt, który wykrywa prefiks obecnie używanej przeglądarki i dodaje go tam, gdzie jest to wymagane. Pomysł ten jeszcze lepiej rozbudowała, dostosowując skrypt tak, aby przetwarzał on cały kod CSS na stronie. I tak oto narodził się PrefixFree (http://leaverou.github.com/prefixfree/).

Skrypt zasadniczo pracuje pod JavaScript, aby użytkownik całkowicie mógł zapomnieć o kłopotliwych prefiksach. Przerabia on arkusze stylów (z wyjątkiem tych z regułami @import), osadzone arkusze stylów, style wbudowane, a nawet dodane później elementy CSS. A jeśli, w rzadkich przypadkach, chciałbyś użyć innej definicji dla innego silnika (np. z powodu błędnej implementacji), możesz nadal korzystać z CSS z prefiksami.

Pozytywną stroną dla PrefixFree jest to, że jeśli dostawca przeglądarki usunie prefiks dla opcji CSS 3, użytkownik może usunąć skrypt i CSS będzie nadal działać. Jego kod będzie obowiązywać w CSS 3 (na tyle by przejść przez walidator CSS). Jego kod nie będzie od tego zależał (w przeciwieństwie do preprocesorów CSS); to raczej funkcjonuje jako polyfill, jak na razie niwelując różnice między przeglądarkami.

Kolejną przydatną funkcją jest to, że skrypt automatycznie wykrywa, które właściwości potrzebują prefiksów. Jego kod nie zawiera listy właściwości, tylko wykrywa te, które są obsługiwane i które z nich są obsługiwane tylko z prefiksem. Wartości, selektory i zasady bazują na predefiniowanych listach, jednakże nadal są one prefiksowane jedynie w razie potrzeby. Wszystko jest tu oparte na wykrywaniu funkcji.

W przeciwieństwie do innych rozwiązań (http://prefixr.com/), PrefixFree dodaje odpowiedni prefiks przy starcie, dzięki czemu użytkownik pobiera znacznie mniejszy plik CSS. Niektórzy mogą twierdzić, że wstępnie przetworzony CSS jest szybszy, z powodu braku zaangażowania po stronie klienta. Do pewnego stopnia jest to prawda, jednakże w przeprowadzonym przez autorkę skryptu mini eksperymencie opóźnienie było nieznaczne, wręcz niezauważalne.

Ponadto, jeśli zostawilibyśmy prefiksowanie po stronie serwera, mogą pojawić się dwa główne problemy. Po pierwsze, rozmiar pliku CSS jest wciąż ogromny, ponieważ musi zawierać wszystkie prefiksy (oraz wersje bez nich). A po drugie, skrypt po stronie serwera musi ciągle posiadać listę tych właściwości, ponieważ nie są one automatycznie wykrywane, tak jak z PrefixFree.

Więc w skrócie, co robi PrefixFree? Sprawia, że nasz kod wygląda tak:

.download {
   position: absolute;
   top: 1em;
   left: -1.5em;
   width: 6em;
   height: 6em;
   padding: 1em 0;
   background: #26ace4;
   background-image: linear-gradient(transparent, rgba(0,0,0,.3));
   color: white;
   line-height: 1;
   font-size: 140%;
   text-align: center;
   text-decoration: none;
   text-shadow: .08em .08em .2em rgba(0,0,0,.6);
   border-radius: 50%;
   box-shadow: .1em .2em .4em -.2em black;
   box-sizing: border-box;
   transform: rotate(15deg);
   animation: none;
}

Czy nie jest to coś, co lepiej zostawić po stronie serwera?

Jest to ważny argument, i oczywiście są wady i zalety obu podejść. Używanie skryptu po stronie serwera oznacza, że:

• Musi być on aktualizowany bardzo często, tak jak zmienia się obsługiwane przeglądarki. PrefixFree automatycznie wykrywa, co wymaga prefiksu, a co nie.
• Wszystkie prefiksy muszą być pobrane, co oczywiście wiąże się ze zwiększeniem rozmiaru pliku. W średniej wielkości arkuszu stylów, wartość ta jest znacznie większa niż rozmiar prefixfree.js.
• W przypadku preprocesorów takich jak LESS i SASS, wszystko zależy od używania ich własnych składni, więc nie można po prostu usunąć skryptu po kilku latach.

Jednak istnieją pewne korzyści, kiedy robimy to po stronie serwera:

• Pobieranie trwa dłużej, jednakże użytkownik nie widzi nie CSS’owej wersji stylu. Z PrefixFree będzie to wszystko odbywać się z minimalnym opóźnieniem.
• To działa tak samo, nawet wtedy, gdy JavaScript jest wyłączony. W takim przypadku użytkownik po prostu zobaczy projekt bez pewnych opcji CSS 3, ale będzie on nadal funkcjonalny. Jeśli CSS jest napisany poprawnie, projekt powinien być funkcjonalny bez CSS 3 tak czy inaczej.

Osobiście uważam, że to jak postąpimy to nasza osobista decyzja w zależności od tego czy korzyści są dla nas ważniejsze niż wady.

Pobierz skrypt na Github!

Możesz pobrać PrefixFree z GitHub (http://leaverou.github.com/prefixfree). Najmniejsza wersja ma mniej niż 5 KB (2 KB w przypadku spakowanego pliku). Skrypt ten to jednak wciąż bardzo wczesna wersja beta i mogą pojawić się w niej błędy. Możesz pomóc je naprawić, albo po prostu je zgłosić (https://github.com/LeaVerou/prefixfree/issues). Miłej zabawy!