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

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij