Co jsou vendor prefixy?

Jedná se o nestandardní předpony, které používají vývojáři prohlížečů k přidání podpory nových nebo experimentálních vlastností CSS před jejich oficiálním schválením a začleněním do standardů. Umožňují postupné zavádění nových funkcí na webu, ale vyžadují opatrný přístup.

Hlavní předpony:

• -webkit-: Chrome, Safari, Opera (některé verze), většina mobilních prohlížečů (včetně Androidu a iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (některé verze).
• -o-: Opera (starší verze).

Při používání předpon dodavatele je důležité dodržovat pořadí zápisu: nejdříve předpony, poté standardní vlastnost. To zajišťuje, že když prohlížeče začnou podporovat standardní vlastnost, přepíše ji předpona.

.element {
  -webkit-border-radius: 10px; /* Safari verze 5 a starší */
  -moz-border-radius: 10px; /* Firefox verze 4 a starší */
  border-radius: 10px; /* Standardní vlastnost */
}

V současnosti se používání předpon dodavatelů výrazně snížilo díky aktivnější implementaci nových vlastností CSS všemi prohlížeči. Nicméně, mohou být nezbytné pro podporu starších verzí prohlížečů nebo při práci s experimentálními API.

Pro automatizaci správy předpon dodavatelů se často používá PostCSS s pluginem Autoprefixer.

// Příklad konfigurace PostCSS s Autoprefixer
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['poslední 2 verze', '> 1%'] // Podporované prohlížeče
    })
  ]
};

Autoprefixer analyzuje CSS a přidává potřebné předpony na základě nastavení kompatibility s prohlížeči. To usnadňuje vývoj a snižuje pravděpodobnost chyb spojených s ručním přidáváním a správou předpon.