Prefiksy CSS

W starym arkuszu stylów znajdujesz kilka prawie identycznych linii: -webkit-border-radius, -moz-border-radius, a na końcu zwykłe border-radius. Wygląda to na bałagan, ale kiedyś był to jedyny sposób, żeby nowa właściwość zadziałała w każdej przeglądarce. Te przedrostki to prefiksy przeglądarek (ang. vendor prefixes), często zapisywane też jako prefixy.

Prefiksy 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. To specjalne przedrostki dodawane do niektórych reguł CSS, aby pomóc różnym przeglądarkom interpretować te reguły. Pomyśl o Kamieniu z Rosetty: ten sam dekret wyryto na nim trzema pismami - hieroglifami, pismem demotycznym i po grecku - żeby odczytał go każdy, kto znał choć jedno z nich. Prefiksy działają podobnie: tę samą deklarację zapisujesz w kilku "dialektach", a każda przeglądarka czyta ten, który rozumie.

1. Dlaczego prefiksy 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. Prefiksy pomagają zapewnić, że te właściwości będą działały poprawnie w różnych przeglądarkach. Gdy producent wprowadzał nową, jeszcze nieustandaryzowaną właściwość, dodawał ją ze swoim prefiksem - mógł eksperymentować, nie psując przyszłej wersji standardowej.

2. Najpopularniejsze prefiksy przeglądarek

Oto najczęściej używane prefiksy przeglądarek:

• -webkit-: dla przeglądarek opartych na silniku WebKit, takich jak Safari, a także dla Chrome, nowszych wersji Opery i Microsoft Edge, których silnik Blink wywodzi się z WebKitu.
• -moz-: dla przeglądarek opartych na Firefox (Mozilla).
• -o-: dla starszych wersji Opery.
• -ms-: dla Internet Explorera i starszych wersji Microsoft Edge, sprzed przejścia na silnik Chromium.

3. Jak stosować prefiksy?

Prefiksy stosuje się poprzez dodanie ich przed nazwą właściwości CSS. Kolejność ma znaczenie: najpierw wersje z prefiksami, a na samym końcu wersja standardowa. Tak wyglądała kiedyś reguła z właściwością border-radius, gdy była jeszcze nowością:

div {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; /* standardowa wersja */
}

Przeglądarka czyta deklaracje od góry i pomija te, których nie rozumie. Jeśli zna kilka wersji tej samej właściwości, obowiązuje ta zapisana najniżej - dlatego wersja standardowa stoi na końcu i zawsze wygrywa z wcześniejszym eksperymentem. Traktuj ten przykład jako lekcję kolejności: dziś border-radius działa bez prefiksów we wszystkich przeglądarkach, a wersji -ms- i -o- tej właściwości nigdy nie potrzebowano, bo Internet Explorer i Opera od razu obsługiwały zapis standardowy.

4. Narzędzia i Autoprefixer

Ręczne dodawanie prefiksó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 prefiksy do Twojego arkusza stylów. Spójrz na poniższy kod - same standardowe właściwości, bez żadnego prefiksu:

.my-element {
  transform: rotate(45deg);
  animation: my-animation 5s infinite;
  box-shadow: 10px 10px 5px #888;
  border-radius: 10px;
}

@keyframes my-animation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Tak piszesz na co dzień: raz, czytelnie, w wersji standardowej. Jeśli wkleisz ten kod do Autoprefixer Online i ustawisz obsługę bardzo starych przeglądarek, otrzymasz mniej więcej następujący wynik:

.my-element {
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* IE 9 */
  -o-transform: rotate(45deg);      /* Starsza Opera */
  transform: rotate(45deg);         /* Standardowe */

  -webkit-animation: my-animation 5s infinite; /* Chrome, Safari, Opera */
  -moz-animation: my-animation 5s infinite;    /* Firefox */
  -ms-animation: my-animation 5s infinite;     /* IE 10+ */
  -o-animation: my-animation 5s infinite;      /* Starsza Opera */
  animation: my-animation 5s infinite;         /* Standardowe */

  -webkit-box-shadow: 10px 10px 5px #888; /* Chrome, Safari, Opera */
  -moz-box-shadow: 10px 10px 5px #888;    /* Firefox */
  box-shadow: 10px 10px 5px #888;         /* Standardowe */

  -webkit-border-radius: 10px; /* Chrome, Safari, Opera */
  -moz-border-radius: 10px;    /* Firefox */
  border-radius: 10px;         /* Standardowe */
}

@-webkit-keyframes my-animation {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes my-animation {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes my-animation {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}

@-o-keyframes my-animation {
  from { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(360deg); }
}

@keyframes my-animation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Tak wyglądały arkusze, które musiały działać w przeglądarkach sprzed kilkunastu lat - komentarze pokazują, która przeglądarka czytała daną linię. Nie każda z nich była zresztą potrzebna: Internet Explorer 10 obsługiwał animacje bez prefiksu, więc -ms-animation i @-ms-keyframes to nadmiarowy zapis. Autoprefixer sprawdza w bazie Can I use, czego wymagają przeglądarki wskazane w konfiguracji (Browserslist), i dopisuje tylko te prefiksy. Przy dzisiejszych ustawieniach domyślnych dla tego kodu nie dopisze prawie nic.

5. Czy dziś wciąż potrzebujesz prefiksów?

Choć prefiksy 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ć prefiksy.

Producenci przeglądarek odchodzą dziś od prefiksów: eksperymentalne funkcje ukrywają za flagami w ustawieniach, a na strony trafiają wersje standardowe. Wciąż zdarzają się jednak pojedyncze właściwości działające tylko z prefiksem -webkit-, dlatego przed użyciem nowości zajrzyj do tabeli zgodności na MDN albo na stronie Can I use. Moja rada: nie dopisuj prefiksów ręcznie - pisz standardowe właściwości, a prefiksy zostaw Autoprefixerowi.

Praktyka

W edytorze poniżej czeka egipska strona do pokolorowania - uzupełnij brakujące kolory według komentarzy. Potem dopisz w znaczniku <style> regułę dla obrazka z border-radius: 10px, bez żadnego prefiksu, i sprawdź, że rogi fresku się zaokrągliły:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Starożytny Egipt</title>
    <style>
        /* Dodaj style CSS tutaj */
        /* 1. Ustaw kolor nagłówka h1 na ciemnozłoty (#7A5C00) */
        /* 2. Ustaw kolor tła body na piaskowy (#F4E4C1) */
        /* 3. Ustaw kolor tekstu p na ciemnobrązowy (#4A3C2A) */

        body {
            /* background-color: ??? */
            font-family: serif;
            padding: 20px;
        }

        h1 {
            /* color: ??? */
            text-align: center;
        }

        p {
            /* color: ??? */
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Piramidy Starożytnego Egiptu</h1>
    <p>Piramidy były budowane jako grobowce faraonów. Największa z nich - Piramida Cheopsa - jest jednym z siedmiu cudów świata starożytnego.</p>
    <img src="https://placehold.co/400x200/FFD700/4A3C2A?text=Fresk+Egipski" alt="Fresk egipski" style="display:block;margin:20px auto;">
</body>
</html>

Pamiętaj: prefiksy to Kamień z Rosetty w CSS - ten sam zapis w kilku dialektach, z wersją standardową zawsze na końcu, a dziś pisze je za Ciebie Autoprefixer.