Niektóre style CSS wymagają użycia dodatkowych prefiksów. Boleśnie mogą się o tym przekonać osoby, które nie sprawdzają efektów swojej pracy na różnych przeglądarkach oraz urządzeniach.

W użyciu, są 4 prefiksy:

-webkit – dotyczy przeglądarek Google Chrome, Safari, Opera
-moz- dotyczy przeglądarki Mozilla Firefox
-ms- dotyczy przeglądarek Microsoft Internet Explorer
-o- dotyczy przeglądarek Opera

Zostało one posegregowane według ważności – i tak dwa pierwsze, są bardzo ważne, a brak dwóch pozostałych nie będzie bardzo dotkliwy i będzie miał znaczenie dla bardzo małej liczby odbiorców.

Prefiksy bardzo często używa się przy poniższych stylach:

  • Opacity – ustala stopień przezroczystości
  • Transform – umożliwia m.in. skalowanie i obracanie obiektów
  • box-shadow – dodaje cień do obiektów
  • background-size – ustala rozmiar obrazu będącego tłem obiektu
  • text-decoration – ustala dekorację tekstu, m.in. umożliwia usuwanie podkreśleń z linków
  • border-radius – ustala wygląd rogów obiektu (każdy róg może mieć inny styl)

Istnieją strony, które całą robotę zrobią za nas (dodadzą style automatycznie). Wystarczy tylko wkleić kod CSS i skrypt zrobi za nas resztę. Jedną z takich stron jest Express Prefixr. Przykładowy styl, który zmniejszy nam widoczność obiektu ze 100% do 60% oraz pokoloruje tło na czerwony kolor może być zapisany w następujący sposób:

.mniejsza_widoczność {
  background-color: red;
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  -ms-opacity: 0.6;
  -o-opacity: 0.6;
  opacity: 0.6;
}

 

Czasami jednak warto upewnić się czy style, do których zamierzamy dorabiać prefiksy nie da się zapisać w inny sposób. Właśnie w powyższym przypadku przychodzi nam z pomocą inny styl, który nie wymaga prefiksów. Jest to styl RGBA ustawiający kolory oraz przezroczystość. Styl ten deklarowany jest w następujący sposób:

.mniejsza_widoczność {
  background-color: rgba(255, 0, 0, 0.6);
}

 

Efekt powyżej, który zawiera tylko jedną linijkę będzie identyczny jak wcześniejszych sześć linijek, jednak w takim zapisie możemy napotkać problem z uzyskaniem kodu poszczególnych kolorów. Tutaj z pomocą przychodzą programy graficzne. W Photoshop po wybraniu koloru otrzymujemy gotowe wartość RGB do przepisania:

CSS3 – prefiksy dla różnych przeglądarek