Vad är CSS-leverantör eller webbläsarprefix?

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

När CCS3 först introducerades började ett antal upphetsade egenskaper träffa olika webbläsare vid olika tidpunkter. Webkit-drivna webbläsare (Safari och Chrome) var till exempel de första som introducerade några av egenskaperna för animationsstil som transformation och övergång. Genom att använda säljarens prefixade egenskaper kunde webdesigners använda de nya funktionerna i sitt arbete och få dem att ses på webbläsare som stöttade dem genast, i stället för att behöva vänta på att alla andra webbläsare ska komma ikapp!

Så ur perspektivet av en frontwebbenutvecklare används webbläsarprefixar för att lägga till nya CSS-funktioner på en webbplats samtidigt som det är bekvämt att webbläsarna stöder dessa stilar. Detta kan vara särskilt användbart när olika webbläsare tillverkar egenskaper på något annorlunda sätt eller med en annan syntax.

CSS-webbläsarens prefix 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-

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

övergång

egendom som visas nedan:

-webkit- övergång: alla 4 s enkelhet; -moz- övergång: alla 4 s enkelhet; -Fröken- övergång: alla 4 s enkelhet; -o- övergång: alla 4 s enkelhet;övergång: alla 4 s enkelhet;

Notera: Kom ihåg att vissa webbläsare har en annan syntax för vissa egenskaper än andra gör, så antar inte att webbläsarens prefixade version av en egenskap är exakt densamma som standardegenskapen. Om du till exempel vill skapa en CSS-gradient använder du

linjär-gradient
fast egendom. 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
. Dessutom använder Firefox olika värden än de standardiserade.

Anledningen till att du alltid avslutar din deklaration med den vanliga, icke-prefixade versionen av CSS-egenskapen är så att den när en webbläsare stöder regeln använder 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ända den om den inte stöder den vanliga, men när den gör det kommer den att överstyra leverantörsversionen med den faktiska CSS-regeln.

Leverantörs prefix är inte en hacka

När leverantörs prefix introducerades först undrade många webbprofessorer om de var ett hack eller ett skifte tillbaka till de mörka dagarna av att förkroka en webbplats kod för att stödja olika webbläsare (kom ihåg de " Den här webbplatsen ses bäst i IE "meddelanden). CSS-leverantörs prefix är dock inte hack, och du borde inte ha några reservationer om hur du använder dem i ditt arbete.

Ett CSS-hack utnyttjar brister i genomförandet av ett annat element eller egendom för att få en annan egenskap för att fungera korrekt. Exempelvis utnyttjade boxmodellhacket brister i analyseringen av

voice-familjen
eller hur webbläsare analyserar backslashes (

). Men dessa hackar användes för att lösa problemet med skillnaden mellan hur Internet Explorer 5.5 hanterade boxmodellen och hur Netscape tolkade den och har ingenting att göra med röstfamiljsstilen. Lyckligtvis är dessa två föråldrade webbläsare sådana vi inte har bekymmer oss själva med dessa dagar.

Ett leverantörs prefix är inte ett hack eftersom det gör att specifikationen kan ställa in regler för hur en egendom kan implementeras, samtidigt som webbläsare gör det möjligt att implementera en egendom på ett annat sätt utan att bryta allt annat. Dessutom arbetar dessa prefix med CSS egenskaper som kommer så småningom att vara en del av specifikationen . Vi lägger helt enkelt till en 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 fullstöd av webbläsare har uppnåtts.

Vill du veta vad webbläsarens support för en viss funktion är? Webbplatsen CanIUse.com är en underbar resurs för att samla denna information och låta dig veta vilka webbläsare, och vilka versioner av dessa webbläsare som för närvarande stöder en funktion.

Leverantörs prefix är irriterande men tillfälligt

Ja, det kan vara irriterande och repetitivt att 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, var du tvungen att skriva:

-moz-gränsen-radie: 10px 5px;-webkit-gränsen-övre-vänstra radien: 10px;-webkit-gräns-topp-högra radie: 5px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 5px;gränsstråle: 10px 5px;
Men nu har webbläsare kommit för att fullt ut stödja den här funktionen, du behöver verkligen bara den standardiserade versionen:

gränsstråle: 10px 5px;
Chrome har stödt CSS3-egenskapen sedan version 5.0, Firefox lade till det i version 4.0, Safari lade till 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 Lower stödde inte det 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 kommer att krävas om du inte planerar att bygga webbsidor som är år efter de modernaste metoderna. I slutändan är det mycket lättare att skriva webbläsarprefixar än att hitta och utnyttja fel som sannolikt kommer att lösas i en framtida version, vilket kräver att du hittar ett annat fel att utnyttja och så vidare.