Mi az, és miért kell ezeket használni?
A CSS-szállító előtagok, amelyek néha ismertek vagy CSS- böngésző előtagok, a böngészők számára lehetővé teszik az új CSS-funkciók támogatását, mielőtt ezeket a funkciókat teljes mértékben támogatják az összes böngészőben. Ezt egyfajta tesztelési és kísérletezési időszakban lehet elvégezni, amikor a böngésző gyártó pontosan meghatározza, hogy miként fogják megvalósítani ezeket az új CSS-szolgáltatásokat. Ezek az előtagok nagyon népszerűvé vált a CSS3 néhány évvel ezelőtti felemelkedésével.
Amikor a CCS3-at először vezették be, számos izgatott tulajdonság kezdett különböző böngészőket ütközni különböző időpontokban. Például a webkitt által működtetett böngészők (Safari és Chrome) voltak az elsőek, amelyek bemutatják az animáció-jellegű tulajdonságokat, például a transzformációt és az áttérést. A webes előhívó tulajdonságok használatával a webes tervezők az új funkciókat használhatják munkájuk során, és megtekinthetik azokat a böngészőkben, amelyek támogatták őket azonnal, ahelyett, hogy minden más böngésző gyártóra várnia kellene.
Így egy front-end webfejlesztő szemszögéből a böngésző előtagokat használják új CSS-funkciók hozzáadására egy webhelyre, miközben kényelmesen tudják, hogy a böngészők támogatják ezeket a stílusokat. Ez különösen akkor lehet hasznos, ha a különböző böngésző-gyártók kicsit más módon vagy eltérő szintaxissal hajtják végre a tulajdonságokat.
A használni kívánt CSS böngésző előtagjai (amelyek mindegyike egy másik böngészőre jellemző) a következők:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
A legtöbb esetben egy teljesen új CSS-stílusú tulajdonságot használ, akkor a standard CSS-tulajdonságot használja, és minden böngészőhöz hozzáadja az előtagot. Az előválasztott verziók mindig előbb kerülnek (tetszőleges sorrendben), míg a normál CSS tulajdonság utolsó lesz. Ha például CSS3 átmenetet kíván hozzáadni a dokumentumhoz, az átmeneti tulajdonságot az alábbiak szerint használja:
-webkit- átmenet: minden 4s egyszerű;
-moz- átmenet: mind a 4s egyszerű;
-ms- átmenet: mind a 4s egyszerű;
-o- átmenet: mind a 4s egyszerű;
átmenet: mind a 4s egyszerű;
Megjegyzés: Ne feledje, hogy egyes böngészők más tulajdonságokkal rendelkeznek, mint a többiek, ezért ne feltételezzék, hogy egy adott tulajdonság böngészője előzetesen megegyezik a szokásos tulajdonsággal. Például CSS-gradiens létrehozásához a lineáris gradiens tulajdonságot használja. A Chrome és a Safari Firefox, az Opera és a korszerű verziók a megfelelő előtaggal használják ezt a tulajdonságot, míg a Chrome és a Safari korai verziói a prefixált tulajdonságot - a webkit-gradienset használják. Továbbá a Firefox különböző értékeket használ, mint a standardoké.
Azért, hogy mindig a CSS tulajdonság normál, nem előre definiált verziójával fejezi be a nyilatkozatot, így ha egy böngésző támogatja a szabályt, akkor az fogja használni azt. Ne feledje, hogy a CSS olvasása. A későbbi szabályok elsőbbséget élveznek a korábbiaknál, ha a specificitás ugyanaz, így a böngésző elolvassa egy szabály szállítói verzióját, és használhatja, ha nem támogatja a szokásosat, de ha ez megtörténik, felülírja az eladó verzióját a tényleges CSS-szabály.
A szállító előtagjai nem egy hack
Amikor az előhívó előtagokat először mutatták be, sok internetes szakember azt kérdezte, hogy egy hack vagy egy váltás a sötét napokra, amikor egy weboldal kódját a különböző böngészők támogatására (lásd: " Ez az oldal az IE-ben leginkább megtekinthető " üzenet). A CSS-értékesítők előtagjai azonban nem hackek, és nem szabad, hogy a munkájuk során ne fűzzön fenntartásokat.
A CSS-hack kihasználja a hibás működést egy másik elem vagy tulajdonság végrehajtásában annak érdekében, hogy egy másik ingatlan megfelelően működjön. Például a dobozmodell kihasználta a beszéd-család tulajdonságának elemzésében, illetve a böngészőben a visszalépések (\) elemzését. De ezek a hackok használták a probléma megoldására a különbség között, hogy az Internet Explorer 5.5 hogyan kezelte a doboz modelljét, és hogyan értelmezte a Netscape, és semmi köze a hangcsalád stílusához. Szerencsére ezek a két elavult böngésző azok, amiket ma nem aggódunk.
Az előállítói előtag nem egy csapda, mert lehetővé teszi a specifikáció számára, hogy szabályokat állapítson meg egy adott tulajdonság végrehajtására, ugyanakkor lehetővé téve a böngészők számára, hogy más módon hajtsák végre egy tulajdonságot anélkül, hogy minden mást feltörnének. Továbbá ezek az előtagok a CSS tulajdonságokkal dolgoznak, amelyek végül a specifikáció részét képezik . Mi egyszerűen hozzá egy kódot, hogy hozzáférjünk a tulajdonhoz korán. Ez egy másik ok, amiért a CSS-szabályt a szokásos, nem előre meghatározott tulajdonsággal végződik. Így a teljes böngésző támogatása után eldobhatja az előre definiált verziókat.
Szeretné tudni, hogy mi a böngésző egy bizonyos szolgáltatás számára? A CanIUse.com weboldal csodálatos erőforrás ezen információk összegyűjtéséhez és tudomásul véve, hogy mely böngészők, és ezeknek a böngészőknek a verziói jelenleg támogatják a funkciót.
A szállító előtagjai bosszantóak, de ideiglenesek
Igen, bosszantónak és ismétlődőnek érzi magát, hogy 2-5 alkalommal kell írni a tulajdonságokat, hogy minden böngészőben működjön, de ez ideiglenes helyzet. Például, csak néhány évvel ezelőtt, hogy kerekíteni egy sarok a dobozon kellett írni:
-moz-határ-sugár: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
határ-sugár: 10px 5px;
De most, hogy a böngészők teljes mértékben támogatják ezt a funkciót, tényleg csak a szabványos verzióra van szüksége:
határ-sugár: 10px 5px;
A Chrome támogatta a CSS3 tulajdonságot az 5.0-s verzió óta, a Firefox hozzáadta a 4.0-s verzióban, a Safari hozzáadta az 5.0-ban, az Opera 10.5-ös verzióját, az iOS 4.0-at és az Android 2.1-et. Még az Internet Explorer 9 is előtag nélkül támogatja (és az IE 8 és az alsó nem támogatta azt előtagokkal vagy anélkül).
Ne felejtsd el, hogy a böngészők mindig változni fognak, és a régebbi böngészők támogatására irányuló kreatív megközelítésekre van szükség, hacsak nem olyan weboldalakat tervezel , amelyek a legmodernebb módszerek mögött vannak. Végül a böngésző előtagok írása sokkal könnyebb, mint a későbbi verziókban valószínűleg rögzített hibák felkutatása és kihasználása, feltéve, hogy egy másik hibát talál a kizsákmányoláshoz és így tovább.