Kaj so predpone za ponudnike ali brskalnike CSS?

Predpone prodajalcev CSS, včasih znane tudi kot ali CSS predpone brskalnika so način, s katerim izdelovalci brskalnikov dodajo podporo nove funkcije CSS preden so te funkcije v celoti podprte v vseh brskalnikih. To lahko storite med nekakšnim obdobjem testiranja in preizkušanja, ko proizvajalec brskalnika natančno določa, kako bodo te nove funkcije CSS uporabljene. Te predpone so postale zelo priljubljene z vzponom leta CSS3 pred nekaj leti.

Izvor predpone prodajalcev

Ko je bil CCS3 prvič predstavljen, so številne vznemirjene lastnosti začele v različnih obdobjih dosegati različne brskalnike. Na primer, brskalniki, ki jih poganja Webkit (Safari in Chrome), so prvi uvedli nekatere lastnosti sloga animacije, kot sta preoblikovanje in prehod. Z uporabo predpona prodajalca lastnosti, spletni oblikovalci so lahko te nove funkcije uporabili pri svojem delu in jih videli v brskalnikih ki so jih takoj podprli, namesto da bi morali čakati, da jih ujamejo vsi drugi proizvajalci brskalnikov gor!

Pogoste predpone

Torej, z vidika spletnega razvijalca, se predpone brskalnika uporabljajo za dodajanje novih funkcij CSS na spletno mesto, pri čemer se udobno zavedajo, da brskalniki podpirajo te sloge. To je lahko še posebej koristno, če različni proizvajalci brskalnikov implementirajo lastnosti na nekoliko drugačne načine ali z drugačno sintakso.

Predpone pred brskalnikom CSS, ki jih lahko uporabite (vsaka je specifična za drug brskalnik), so:

• Android:

  -webkit-

• Chrome:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -gospa-

• iOS:

  -webkit-

• Opera:

  -o-

• Safari:

  -webkit-

Dodajanje predpone

V večini primerov za uporabo povsem nove lastnosti sloga CSS vzamete standardno lastnost CSS in dodate predpono za vsak brskalnik. Prednastavljene različice bi bile vedno na prvem mestu (v poljubnem vrstnem redu), medtem ko bo običajna lastnost CSS zadnja. Če želite na primer dokumentu dodati prehod CSS3, uporabite lastnost prehoda, kot je prikazano spodaj:

-webkit-prehod: vse 4-je enostavnost;
-moz-prehod: vse 4-je enostavnost;
-ms-prehod: vse 4-je enostavnost;
-o-prehod: vse 4-je enostavnost;
prehod: vse 4-je enostavnost; 

Ne pozabite, da imajo nekateri brskalniki za nekatere lastnosti drugačno sintakso kot drugi, zato ne domnevajte, da je različica lastnosti s predpono brskalnika popolnoma enaka standardni lastnosti. Če želite na primer ustvariti gradient CSS, uporabite lastnost linearnega gradienta. Firefox, Opera in sodobne različice brskalnikov Chrome in Safari uporabljajo to lastnost z ustrezno predpono, medtem ko zgodnje različice brskalnikov Chrome in Safari uporabljajo predpono lastnosti -webkit-gradient.

Firefox uporablja tudi drugačne vrednosti kot običajne.

Razlog, da svojo izjavo vedno končate z običajno različico lastnosti CSS, ki nima predpone, je ta, da bo brskalnik, ko pravilo podpira pravilo, uporabil to. Ne pozabite, kako se bere CSS. Kasnejša pravila imajo prednost pred prejšnjimi, če je specifičnost enaka, zato brskalnik prebere različico ponudnika pravilo in uporabite, če ne podpira običajnega, ko pa bo, bo razveljavil različico prodajalca z dejanskim CSS pravilo.

Predpone prodajalcev niso kramp

Ko so bile predpone prodajalcev prvič predstavljene, so se mnogi spletni strokovnjaki spraševali, ali gre za kramp ali premaknite se nazaj v temne čase oblikovanja kode spletnega mesta za podporo različnih brskalnikov (ne pozabite "To spletno mesto je najbolje videti v IE"sporočilo). Predpone prodajalcev CSS niso vdori, vendar ne bi smeli imeti pridržkov glede njihove uporabe pri svojem delu.

Vdih CSS izkorišča napake pri izvedbi drugega elementa ali lastnosti, da bi druga lastnost delovala pravilno. Na primer, model box box je izkoriščal napake pri razčlenjevanju glasovne družine ali pri tem, kako brskalniki razčlenijo poševnice \. Toda ti vdori so bili uporabljeni za odpravo težave med tem, kako je Internet Explorer 5.5 obnašal model škatle in kako Netscape razložili in nimajo nič skupnega z glasovnim družinskim slogom. Na srečo sta ta dva zastarela brskalnika tista, s katerimi se danes ne bi morali ukvarjati.

Predpona prodajalca ni kramp, ker omogoča specifikaciji, da nastavi pravila za izvedbo lastnosti, hkrati pa proizvajalcem brskalnikov omogoča, da lastnost uvedejo na drugačen način, ne da bi vse zlomili drugače. Poleg tega te predpone delujejo z lastnostmi CSS, ki bo sčasoma del specifikacije. Preprosto dodajamo nekaj kode, da bi imeli zgoden dostop do nepremičnine. To je še en razlog, zakaj pravilo CSS končate z običajno lastnostjo, ki nima predpone. Na ta način lahko spustite prednastavljene različice, ko dobite popolno podporo brskalnika.

Predpone prodajalcev so moteče, a začasne

Da, morda bi se vam zdelo nadležno in ponavljajoče se, če bi morali lastnosti zapisati 2–5-krat, da bo lahko deloval v vseh brskalnikih, vendar je to začasna situacija. Na primer, pred nekaj leti, da ste na polje postavili zaobljen vogal, morate napisati:

-moz-polmer-meje: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-zgoraj-desno-polmer: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
polmer obrobe: 10px 5px; 

Toda zdaj, ko brskalniki v celoti podpirajo to funkcijo, potrebujete res samo standardizirano različico:

polmer obrobe: 10px 5px; 

Chrome lastnost CSS3 podpira od različice 5.0, Firefox jo je dodal v različici 4.0, Safari jo je dodal v 5.0, Opera v 10.5, iOS v 4.0 in Android v 2.1. Tudi Internet Explorer 9 ga podpira brez predpone (in IE 8 in starejše različice niso podpirali z ali brez predpone).

Ne pozabite, da se bodo brskalniki vedno spreminjali, zato bodo potrebni kreativni pristopi za podporo starejšim brskalnikom, razen če načrtujete gradnja spletnih strani ki zaostajajo leta za najsodobnejšimi metodami. Na koncu je pisanje predpone brskalnika veliko lažje kot iskanje in izkoriščanje napak, ki bodo najverjetneje odpravljene v prihodnji različici, pri čemer bo treba najti še eno napako za izkoriščanje itd.