Vad är prefix för CSS-leverantör eller webbläsare?

CSS-leverantörsprefix, även ibland känd som eller CSS webbläsarprefix, är ett sätt för webbläsartillverkare att lägga till stöd för nya CSS-funktioner innan dessa funktioner stöds fullt ut i alla webbläsare. Detta kan göras under en typ av test- och experimentperiod där webbläsartillverkaren bestämmer exakt hur dessa nya CSS-funktioner ska implementeras. Dessa prefix blev mycket populära med uppkomsten av CSS3 några år sedan.

Ursprung av leverantörsprefix

När CCS3 introducerades började ett antal glada egenskaper drabbas av olika webbläsare vid olika tidpunkter. Till exempel var de webkit-drivna webbläsarna (Safari och Chrome) de första som introducerade några av de animerade egenskaper som transformering och övergång. Genom att använda leverantörsprefix egenskaperkunde webbdesigners använda de nya funktionerna i sitt arbete och se dem i webbläsarna som stöttade dem direkt, istället för att behöva vänta på att alla andra webbläsartillverkare ska fånga upp!

Vanliga prefix

Så ur perspektivet från en front-end webbutvecklare används webbläsarprefix för att lägga till nya CSS-funktioner på en webbplats samtidigt som de har komfort att veta att webbläsarna stöder dessa stilar. Detta kan vara särskilt användbart när olika webbläsartillverkare implementerar egenskaper på lite olika sätt eller med en annan syntax.

CSS-webbläsarprefixen som du kan använda (var och en är specifik för en annan webbläsare) är:

• Android:

  -webkit-

• Krom:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -Fröken-

• iOS:

  -webkit-

• Opera:

  -o-

• Safari:

  -webkit-

Lägga till ett prefix

För att använda en helt ny CSS-stilegenskap tar du i de flesta fall standard CSS-egenskapen och lägger till prefixet för varje webbläsare. De prefixade versionerna kommer alltid först (i vilken ordning du helst föredrar) medan den normala CSS-egenskapen kommer sist. Om du till exempel vill lägga till en CSS3-övergång till ditt dokument, använder du övergångsegenskapen enligt nedan:

-webkit-övergång: alla 4s lätthet;
-moz-övergång: alla 4s lätthet;
-ms-övergång: alla 4s lätthet;
-o-övergång: alla 4s lätthet;
övergång: alla 4s lätthet; 

Kom ihåg att vissa webbläsare har en annan syntax för vissa egenskaper än andra, så antag inte att den webbläsarpreciperade versionen av en egendom är exakt densamma som standardegenskapen. För att till exempel skapa en CSS-gradient använder du linjär-gradientegenskapen. Firefox, Opera och moderna versioner av Chrome och Safari använder den egenskapen med lämpligt prefix medan tidiga versioner av Chrome och Safari använder den prefixade egenskapen -webkit-gradient.

Firefox använder också andra värden än standardvärdena.

Anledningen till att du alltid avslutar din deklaration med den normala, icke-prefixversionen av CSS-egenskapen är att när en webbläsare stöder regeln kommer den att använda den. Kom ihåg hur CSS läses. De senare reglerna har företräde framför tidigare om specificiteten är densamma, så en webbläsare skulle läsa leverantörsversionen av en regel och använd det om det inte stöder det vanliga, men när det väl gör det, kommer det att åsidosätta leverantörsversionen med den faktiska CSS regel.

Leverantörsprefix är inte ett hack

När leverantörsprefix först introducerades undrade många webbproffs om det var ett hack eller ett flytta tillbaka till de mörka dagarna med att förfalska en webbplats kod för att stödja olika webbläsare (kom ihåg det "Denna webbplats visas bäst i IE"meddelande). CSS-leverantörers prefix är dock inte hack, och du bör inte ha några reservationer om att använda dem i ditt arbete.

Ett CSS-hack utnyttjar brister i implementeringen av ett annat element eller en egendom för att få en annan egendom att fungera korrekt. Boxmodellhack utnyttjade till exempel brister i analysen av röstfamiljen eller i hur webbläsare analyserar bakåtstreck \. Men dessa hack användes för att lösa problemet med skillnaden mellan hur Internet Explorer 5.5 hanterade boxmodellen och hur Netscape tolkade det och har inget att göra med röstfamiljens stil. Tack och lov är dessa två föråldrade webbläsare sådana vi inte behöver bry oss om idag.

Ett leverantörsprefix är inte ett hack eftersom det tillåter specifikationen att ställa in regler för hur en fastighet kan implementeras, samtidigt som webbläsartillverkare kan implementera en fastighet på ett annat sätt utan att bryta allt annan. Dessutom arbetar dessa prefix med CSS-egenskaper som kommer så småningom att vara en del av specifikationen. Vi lägger helt enkelt till lite kod för att få tillgång till fastigheten tidigt. Detta är en annan anledning till att du avslutar CSS-regeln med den normala, ej prefixade egenskapen. På så sätt kan du släppa de prefixade versionerna när full webbläsarstöd uppnås.

Leverantörsprefix är irriterande men tillfälliga

Ja, det kan kännas irriterande och repetitivt att behöva skriva egenskaperna 2-5 gånger för att få det att fungera i alla webbläsare, men det är en tillfällig situation. Till exempel, för bara några år sedan, för att sätta ett rundat hörn på en låda som du var tvungen att skriva:

-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;
gränsradie: 10px 5px; 

Men nu när webbläsare har kommit att helt stödja den här funktionen behöver du egentligen bara den standardiserade versionen:

gränsradie: 10px 5px; 

Chrome har stött CSS3-egenskapen sedan version 5.0, Firefox lade till den i version 4.0, Safari lade till den i 5.0, Opera i 10.5, iOS i 4.0 och Android i 2.1. Även Internet Explorer 9 stöder det utan ett prefix (och IE 8 och lägre stödde det inte med eller utan prefix).

Kom ihåg att webbläsare alltid kommer att förändras och kreativa metoder för att stödja äldre webbläsare krävs om du inte planerar att göra det bygga webbsidor som ligger år efter de modernaste metoderna. I slutändan är det mycket lättare att skriva webbläsarprefix än att hitta och utnyttja fel som sannolikt kommer att fixas i en framtida version, vilket kräver att du hittar ett annat fel att utnyttja och så vidare.