Hvad er CSS-leverandør eller browserpræfikser?

CSS-leverandørpræfikser, også nogle gange kendt som eller CSS-browseren, er en måde, hvorpå browsere kan tilføje støtte til nye CSS-funktioner, før disse funktioner understøttes fuldt ud i alle browsere. Dette kan ske under en slags test- og eksperimentperiode, hvor browserproducenten bestemmer præcis, hvordan disse nye CSS-funktioner vil blive implementeret. Disse præfikser blev meget populære med stigningen af CSS3 for nogle få år siden.

Da CCS3 først blev introduceret, begyndte en række spændte egenskaber at ramme forskellige browsere på forskellige tidspunkter. For eksempel var webkit-drevne browsere (Safari og Chrome) de første til at introducere nogle af animationstypegenskaberne som transformation og overgang. Ved at bruge sælgerpræfikserede egenskaber kunne webdesignere bruge disse nye funktioner i deres arbejde og få dem til at ses på de browsere, der understøttede dem med det samme, i stedet for at vente på, at alle andre browserproducenter skal indhente!

Så fra perspektivet af en front-end webudvikler bruges browserpræfikser til at tilføre nye CSS-funktioner på et websted, samtidig med at de har det godt at vide, at browserne vil understøtte disse stilarter. Dette kan være særligt nyttigt, når forskellige browserproducenter implementerer egenskaber på lidt forskellige måder eller med en anden syntaks.

CSS-browseren præfikser, som du kan bruge (hver af dem er specifikke for en anden browser) er:

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

I de fleste tilfælde skal du bruge standard CSS-egenskaben til at bruge en helt ny CSS-stilegenskab og tilføje præfikset for hver browser. De præfiksetede versioner vil altid komme først (i hvilken som helst rækkefølge du foretrækker), mens den normale CSS-egenskab kommer sidst. Hvis du f.eks. Vil tilføje en CSS3-overgang til dit dokument, vil du bruge

overgang

ejendom som vist nedenfor:

-webkit- overgang: alle 4s let; -moz- overgang: alle 4s let; -Frk- overgang: alle 4s let; -o- overgang: alle 4s let;overgang: alle 4s let;

Bemærk: Husk, at nogle browsere har en anden syntaks for bestemte egenskaber, end andre gør, så tag ikke udgangspunkt i, at browseren-præfikset version af en ejendom er nøjagtig den samme som standardegenskaben. Hvis du f.eks. Vil oprette en CSS-gradient, bruger du

lineær-gradient
ejendom. Firefox, Opera og moderne versioner af Chrome og Safari bruger den egenskab med det relevante præfiks, mens de tidlige versioner af Chrome og Safari bruger den præfiksete egenskab

-webkit-gradient
. Firefox bruger også forskellige værdier end standarderne.

Grunden til, at du altid afslutter din erklæring med den normale, ikke-præfikserede version af CSS-egenskaben, er, at når en browser understøtter reglen, vil den bruge den. Husk, hvordan CSS er læst. De senere regler har forrang i forhold til tidligere, hvis specificiteten er den samme, så en browser ville læse leverandørversionen af en regel og bruge den, hvis den ikke understøtter den normale, men når den gør det, vil den tilsidesætte leverandørversionen med den faktiske CSS regel.

Leverandørpræfikser er ikke en hack

Når sælgerpræfikser blev introduceret, spurgte mange webprofessorer, om de var et hack eller et skift tilbage til de mørke dage, hvor de forkaster en websteds kode til at understøtte forskellige browsere (husk dem " Dette websted ses bedst i IE "meddelelser). CSS-leverandørens præfikser er dog ikke hackere, og du bør ikke have nogen forbehold for at bruge dem i dit arbejde.

En CSS hack udnytter mangler i implementeringen af et andet element eller ejendom for at få en anden ejendom til at fungere korrekt. Eksempelvis udnyttede boxmodellen hack fejl i parsningen af

voice-familie
eller i hvordan browsere analyserer backslashes (

). Men disse hackere blev brugt til at løse problemet med forskellen mellem, hvordan Internet Explorer 5.5 håndterede boksemodellen og hvordan Netscape fortolker det og har intet at gøre med lydfamiliestilen. Heldigvis er disse to forældede browsere dem, vi ikke har bekymringer os selv i disse dage.

Et leverandørpræfiks er ikke et hack, fordi det giver specifikationen mulighed for at oprette regler for, hvordan en ejendom kan implementeres, samtidig med at browserproducenterne kan implementere en ejendom på en anden måde uden at bryde alt andet. Desuden arbejder disse præfikser med CSS-egenskaber, som vil i sidste ende være en del af specifikationen . Vi tilføjer blot nogle kode for at få adgang til ejendommen tidligt. Dette er en anden grund til, at du afslutter CSS-reglen med den normale, ikke-præfikset ejendom. På den måde kan du droppe de præfikserede versioner, når fuld understøttelse af browseren er opnået.

Vil du vide, hvad browseren understøtter for en bestemt funktion? Webstedet CanIUse.com er en vidunderlig ressource til at indhente disse oplysninger og lade dig vide, hvilke browsere, og hvilke versioner af disse browsere der for øjeblikket understøtter en funktion.

Leverandørens præfikser er irriterende men midlertidige

Ja, det kan føle sig irriterende og repeterende at skulle skrive egenskaberne 2-5 gange for at få det til at fungere i alle browsere, men det er en midlertidig situation. For eksempel for blot nogle få år siden, for at sætte et afrundet hjørne på en kasse måtte du skrive:

-moz-grænse-radius: 10px 5px;-webkit-grænse-top-venstre-radius: 10px;-webkit-grænse-top-højre-radius: 5px;-webkit-grænse-bund-højre-radius: 10px;-webkit-grænse-bund-venstre-radius: 5px;grænse-radius: 10px 5px;
Men nu er browsere kommet for at understøtte denne funktion fuldt ud, du behøver kun den standardiserede version:

grænse-radius: 10px 5px;
Chrome har understøttet CSS3-ejendommen siden version 5.0, Firefox tilføjede det i version 4.0, Safari tilføjede det i 5.0, Opera i 10.5, iOS i 4.0 og Android i 2.1. Selv Internet Explorer 9 understøtter det uden et præfiks (og IE 8 og lavere understøtter det ikke med eller uden præfikser).

Husk at browsere altid vil ændre sig og kreative metoder til at understøtte ældre browsere vil blive påkrævet, medmindre du planlægger at opbygge websider, der er år efter de mest moderne metoder. I sidste ende er det meget nemmere at skrive browser præfikser end at finde og udnytte fejl, der sandsynligvis vil blive rettet i en fremtidig version, hvilket kræver, at du finder en anden fejl at udnytte og så videre.