Hva er CSS-leverandør eller nettleserprefikser?

CSS-leverandør-prefikser, også noen ganger kjent som CSS-nettleservareprefix, er en måte for nettlesere å legge til støtte for nye CSS-funksjoner før disse funksjonene støttes fullt ut i alle nettlesere. Dette kan gjøres under en slags test- og eksperimentperiode hvor nettleserprodusenten bestemmer nøyaktig hvordan disse nye CSS-funksjonene skal implementeres. Disse prefiksene ble svært populære med oppgangen til CSS3 for noen år siden.

Da CCS3 først ble introdusert, begynte en rekke spennende egenskaper å treffe forskjellige nettlesere på forskjellige tidspunkter. For eksempel var webkit-drevne nettlesere (Safari og Chrome) de første som introduserte noen av egenskapene for animasjonsstil som transformasjon og overgang. Ved å bruke leverandørprefikserte egenskaper, kunne webdesignere bruke de nye funksjonene i sitt arbeid og få dem sett på nettleserne som støttet dem med en gang, i stedet for å måtte vente på alle andre nettleserprodusenter for å fange opp!

Så fra perspektivet til en frontend-webutvikler brukes nettleserprefikser til å legge til nye CSS-funksjoner på et nettsted mens du har komfort og vet at nettleserne vil støtte disse stilene. Dette kan være spesielt nyttig når forskjellige nettleserprodusenter implementerer egenskaper på litt forskjellige måter eller med en annen syntaks.

CSS-nettleserens prefikser som du kan bruke (hver av dem er spesifikke for en annen nettleser) er:

Android:
-webkit-
Chrome:
-webkit-
Firefox:
-moz-
Internet Explorer:
-ms-
iOS:
-webkit-
Opera:
-o-
Safari:
-webkit-

I de fleste tilfeller, for å bruke en helt ny CSS-stilegenskap, tar du standard CSS-egenskapen og legger til prefikset for hver nettleser. De forhåndsdefinerte versjonene vil alltid komme først (i hvilken som helst rekkefølge du foretrekker) mens den vanlige CSS-eiendommen kommer sist. Hvis du for eksempel vil legge til en CSS3-overgang til dokumentet ditt, vil du bruke

overgang

eiendom som vist nedenfor:

-webkit- Overgang: alle 4s enkelhet; -moz- Overgang: alle 4s enkelhet; -ms- Overgang: alle 4s enkelhet; -o- Overgang: alle 4s enkelhet;Overgang: alle 4s enkelhet;

Merk: Husk at noen nettlesere har en annen syntaks for bestemte egenskaper enn andre gjør, så ikke anta at nettleser-prefikset versjon av en egenskap er nøyaktig den samme som standardegenskapen. For eksempel, for å lage en CSS-gradient, bruker du

lineær-gradient
eiendom. Firefox, Opera og moderne versjoner av Chrome og Safari bruker den egenskapen med riktig prefiks, mens tidligere versjoner av Chrome og Safari bruker den prefikserte egenskapen

-webkit-gradient
. Firefox bruker også forskjellige verdier enn standardene.

Årsaken til at du alltid avslutter erklæringen med den vanlige, ikke-forhåndsdefinerte versjonen av CSS-egenskapen, er at når en nettleser støtter regelen, vil den bruke den. Husk hvordan CSS leses. De senere reglene har forrang over tidligere, hvis spesifisiteten er den samme, så en nettleser vil lese leverandørversjonen av en regel og bruke den hvis den ikke støtter den vanlige, men når den gjør det, vil den overstyre leverandørversjonen med den faktiske CSS-regelen.

Leverandørprefikser er ikke en hack

Når leverandør prefikser ble introdusert, lurte mange webprofessorer på om de var en hack eller et skifte tilbake til de mørke dagene for å forkaste en nettsidekode for å støtte forskjellige nettlesere (husk de " Dette nettstedet er best sett i IE "meldinger). CSS-leverandørens prefikser er imidlertid ikke hack, og du bør ikke ha noen forbehold om å bruke dem i arbeidet ditt.

En CSS-hack utnytter feil i implementeringen av et annet element eller en egenskap for å få en annen egenskap til å fungere riktig. Eksempelvis utnyttet hakkmodellen hack feil i parsing av

voice-familien
eller i hvordan nettlesere analyserer tilbakemelding (

). Men disse hackene ble brukt til å løse problemet med forskjellen mellom hvordan Internet Explorer 5.5 håndterte boksemodellen og hvordan Netscape tolket det, og har ingenting å gjøre med stemmefamiliens stil. Heldigvis er disse to utdaterte nettleserne de vi ikke har bekymringer oss selv med disse dager.

Et leverandørpresifikasjon er ikke et hack fordi det tillater at spesifikasjonen oppretter regler for hvordan en eiendom kan implementeres, samtidig som nettleserskaperne kan implementere en eiendom på en annen måte uten å bryte alt annet. Videre arbeider disse prefiksene med CSS egenskaper som Til slutt vil være en del av spesifikasjonen . Vi legger ganske enkelt til litt kode for å få tilgang til eiendommen tidlig. Dette er en annen grunn til at du avslutter CSS-regelen med den normale, ikke-forhåndsdefinerte egenskapen. På den måten kan du slippe prefiksversjonene når full nettleserstøtte er oppnådd.

Vil du vite hva nettleseren støtter for en bestemt funksjon? Nettstedet CanIUse.com er en fantastisk ressurs for å samle denne informasjonen, og fortelle deg hvilke nettlesere, og hvilke versjoner av disse nettleserne som for øyeblikket støtter en funksjon.

Leverandørens prefiks er irriterende men midlertidig

Ja, det kan føle seg irriterende og repeterende å skrive egenskapene 2-5 ganger for å få det til å fungere i alle nettlesere, men det er en midlertidig situasjon. For eksempel, for noen få år siden, for å sette et rundet hjørne på en boks måtte du skrive:

-moz-grense-radius: 10px 5px;-webkit-grense-topp-venstre-radius: 10px;-webkit-grense-topp-høyre-radius: 5px;-webkit-grense-bunn-høyre-radius: 10px;-webkit-grense-bunn-venstre-radius: 5px;border-radius: 10px 5px;
Men nå som nettlesere har kommet for å fullt ut støtte denne funksjonen, trenger du virkelig bare den standardiserte versjonen:

border-radius: 10px 5px;
Chrome har støttet CSS3-egenskapen siden versjon 5.0, Firefox la den i versjon 4.0, Safari la den til i 5.0, Opera i 10.5, iOS i 4.0 og Android i 2.1. Selv Internet Explorer 9 støtter det uten et prefiks (og IE 8 og lavere støttet ikke det med eller uten prefikser).

Husk at nettlesere alltid skal forandre seg, og kreative tilnærminger til å støtte eldre nettlesere vil være påkrevd med mindre du planlegger å bygge websider som er år etter de mest moderne metodene. Til slutt er det mye enklere å skrive nettleserprefikser enn å finne og utnytte feil som mest sannsynlig vil bli løst i en fremtidig versjon, noe som krever at du finner en annen feil å utnytte og så videre.