Prefixy CSS

Prefixy w CSS są używane do zapewnienia kompatybilności z różnymi przeglądarkami, zwłaszcza gdy chodzi o nowsze lub eksperymentalne właściwości i funkcje. Prefixy przeglądarek to specjalne przedrostki dodawane do niektórych reguł CSS, aby pomóc różnym przeglądarkom interpretować te reguły.

1. Dlaczego Prefixy są Ważne?

Nie wszystkie przeglądarki obsługują wszystkie właściwości CSS w taki sam sposób, zwłaszcza jeśli chodzi o nowsze funkcje. Prefixy pomagają zapewnić, że te właściwości będą działały poprawnie w różnych przeglądarkach.

2. Najpopularniejsze Prefixy Przeglądarek

Oto niektóre z najczęściej używanych prefixów przeglądarek:

• -webkit-: dla przeglądarek opartych na silniku WebKit, takich jak Safari i starsze wersje Chrome i Opery.
• -moz-: dla przeglądarek opartych na Firefox (Mozilla).
• -o-: dla starszych wersji Opery.
• -ms-: dla Internet Explorer i Microsoft Edge.

3. Jak Stosować Prefixy?

Prefixy stosuje się poprzez dodanie ich przed właściwością CSS.

Przykład:

Jeśli chcesz użyć eksperymentalnej właściwości border-radius, możesz dodać różne prefixy, aby zapewnić kompatybilność z różnymi przeglądarkami:

1div {
2  -webkit-border-radius: 10px;
3  -moz-border-radius: 10px;
4  -ms-border-radius: 10px;
5  -o-border-radius: 10px;
6  border-radius: 10px; /* standardowa wersja */
7}

4. Narzędzia i Autoprefixy

Ręczne dodawanie prefixów do każdej nowej właściwości może być żmudne i niewygodne. Na szczęście istnieją narzędzia, takie jak Autoprefixer, które mogą automatycznie dodać wymagane prefixy do Twojego arkusza stylów.

Zobacz na poniższy kod:

1.my-element {
2  transform: rotate(45deg);
3  animation: my-animation 5s infinite;
4  box-shadow: 10px 10px 5px #888;
5  border-radius: 10px;
6}
7
8@keyframes my-animation {
9  from { transform: rotate(0deg); }
10  to { transform: rotate(360deg); }
11}

Jeśli wkleisz go do do Autoprefixer Online, otrzymasz mniej więcej następujący wynik:

1.my-element {
2  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
3  -moz-transform: rotate(45deg);    /* Firefox */
4  -ms-transform: rotate(45deg);     /* IE 9 */
5  -o-transform: rotate(45deg);      /* Starsza Opera */
6  transform: rotate(45deg);         /* Standardowe */
7
8  -webkit-animation: my-animation 5s infinite; /* Chrome, Safari, Opera */
9  -moz-animation: my-animation 5s infinite;    /* Firefox */
10  -ms-animation: my-animation 5s infinite;     /* IE 10+ */
11  -o-animation: my-animation 5s infinite;      /* Starsza Opera */
12  animation: my-animation 5s infinite;         /* Standardowe */
13
14  -webkit-box-shadow: 10px 10px 5px #888; /* Chrome, Safari, Opera */
15  -moz-box-shadow: 10px 10px 5px #888;    /* Firefox */
16  box-shadow: 10px 10px 5px #888;         /* Standardowe */
17
18  -webkit-border-radius: 10px; /* Chrome, Safari, Opera */
19  -moz-border-radius: 10px;    /* Firefox */
20  border-radius: 10px;         /* Standardowe */
21}
22
23@-webkit-keyframes my-animation {
24  from { -webkit-transform: rotate(0deg); }
25  to { -webkit-transform: rotate(360deg); }
26}
27
28@-moz-keyframes my-animation {
29  from { -moz-transform: rotate(0deg); }
30  to { -moz-transform: rotate(360deg); }
31}
32
33@-ms-keyframes my-animation {
34  from { -ms-transform: rotate(0deg); }
35  to { -ms-transform: rotate(360deg); }
36}
37
38@-o-keyframes my-animation {
39  from { -o-transform: rotate(0deg); }
40  to { -o-transform: rotate(360deg); }
41}
42
43@keyframes my-animation {
44  from { transform: rotate(0deg); }
45  to { transform: rotate(360deg); }
46}

5. Wartość Rozważenia

Choć prefixy są przydatne, warto pamiętać, że nie wszystkie właściwości je wymagają, a niektóre mogą być już powszechnie obsługiwane przez większość przeglądarek. Sprawdzanie dokumentacji i korzystanie z narzędzi do testowania kompatybilności przeglądarek może pomóc w zrozumieniu, kiedy i jak stosować prefixy.