Czym są prefiksy dostawców?

To są niestandardowe prefiksy, które programiści przeglądarek używają do dodawania obsługi nowych lub eksperymentalnych właściwości CSS przed ich oficjalnym zatwierdzeniem i włączeniem do standardów. Pozwalają stopniowo wprowadzać nowe funkcje w sieci, ale wymagają ostrożnego podejścia.

Główne prefiksy:

• -webkit-: Chrome, Safari, Opera (niektóre wersje), większość przeglądarek mobilnych (w tym Android i iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (niektóre wersje).
• -o-: Opera (starsze wersje).

Podczas korzystania z prefiksów dostawcy ważne jest, aby przestrzegać kolejności pisania: najpierw prefiksy, potem właściwość standardowa. Zapewnia to, że gdy przeglądarki zaczną obsługiwać właściwość standardową, nadpisze ona prefiks.

.element {
  -webkit-border-radius: 10px; /* Safari wersje 5 i starsze */
  -moz-border-radius: 10px; /* Firefox wersje 4 i starsze */
  border-radius: 10px; /* Właściwość standardowa */
}

Obecnie użycie prefiksów dostawcy znacznie się zmniejszyło dzięki bardziej aktywnemu wdrażaniu nowych właściwości CSS przez wszystkie przeglądarki. Jednak mogą być konieczne do obsługi starszych wersji przeglądarek lub przy pracy z API eksperymentalnymi.

Do automatyzacji zarządzania prefiksami dostawcy często używa się PostCSS z wtyczką Autoprefixer.

// Przykład konfiguracji PostCSS z Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 wersje', '> 1%'] // Konfiguracja obsługiwanych przeglądarek
    })
  ]
};

Autoprefixer analizuje CSS i dodaje niezbędne prefiksy na podstawie ustawień zgodności z przeglądarkami. Ułatwia to rozwój i zmniejsza ryzyko błędów związanych z ręcznym dodawaniem i zarządzaniem prefiksami.