Hva er prefiks for CSS-leverandør eller nettleser?

CSS-leverandørprefikser, også noen ganger kjent som eller CSS nettleserprefikser, er en måte for nettleserprodusenter å legge til støtte for nye CSS-funksjoner før disse funksjonene støttes fullt ut i alle nettlesere. Dette kan gjøres i løpet av en slags test- og eksperimentperiode der nettleserprodusenten bestemmer nøyaktig hvordan disse nye CSS-funksjonene skal implementeres. Disse prefiksene ble veldig populære med oppgangen til CSS3 for noen år siden.

Opprinnelse til leverandørprefikser

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

Vanlige prefikser

Så fra perspektivet til en frontend-webutvikler, blir nettleserprefikser brukt til å legge til nye CSS-funksjoner på et nettsted, samtidig som det er komfortabelt å vite at nettleserne støtter 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-nettleserprefikset du kan bruke (som hver er spesifikk for en annen nettleser) er:

• Android:

  -webkit-

• Chrome:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -ms-

• iOS:

  -webkit-

• Opera:

  -o-

• Safari:

  -webkit-

Legge til et prefiks

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

-webkit-overgang: alle 4s lette;
-moz-overgang: alle 4s lette;
-ms-overgang: alle 4s lette;
-o-overgang: alle 4s lette;
overgang: alle 4s lette; 

Husk at noen nettlesere har en annen syntaks for visse egenskaper enn andre, så ikke anta at den nettleserprefikste versjonen av en eiendom er nøyaktig den samme som standardegenskapen. For eksempel, for å opprette en CSS-gradient, bruker du den lineære gradientegenskapen. Firefox, Opera og moderne versjoner av Chrome og Safari bruker den egenskapen med riktig prefiks mens tidlige versjoner av Chrome og Safari bruker den prefiksede egenskapen -webkit-gradient.

Firefox bruker også andre verdier enn standardverdiene.

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

Leverandørprefikser er ikke en hacking

Da leverandørprefikser først ble introdusert, lurte mange på nettet på om det var et hack eller et skift tilbake til de mørke dagene med å forfalske et nettsteds kode for å støtte forskjellige nettlesere (husk det "Dette nettstedet vises best i IE" beskjed). CSS-leverandørers prefikser er imidlertid ikke hack, og du bør ikke ha noen forbehold om å bruke dem i arbeidet ditt.

Et CSS-hack utnytter feil ved implementeringen av et annet element eller en annen eiendom for å få en annen eiendom til å fungere riktig. For eksempel utnyttet boksmodellhacket feil i analysen av stemmefamilien eller i hvordan nettlesere analyserer tilbakeslag. Men disse hackene ble brukt til å løse problemet med forskjellen mellom hvordan Internet Explorer 5.5 håndterte boksmodellen og hvordan Netscape tolket det, og har ingenting å gjøre med stemmefamilien. Heldigvis er disse to utdaterte nettleserne de vi ikke trenger å bekymre oss for i disse dager.

Et leverandørprefiks er ikke et hack fordi det lar spesifikasjonen sette opp regler for hvordan en eiendom kan implementeres, samtidig som nettleserprodusenter kan implementere en eiendom på en annen måte uten å bryte alt ellers. Videre jobber disse prefiksene med CSS-egenskaper som vil etter hvert 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-prefikset egenskapen. På den måten kan du slippe de prefiksede versjonene når full nettleserstøtte er oppnådd.

Leverandørprefikser er irriterende, men midlertidige

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

-moz-border-radius: 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;
border-radius: 10px 5px; 

Men nå som nettlesere har støttet denne funksjonen fullt ut, trenger du egentlig bare den standardiserte versjonen:

border-radius: 10px 5px; 

Chrome har støttet CSS3-egenskapen siden versjon 5.0, Firefox la den til 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 det ikke med eller uten prefikser).

Husk at nettlesere alltid vil være i endring, og kreative tilnærminger til å støtte eldre nettlesere vil være nødvendig med mindre du planlegger å gjøre det bygge nettsider som er år bak de mest moderne metodene. Til slutt er det mye lettere å 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.