Mis on vendor-prefixid?

Needlad mitte-standardsed prefiksid, mida brauseriarendajad kasutavad uute või eksperimentaalsete CSS-omaduste toe lisamiseks enne nende ametlikku kinnitamist ja standarditesse lisamist. Need võimaldavad järk-järgult integreerida uusi võimalusi veebis, kuid nõuavad hoolikat lähenemist.

Peamised prefiksid:

• -webkit-: Chrome, Safari, Opera (mõned versioonid), enamik mobiilbrausereid (sh Android ja iOS).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (mõned versioonid).
• -o-: Opera (vanemad versioonid).

Gatimise tootja prefikside kasutamisel on oluline arvestada kirjutamisjärjekorraga: esmalt prefiksid, siis standardomadus. See tagab, et kui brauserid hakkavad toetama standardomadust, kirjutab see prefiksid üle.

.element {
  -webkit-border-radius: 10px; /* Safari versioonid 5 ja madalam */
  -moz-border-radius: 10px; /* Firefox versioonid 4 ja madalam */
  border-radius: 10px; /* Standardomadus */
}

Praegu on vendor-prefikside kasutamine oluliselt vähenenud tänu uute CSS-omaduste aktiivsemale kasutuselevõtule kõigis brauserites. Kuid need võivad olla vajalikud vanemate brauserite toe jaoks või eksperimentaalsete API-dega töötamisel.

Automaatselt prefikside haldamiseks kasutatakse sageli PostCSS-i koos Autoprefixer pluginaga.

// PostCSS konfiguratsiooni näide Autoprefixeriga
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%'] // Toetatud brauserite seadistused
    })
  ]
};

Autoprefixer analüüsib CSS-i ja lisab vajalikud prefiksid vastavalt brauserite ühilduvuse seadistustele. See lihtsustab arendust ja vähendab vigu, mis on seotud käsitsi prefikside lisamise ja haldamisega.