CSS3 wprowadził do arkuszy stylów sporo zmian, daje programistom ogromną ilość dodatkowych narzędzi, które sprawiają, iż strony są bardziej dynamiczne, responsywne, i po prostu graficznie lepsze. Rzeczy, które kiedyś wymagały od programisty stworzenia buttona w programie graficznym, teraz są wykonywane całkowicie w CSS.

I wszystko by było pięknie, gdyby nie jedno „ALE”. Nie wszystkie przeglądarki rozpoznawały te polecenia. Niektóre się oczywiście dostosowały i nowe wersje przeglądarek są już jak najbardziej dostosowane do tego, lecz trzeba tez pamiętać, że nie wszyscy zawsze mają najnowszą wersję danej przeglądarki.

Dla takich osób zostały stworzone tak zwane prefiksy, czyli specjalne polecenia, dzięki którym przeglądarka rozpoznawała co ma zrobić. Osobiście nie widzę w tym sensu — skoro mogli dostosować przeglądarkę do prefiksów, to czemu nie mogli jej od razu pod dane polecenie dostosować. No ale nie o tym jest ten artykuł.

Taka sytuacja prowadzi programistę do momentu, gdzie w jednej przeglądarce wszystko wygląda cudnie, by w IE się całkowicie wysypać.

Na stronie: CanIUse.com możecie sprawdzić dokładnie, w jakiej przeglądarce dane polecenie będzie działało, gdzie będą potrzebne prefiksy, a gdzie po prostu nie możemy użyć polecenia, ponieważ przeglądarka go nie odczyta.

Co to są te prefiksy.

Prefiksy to informacja dla przeglądarki, jak ma czytać dane polecenie.

Dla przykładu:

transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera

Te polecenie przekręci nam element na który będzie wskazywał, o 45 stopni. Lecz zadziała nam tylko w Firefox 16+, IE 10+, Opera. Więc co z pozostałymi przeglądarki ?.

Tutaj pojawia się nasz prefiks:

-webkit-transform: rotate(45deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(45deg);  /* IE 9 */

Prefiks to przedrostek polecenia, czyli jak wyżej można zauważyć, prefiksy dla Chrome, Opera 15+, Safari 3.1+ to -webkit-transform:, a dla IE 9 to -ms-transform:. Dopiero po ich zastosowaniu przeglądarka będą wiedziały co tam siedzi w tym kodzie i poprawnie go zrozumie. Jest to trochę skomplikowane, lecz dla leniwych programistów oczywiście mamy rozwiązanie.

Pytanie jak się w tym nie pogubić?

Na szczęście środowisko programistów przyszło nam z pomocą. Na stronie Autoprefixer.github, możesz w łatwy sposób uzyskać kod który będzie działał w każdej przeglądarce.

Podaj w jednym oknie polecenie, a w drugim dostaniesz kod gotowy na stronę który pozostaje ci tylko skopiować. Ważne jest to że strona sama rozpoznaje czy kod musi mieć prefiks czy nie. Jest na bieżąco aktualizowana, więc polecenia które  z niej dostaniesz będą na pewno poprawne.

Magia, to jest magia !!.

Lecz mam dla was jeszcze lepsze rozwiązanie. Ktoś mądry stworzył narzędzie które w pełni automatyzuje tworzenie prefiksów.

Ściągnij z strony: Prefixs Free, skrypt ważący zaledwie 2 kb, o nazwie: prefixfree.min.js, i zapisz go na dysku, w swoim projekcie.

Teraz musisz podpiąć plik do swojego projekty, czyli używasz polecenia:

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

Ten malutki skrypt w pełni zautomatyzuje prefiksy. Jeśli gdzieś zostanie wykryte polecenie które wymaga prefiksów, on automatycznie ustawi dla przeglądarki odpowiednie wartości, więc cała robota z prefiksami praktycznie nam odpada.

Ten prosty trick rozwiąże nam nasze problemy z prefiksami, i pozwoli stosować wszystkie sztuczki z CSS3

Jeśli przydał ci się artykuł, zostaw mały ślad po sobie  w postaci komentarz.