Mi a vendor előtagok?

Ezek nem szabványos előtagok, amelyeket a böngészőfejlesztők használnak új vagy kísérleti CSS tulajdonságok támogatásának hozzáadására, mielőtt hivatalosan jóváhagyásra és szabványosításra kerülnének. Lehetővé teszik az új funkciók fokozatos bevezetését a weben, de óvatos megközelítést igényelnek.

Fő előtagok:

• -webkit-: Chrome, Safari, Opera (egyes verziók), a legtöbb mobil böngésző (beleértve az Androidot és az iOS-t).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (egyes verziók).
• -o-: Opera (régi verziók).

A beszállítói előtagok használatakor fontos figyelembe venni a írási sorrendet: először az előtagok, majd a szabványos tulajdonság. Ez biztosítja, hogy amikor a böngészők támogatni kezdik a szabványos tulajdonságot, az felülírja az előtagot.

.element {
  -webkit-border-radius: 10px; /* Safari 5 és régebbi verziók */
  -moz-border-radius: 10px; /* Firefox 4 és régebbi verziók */
  border-radius: 10px; /* Szabványos tulajdonság */
}

Jelenleg a beszállítói előtagok használata jelentősen csökkent, köszönhetően az összes böngésző által az új CSS tulajdonságok aktívabb elfogadásának. Azonban szükség lehet rájuk régi böngészőverziók támogatásához vagy kísérleti API-k esetén.

A beszállítói előtagok kezelésének automatizálásához gyakran használják a PostCSS-t az Autoprefixer plugin-nel.

// PostCSS konfiguráció példája Autoprefixer-rel
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['utolsó 2 verzió', '> 1%'] // támogatott böngészők
    })
  ]
};

Az Autoprefixer elemzi a CSS-t, és a böngészőkkel való kompatibilitási beállítások alapján hozzáadja a szükséges előtagokat. Ez megkönnyíti a fejlesztést és csökkenti a manuális előtag hozzáadásával és kezelésével kapcsolatos hibák valószínűségét.