Čo sú vendor prefixy?

Toto sú nestandardné predpony, ktoré používajú vývojári prehliadačov na pridanie podpory nových alebo experimentálnych vlastností CSS pred ich oficiálnym schválením a začlenením do štandardov. Umožňujú postupné zavádzanie nových funkcií na webe, ale vyžadujú opatrný prístup.

Hlavné predpony:

• -webkit-: Chrome, Safari, Opera (niektoré verzie), väčšina mobilných prehliadačov (vrátane Androidu a iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (niektoré verzie).
• -o-: Opera (staršie verzie).

Pri používaní predpôn dodávateľa je dôležité dodržiavať poradie písania: najskôr predpony, potom štandardná vlastnosť. To zabezpečí, že keď prehliadače začnú podporovať štandardnú vlastnosť, tá ju prepíše.

.element {
  -webkit-border-radius: 10px; /* Safari verzie 5 a staršie */
  -moz-border-radius: 10px; /* Firefox verzie 4 a staršie */
  border-radius: 10px; /* Štandardná vlastnosť */
}

V súčasnosti sa používanie predpôn dodávateľa výrazne znížilo vďaka aktívnejšej implementácii nových CSS vlastností všetkými prehliadačmi. Napriek tomu môžu byť potrebné na podporu starších verzií prehliadačov alebo pri práci s experimentálnymi API.

Na automatizáciu správy predpôn dodávateľa sa často používa PostCSS s pluginom Autoprefixer.

// Príklad konfigurácie PostCSS s Autoprefixerom
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['posledné 2 verzie', '> 1%'] // Podporované prehliadače
    })
  ]
};

Autoprefixer analyzuje CSS a pridáva potrebné predpony na základe nastavení kompatibility s prehliadačmi. To zjednodušuje vývoj a znižuje pravdepodobnosť chýb spojených s ručným pridávaním a správou predpôn.