CSS szállító előtagok, más néven vagy CSS a böngésző előtagjai lehetővé teszik a böngészőgyártók számára, hogy támogatást adjanak hozzá új CSS funkciók mielőtt ezeket a funkciókat minden böngészőben teljes mértékben támogatnák. Ez egyfajta tesztelési és kísérleti időszak alatt tehető meg, amikor a böngésző gyártója határozza meg, hogy pontosan miként valósítják meg ezeket az új CSS-szolgáltatásokat. Ezek az előtagok az elterjedésével nagyon népszerűvé váltak CSS3 Néhány évvel ezelőtt.
A szállító előtagok eredete
A CCS3 első bevezetésekor számos izgatott tulajdonság kezdte el elérni a különböző böngészőket különböző időpontokban. Például a Webkit-alapú böngészők (Safari és Chrome) vezették be elsőként az animációs stílusú tulajdonságokat, például az átalakítást és az átmenetet. A szállító előtagjának használatával tulajdonságait, a webdesignerek képesek voltak használni az új funkciókat munkájuk során, és látni tudták őket a böngészőkben amely azonnal támogatta őket, ahelyett, hogy várniuk kellett volna minden más böngészőgyártó elfogására fel!
Általános előtagok
Tehát a kezelőfelület webfejlesztője szempontjából a böngésző előtagokkal új CSS-szolgáltatásokat adnak a webhelyhez, 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 kissé eltérő módon vagy más szintaxissal valósítják meg a tulajdonságokat.
A használható CSS böngésző előtagok (amelyek mindegyike egy másik böngészőre jellemző):
- Android:
-webkit-
- Króm:
-webkit-
- Firefox:
-moz-
- Internet böngésző:
-Kisasszony-
- iOS:
-webkit-
- Opera:
-o-
- Szafari:
-webkit-
Előtag hozzáadása
A legtöbb esetben egy vadonatúj CSS stílusú tulajdonság használatához vegye be a szabványos CSS tulajdonságot, és minden böngészőhöz adja hozzá az előtagot. Az előtagolt verziók mindig az elsők lesznek (tetszőleges sorrendben), míg a normál CSS tulajdonság az utolsó. Például, ha CSS3 átmenetet szeretne hozzáadni a dokumentumához, akkor használja az átmenet tulajdonságot az alábbiak szerint:
-webkit-átmenet: mind a 4-es megkönnyíti;
-moz-átmenet: mind a 4-es megkönnyíti;
-ms-átmenet: mind a 4 könnyű;
-o-átmenet: mind a 4-es könnyebb;
átmenet: mind a 4-es megkönnyíti;
Ne feledje, hogy egyes böngészőkben más tulajdonságok szintaxisa van, mint másokban, ezért ne feltételezzük, hogy egy tulajdonság böngészővel előtagolt verziója pontosan megegyezik a szokásos tulajdonsággal. Például CSS színátmenet létrehozásához használja a lineáris gradiens tulajdonságot. A Firefox, az Opera, valamint a Chrome és a Safari modern verziói használják ezt a tulajdonságot a megfelelő előtaggal, míg a Chrome és a Safari korai verziói az előtagú tulajdonságot -webkit-gradient használják.
A Firefox más értékeket is használ, mint a szokásos.
Annak oka, hogy a deklarációt mindig a CSS tulajdonság normál, nem előtagos verziójával fejezi be, az az oka, hogy amikor egy böngésző támogatja a szabályt, akkor ezt használja. Ne feledje, hogyan olvassa a CSS-t. A későbbi szabályok elsőbbséget élveznek a korábbiakkal szemben, ha a specifikusság megegyezik, így a böngésző beolvassa a szabály és használd, hogy ha nem támogatja a normál verziót, de ha mégis megteszi, akkor felülírja a szállító verzióját a tényleges CSS-sel szabály.
A szállító előtagjai nem feltörések
Amikor az eladó előtagokat először bevezették, sok internetes szakember kíváncsi volt, hogy hack-e vagy sem térjen vissza a sötét napokra, amikor egy webhely kódját elvarázsolja a különböző böngészők támogatására (ne feledje ezt "Ezt a weboldalt leginkább IE-ben lehet megtekinteni"üzenet". A CSS-szállítók előtagjai azonban nem hackek, és nem szabad fenntartanod őket a munkádban történő használatukkal kapcsolatban.
A CSS-hackelés kihasználja egy másik elem vagy tulajdonság megvalósításának hibáit annak érdekében, hogy egy másik tulajdonság megfelelően működjön. Például a dobozos modelltörés kihasználta a hangcsalád elemzésének hibáit, vagy abban, hogy a böngészők hogyan elemzik a visszavágást \. De ezeket a feltöréseket arra használták, hogy megoldják azt a különbséget, hogy az Internet Explorer 5.5 hogyan kezelte a dobozmodellt és hogyan Netscape értelmezte, és semmi köze a családi hangstílushoz. Szerencsére ez a két elavult böngésző azok, amelyekkel manapság nem kell foglalkoznunk.
A szállító előtag nem feltörés, mert lehetővé teszi, hogy a specifikáció szabályokat állítson fel a tulajdonság megvalósításának módjára, ugyanakkor lehetővé teszi a böngészőgyártók számára, hogy egy tulajdonságot más módon valósítsanak meg, anélkül, hogy mindent megtörnének más. Továbbá ezek az előtagok olyan CSS tulajdonságokkal működnek, amelyek végül a specifikáció része lesz. Egyszerűen hozzáadunk néhány kódot, hogy korán hozzáférhessünk az ingatlanhoz. Ez egy másik oka annak, hogy a CSS-szabályt megszünteti a normál, előtag nélküli tulajdonsággal. Így a teljes böngésző-támogatás elérése után eldobhatja az előtagolt verziókat.
Szeretné tudni, hogy mi a böngésző támogatása egy bizonyos funkcióhoz? A weboldal CanIUse.com csodálatos erőforrás ezen információk összegyűjtéséhez és annak megismeréséhez, hogy mely böngészők és ezeknek a böngészőknek mely verziói támogatják jelenleg a funkciót.
A szállító előtagjai bosszantóak, de ideiglenesek
Igen, idegesítő és ismétlődő érzés lehet, ha a tulajdonságokat 2–5 alkalommal kell megírnunk, hogy minden böngészőben működjön, de ez átmeneti helyzet. Például néhány évvel ezelőtt, hogy egy kerek sarkot beállítson egy dobozon, meg kell írnia:
-moz-határ-sugár: 10px 5px;
-webkit-border-bal-bal felső sugár: 10px;
-webkit-határ-jobb-felső-sugár: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bal-bal-sugár: 5px;
határ sugara: 10 képpont 5 képpont;
De most, amikor a böngészők teljes mértékben támogatták ezt a funkciót, valójában csak a szabványosított verzióra van szükség:
határ sugara: 10 képpont 5 képpont;
A Chrome az 5.0 verzió óta támogatja a CSS3 tulajdonságot, a Firefox a 4.0, a Safari 5.0, az Opera 10.5, az iOS 4.0 és Android 2.1-ben. Még az Internet Explorer 9 is támogatja előtag nélkül (és az IE 8 vagy régebbi verziók nem támogatták sem vele, sem anélkül előtagok).
Ne feledje, hogy a böngészők mindig változnak, és kreatív megközelítésre lesz szükség a régebbi böngészők támogatásához, hacsak nem tervezi weboldalak építése amelyek évek vannak a legmodernebb módszerek mögött. Végül a böngésző előtagok írása sokkal könnyebb, mint olyan hibák felkutatása és kihasználása, amelyek nagy valószínűséggel kijavításra kerülnek egy jövőbeli verzióban, és megkövetelik, hogy találjon egy másik hibát, amelyet kihasználhatna stb.