Kaj so in zakaj bi jih morali uporabljati
Predpone prodajalca CSS, ki so tudi znane kot predpone brskalnika CSS , so način, kako oblikovalci brskalnikov dodajo podporo za nove funkcije CSS, preden so te funkcije v celoti podprti v vseh brskalnikih. To se lahko naredi med obdobjem preizkušanja in eksperimentiranja, pri katerem proizvajalec brskalnika natančno določi, kako bodo te nove funkcije CSS izvedene. Te predpone je postalo zelo priljubljeno pri vzponu CSS3 pred nekaj leti.
Ko je bila CCS3 prvič uvedena, so številne vznemirljive lastnosti začele udariti različne brskalnike ob različnih časih. Na primer, spletni brskalniki (Safari in Chrome) so bili prvi, ki so uvedli nekatere lastnosti sloga animacije, kot sta preoblikovanje in prehod. Z uporabo prodajnih predponiranih lastnosti so spletni oblikovalci lahko uporabili te nove funkcije v svojem delu in jih videli v brskalnikih, ki so jih takoj podprli, namesto da bi morali počakati, da bi vsak drugi proizvajalec brskalnika dohitel!
Torej, z vidika spletnega razvijalca na čelu, se predpone brskalnika uporabljajo za dodajanje novih funkcij CSS na spletno mesto, medtem ko imajo udobje vedoč, da bodo brskalniki podpirali te sloge. To je lahko še posebej koristno, če različni proizvajalci brskalnika izvajajo lastnosti na nekoliko drugačen način ali z drugo sintakso.
Predpono brskalnika CSS, ki jo lahko uporabite (vsaka od njih je specifična za drug brskalnik), so:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
V večini primerov, če želite uporabiti čisto novo lastnost sloga CSS, uporabite standardno lastnost CSS in dodajte predpono za vsak brskalnik. Prednastavljene različice bodo vedno na prvem mestu (v poljubnem vrstnem redu), medtem ko bo običajna lastnost CSS prišla zadnji. Če na primer želite dodati prehod CSS3 v svoj dokument, bi uporabili lastnost prehoda, kot je prikazano spodaj:
-webkit- prehod: vse 4s enostavnost;
-moz- prehod: vse 4s enostavnost;
-ms- prehod: vse 4s enostavnost;
- - prehod: vse 4s enostavnost;
prehod: vse 4s enostavnost;
Opomba: Ne pozabite, da imajo nekateri brskalniki drugačno sintakso za nekatere lastnosti, kot drugi, zato ne predpostavljajte, da je prednastavljena lastnost brskalnika popolnoma enaka kot standardna lastnost. Na primer, če želite ustvariti gradnik CSS , uporabljate lastnost linearnega gradienta. Firefox, Opera in novejše različice brskalnika Chrome in Safari uporabljajo to lastnost z ustrezno predpono, medtem ko zgodnje različice Chroma in Safari uporabljajo predpono lastnosti -webkit-gradient. Firefox uporablja tudi različne vrednosti kot standardne.
Razlog, da vedno deklarirate svojo izjavo z običajno nediferencirano različico lastnosti CSS, je tak, da ko brskalnik podpira pravilo, bo to uporabil. Zapomni si, kako se brati CSS. Kasnejša pravila imajo prednost pred prejšnjimi, če je specifičnost enaka, zato bo brskalnik prebral verzijo pravilnika za pravilo in uporabil, če ne podpira običajnega, vendar bo, ko bo to storil, preglasil različico prodajalca z dejansko pravilo CSS.
Prefiksi prodajalca niso Hack
Ko so bili predponi prodajalcev prvič uvedeni, se je veliko spletnih strokovnjakov spraševalo, ali gre za kramljanje ali premik nazaj v temne dneve, ko so kdo odprli spletno kodo za podporo različnim brskalnikom (upoštevajte, da je to spletno mesto najbolje videti v IE- jih). Predpone prodajalcev CSS niso hacks, zato ne bi smeli imeti nobenih pridržkov glede uporabe v vašem delu.
CSS kramp izkorišča pomanjkljivosti pri izvajanju drugega elementa ali znamke, da bi dobili drugo znamko za pravilno delovanje. Na primer, kašelj modela okvira izkoriščajo pomanjkljivosti pri razčlenjevanju lastnine glasu ali v brskalnikih, ki razčlenjejo poševnice (\). Toda ti hacks so bili uporabljeni, da bi odpravili težavo razlike med tem, kako je Internet Explorer 5.5 obravnaval model škatle in kako ga je Netscape razlagal in da nimajo nič skupnega z glasovnim slogom družine. K sreči sta ta dva zastarela brskalnika tista, s katero se nismo skrbeli s temi dnevi.
Predpono prodajalca ni vdolbina, ker omogoča specifikaciji, da nastavi pravila o načinu izvajanja lastnine, hkrati pa omogoča izdelovalce brskalnikov, da izvajajo lastnost na drugačen način, ne da bi zlomili vse drugo. Poleg tega ti predponi delujejo s CSS lastnostmi, ki bodo sčasoma del specifikacije . Za preprost dostop do premoženja preprosto dodamo nekaj kode. To je še en razlog, zakaj pravilo CSS končate z običajno, nepredstavljeno lastnostjo. Na ta način lahko prepustite predpono, ko je dosežena popolna podpora za brskalnik.
Želite vedeti, kaj podpira brskalnik za določeno funkcijo? Spletna stran CanIUse.com je čudovit vir za zbiranje teh informacij in vam omogoča, da veste, kateri brskalniki in katere različice teh brskalnikov trenutno podpirajo funkcijo.
Prodajni predponi so nadležni, a začasni
Da, morda se počutite nadležno in ponavljajoče se moraš napisati lastnosti 2-5 krat, da bi lahko delal v vseh brskalnikih, vendar je to začasna situacija. Na primer, pred nekaj leti, da nastavite zaokrožen vogal na škatli, ki ste jo morali napisati:
-moz-meja-polmer: 10px 5px;
-webkit-border-top-left-polmer: 10px;
-webkit-border-top-right-polmer: 5px;
-webkit-meja-spodaj-desni-polmer: 10px;
-webkit-meja-spodaj-levi-polmer: 5px;
border-radius: 10px 5px;
Toda zdaj, ko so brskalniki popolnoma podprli to funkcijo, potrebujete samo standardizirano različico:
border-radius: 10px 5px;
Chrome je podprl lastnost CSS3 od različice 5.0, Firefox je dodal v različico 4.0, Safari je dodal v 5.0, Opera v 10.5, iOS v 4.0 in Android v 2.1. Celo Internet Explorer 9 ga podpira brez predpone (IE 8 in ni podpiral s predponami ali brez njih).
Ne pozabite, da bodo brskalniki vedno spreminjali in ustvarjalni pristopi k podpiranju starejših brskalnikov bodo potrebni, razen če načrtujete gradnjo spletnih strani, ki so leta za najbolj sodobnimi metodami. Na koncu je pisanje prefiksov brskalnika veliko lažje kot iskanje in izkoriščanje napak, ki bodo najverjetneje določene v prihodnji različici, ki zahtevajo, da najdete drugo napako za izkoriščanje in tako naprej.