Milyenek a CSS-szállító vagy a böngésző előtagjai?

A CSS szállító előtagjai, amelyek néha más néven is ismertek, vagy a CSS böngésző előtagjai, 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 Webkit-alapú böngészők (Safari és Chrome) voltak az elsőek, amelyek bemutatják az animáció-jellegű tulajdonságokat, mint a transzformáció és az átmenet. 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-
Króm:
-webkit-
Firefox:
-moz-
Internet böngésző:
-Kisasszony-
iOS:
-webkit-
Opera:
-o-
Szafari:
-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 jönnek (tetszőleges sorrendben), míg a normál CSS-tulajdonság az utolsó. Például, ha CSS3 átmenetet szeretne hozzáadni a dokumentumhoz, akkor a

átmenet

az alábbiak szerint:

-webkit- átmenet: mind a 4s egyszerű; -moz- átmenet: mind a 4s egyszerű; -Kisasszony- átmenet: mind a 4s egyszerű; -o- átmenet: mind a 4s egyszerű;átmenet: mind a 4s egyszerű;

Jegyzet: 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 egy CSS gradiens létrehozásához használja a

lineáris-gradiens
ingatlan. A Chrome és a Safari Firefox, Opera és korszerű verziói ezt a tulajdonságot a megfelelő előtaggal használják, míg a Chrome és a Safari korai verziói a prefixált tulajdonságot használják

-webkit-gradiens
. 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 a szállító előtagokat először vezették be, sok internetes szakember arra számított, vajon hack vagy váltás a sötét napokra, amikor egy weboldal kódját megkerülik, hogy támogassák a különböző böngészőket (emlékezzenek ezekre a " Ez az oldal a legjobban az IE-ben tekinthető meg "üzenetek.) A CSS-értékesítők előtagjai azonban nem hackek, és nem szabad, hogy fenntartsa őket a munkájuk során.

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 hibák elemzését

hang-család
vagy hogy a böngészők hogyan értelmezik a visszafordulókat (

). 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 végül a specifikáció része lesz . 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.