-moz-koniec, czyli co dalej z prefiksami?

Jeden z największych koszmarów spędzających sen z powiek milionom webdeveloperów na całym świecie powoli zbliża się do nieuchronnego końca. Otóż Mozilla ogłosiła koniec używania prefiksów.

W ubiegłym tygodniu świat obiegła informacja, iż nowe wersje Firefoxa nie będą wykorzystywały tzw. vendor prefixów, więc wszystkie nowe funkcje css będą implementowane pod docelowymi atrybutami. Czy to dobrze? I tak, i nie. Z jednej strony pozbędziemy się kolejnego dubla z kodu, przez co zaoszczędzimy kilkanaście bajtów, choć i tak jeszcze przez pewien czas powinniśmy zachować prefiksy dla starszych wersji przeglądarek. Jednak należy pamiętać o tym, że nowe własności css, będące na etapie wdrażania, nie będą dostępne dla przeciętnego użytkownika - konieczne będzie własnoręczne włączenie ich w opcjach przeglądarki z poziomu about:config, gdzie zaglądają tylko nieliczni.

Nawet IE się poprawia

Niemniej vendor prefixy nie cieszą się dużą sympatią, więc decyzja Mozilli jest jak najbardziej słuszna. Podobną deklarację złożyło Google w kwietniu tego roku, podczas prezentacji swojego nowego silnika - Blink - będącego forkiem Webkita, z którego korzysta również Opera. Co ciekawe nawet Microsoft powoli wycofuje prefiksy w kolejnych wersjach IE. Z najpopularniejszych przeglądarek tylko w Safari nic się nie zmienia, warto jednak pamiętać, że Safari posiada w naszym kraju mniej niż 1% udziału w rynku.

Tniemy prefiksy

Spójrzmy jak na dzień dzisiejszy wygląda wykorzystanie prefiksów dla najpopularniejszych własności.

• border-radius

Jeśli nie musimy wspierać tak prehistorycznych przeglądarek jak Firefox 3.6, Chrome 4 czy Safari 3.2, to wystarczy jedna linia kodu.

.box {
    border-radius: 5px;
}

• box-shadow

Tylko jedna linia.

.box {
    box-shadow: 0 0 5px rgba(0,0,0,.5);
}

• gradient

Z prefiksów wciąż korzystają przeglądarki mobilne. Warto pamiętać też o fallbacku dla starszych wersji IE.

.box {
    background: #eee;
    background: -webkit-linear-gradient(top, #fff 0%, #eee 100%);
    background: linear-gradient(to bottom, #fff, #eee);
}

• transition

Pefiksów wymagają poprzednie wersje Safari, przeglądarki mobilne i Opera korzystająca z silnika Presto.

.box {
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

• transform

Potrzebny prefiks dla Webkita i pochodnych.

.box {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

• animation

Prefiksów wciąż wymaga Chrome, Safari, Opera i przeglądarki mobilne oparte na Webkicie.

.box {
    -webkit-animation: blink 1s linear;
    -o-animation: blink 1s linear;
    animation: blink 1s linear;
}

• calc

Wymagany prefiks tylko dla poprzednich wersji safari i przeglądarek mobilnych oraz fallback dla przeglądarek nie wspierających tej funkcji.

.box {
    width: 99%;
    width: -webkit-calc(100% - 10px)
    width: calc(100% - 10px);
}

Podsumowanie

Mimo iż prefiksy pozostaną z nami przez pewien czas, oczywiście jeśli tylko zamierzamy wspierać starsze przeglądarki, to jest to początek ich końca. Miejmy nadzieję, iż pozbędziemy się ich szybciej niż IE6. A na razie do nowych projektów dorzućmy niezrównany prefix-free 😉