CSS-leverandørpræfikser, også undertiden kendt som eller CSS browserpræfikser, er en måde for browserproducenter at tilføje support til nye CSS-funktioner før disse funktioner understøttes fuldt ud i alle browsere. Dette kan gøres i løbet af en slags test- og eksperimentperiode, hvor browserproducenten bestemmer nøjagtigt, hvordan disse nye CSS-funktioner skal implementeres. Disse præfikser blev meget populære med fremkomsten af CSS3 et par år siden.
Oprindelser af leverandørpræfikser
Da CCS3 først blev introduceret, begyndte en række ophidsede egenskaber at ramme forskellige browsere på forskellige tidspunkter. For eksempel var de webkit-drevne browsere (Safari og Chrome) de første, der introducerede nogle af de animationsegenskaber som transformation og overgang. Ved at bruge leverandørpræfikset ejendommekunne webdesignere bruge disse nye funktioner i deres arbejde og få dem set i browserne der understøttede dem med det samme i stedet for at skulle vente på, at enhver anden browserproducent skulle fange op!
Almindelige præfikser
Så fra en front-end webudviklers perspektiv bruges browserpræfikser til at tilføje nye CSS-funktioner på et websted, samtidig med at de har komfort ved at vide, at browserne understøtter disse stilarter. Dette kan især være nyttigt, når forskellige browserproducenter implementerer egenskaber på lidt forskellige måder eller med en anden syntaks.
De CSS-browserpræfikser, som du kan bruge (som hver især er specifikke for en anden browser) er:
- Android:
-webkit-
- Chrome:
-webkit-
- Firefox:
-moz-
- Internet Explorer:
-Frk-
- iOS:
-webkit-
- Opera:
-o-
- Safari:
-webkit-
Tilføjelse af et præfiks
I de fleste tilfælde tager du standard CSS-ejendommen og tilføjer præfikset for hver browser for at bruge en helt ny CSS-egenskabsejendom. De præfikserede versioner kommer altid først (i den rækkefølge, du foretrækker), mens den normale CSS-egenskab kommer sidst. For eksempel, hvis du vil tilføje en CSS3-overgang til dit dokument, skal du bruge overgangsegenskaben som vist nedenfor:
-webkit-overgang: alle 4s lette;
-moz-overgang: alle 4'er lette;
-ms-overgang: alle 4s lette;
-o-overgang: alle 4s lette;
overgang: alle 4'er lette;
Husk, at nogle browsere har en anden syntaks for bestemte egenskaber end andre, så antag ikke, at den browserpræfikserede version af en ejendom er nøjagtig den samme som standardegenskaben. Hvis du f.eks. Vil oprette en CSS-gradient, bruger du egenskaben lineær-gradient. Firefox, Opera og moderne versioner af Chrome og Safari bruger denne egenskab med det relevante præfiks, mens tidlige versioner af Chrome og Safari bruger den præfikserede egenskab -webkit-gradient.
Firefox bruger også andre værdier end standardværdierne.
Årsagen til, at du altid afslutter din erklæring med den normale, ikke-præfixede version af CSS-ejendommen, er, at når en browser understøtter reglen, vil den bruge den. Husk hvordan CSS læses. De senere regler har forrang for tidligere, hvis specificiteten er den samme, så en browser vil læse leverandørversionen af en regel og brug det, hvis det ikke understøtter det normale, men når det først er tilfældet, tilsidesætter det leverandørversionen med den aktuelle CSS Herske.
Sælgerpræfikser er ikke et hack
Da sælgerpræfikser først blev introduceret, spekulerede mange på webprofessionelle på, om de var et hack eller et skift tilbage til de mørke dage, hvor du forfalder et websteds kode for at understøtte forskellige browsere (husk det "Dette websted kan bedst ses i IE"besked). CSS-leverandørers præfikser er dog ikke hacks, og du bør ikke have nogen forbehold med at bruge dem i dit arbejde.
Et CSS-hack udnytter fejl i implementeringen af et andet element eller en ejendom for at få en anden ejendom til at fungere korrekt. For eksempel udnyttede boksmodelhacket fejl i parsingen af stemmefamilien eller i, hvordan browsere analyserer tilbageslag \. Men disse hacks blev brugt til at løse problemet med forskellen mellem, hvordan Internet Explorer 5.5 håndterede boksmodellen, og hvordan Netscape fortolket det og har intet at gøre med stemmefamiliestilen. Heldigvis er disse to forældede browsere dem, vi ikke behøver at bekymre os om 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 browserproducenter kan implementere en ejendom på en anden måde uden at bryde alt andet. Desuden arbejder disse præfikser med CSS-egenskaber, der vil i sidste ende være en del af specifikationen. Vi tilføjer simpelthen en kode for at få adgang til ejendommen tidligt. Dette er en anden grund til, at du afslutter CSS-reglen med den normale ejendom, der ikke er præfiks. På den måde kan du droppe de præfikserede versioner, når fuld browsersupport er opnået.
Vil du vide, hvad browserstøtten til en bestemt funktion er? Hjemmesiden CanIUse.com er en vidunderlig ressource til at indsamle disse oplysninger og fortælle dig, hvilke browsere og hvilke versioner af disse browsere, der i øjeblikket understøtter en funktion.
Sælgerpræfikser er irriterende, men midlertidige
Ja, det føles måske irriterende og gentagne 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 at sætte et afrundet hjørne på en kasse for nogle få år siden var du nødt til at skrive:
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bund-højre-radius: 10px;
-webkit-border-bund-venstre-radius: 5px;
grænse-radius: 10 px 5 pixel;
Men nu hvor browsere er kommet til fuldt ud at understøtte denne funktion, har du virkelig kun brug for den standardiserede version:
grænse-radius: 10 px 5 pixel;
Chrome har understøttet CSS3-ejendommen siden version 5.0, Firefox tilføjede den i version 4.0, Safari tilføjede den 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øttede det ikke med eller uden præfikser).
Husk, at browsere altid vil ændre sig, og der kræves kreative tilgange til understøttelse af ældre browsere, medmindre du planlægger det opbygning af websider der er år bag de mest moderne metoder. I sidste ende er det meget lettere at skrive browserpræ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.