Razumevanje CSS Prefiksa Dobavljača

Da li ste se ikad zapitali šta znače -moz- ili -webkit- oznake u CSS-u? Pa, ako jeste, na pravom ste mestu! Te oznake nazivaju se prefiksi dobavljača.

O Prefiksima Dobavljača

Odgovorimo na pitanje: Šta su prefiksi dobavljača? Jednostavno rečeno, prefiksi dobavljača su način da vaš pregledač podrži nove CSS funkcije pre nego što postanu potpuno podržani u svim pregledačima.

Kada je CSS3 postao popularan, počele su da se pojavljuju sve vrste novih funkcija. Nažalost, nisu svi podržani u svim pregledačima. Prefiksi dobavljača pomogli su programerima da koriste te nove funkcije i podržavaju ih trenutno, bez potrebe da čekaju da svaka od njih postane dostupna za svaki pregledač.

Prefiksi dobavljača nisu hakovanje i slobodno ih koristite.

Dobar način da proverite koje svojstvo je dostupno za upotrebu bez prefiksa dobavljača je proverom usluge CanIUse. Tamo možete videti koji pregledač trenutno podržava koje svojstvo.

Prefiksi

Većina pregledača koriste sledeće prefikse:

-webkit- Chrome, Safari, novije verzije Opera, skoro svi iOS pregledači,
-moz- Firefox,
-o- Stare verzije Opere,
-ms- Microsoft Edge i Internet Explorer.

Kada koristite prefikse dobavljača, imajte na umu da su oni samo privremeni. Mnogo svojstava koja su trebala da imaju prefikse dobavljača sada su u potpunosti podržani i nisu im potrebni.

Kako bi ih trebalo koristiti?

Prefikse dobavljača možete lako koristiti, jednostavno dodavanjem pre svojstva, ovako:

.element {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}

U ovom slučaju osiguravate da svojstvo podržava pregledač.

Dobra je praksa stavljati svojstvo bez prefiksa na dno. Na ovaj način, koristeći kaskadnu prirodu CSS-a, osiguravate da će ovo svojstvo koristiti kada je svojstvo u potpunosti podržano.

Koja svojstva trebaju prefikse?

Ovo je često postavljano pitanje. Dobra stvar bi bila da prestanete da pogađate i proverite ove veb stranice:

• http://shouldiprefix.com/
• https://www.w3.org/TR/css-2010/#properties

Umorni od pisanja prefiksa?

Ako ste se umorili od pisanja prefiksa svaki put kada vam zatreba, postoji nekoliko usluga autoprefiksa koje vam mogu pomoći:

• https://github.com/postcss/autoprefixer - PostCSS plugin,
• https://www.npmjs.com/package/autoprefixer - npm prefixor,
• https://github.com/sindresorhus/sublime-autoprefixer - for Sublime text.

Zaključak

Nadamo se da vam je ovaj kratki uvod u prefikse dobavljača pomogao da ih bolje razumete, a manje ih se bojite. Obavezno ih pravilno koristite u novim projektima i imajte na umu: prefiksi dobavljača su naši prijatelji!