Wat zijn CSS-leveranciers of browservoorvoegsels?

Voorvoegsels van CSS-leveranciers, ook wel bekend als or CSS browservoorvoegsels, zijn een manier voor browsermakers om ondersteuning toe te voegen voor: nieuwe CSS-functies voordat deze functies volledig worden ondersteund in alle browsers. Dit kan worden gedaan tijdens een soort test- en experimentperiode waarin de browserfabrikant precies bepaalt hoe deze nieuwe CSS-functies worden geïmplementeerd. Deze voorvoegsels werden erg populair met de opkomst van CSS3 een paar jaar geleden.

Oorsprong van leveranciersvoorvoegsels

Toen CCS3 voor het eerst werd geïntroduceerd, begonnen een aantal opgewonden eigenschappen verschillende browsers op verschillende tijdstippen te raken. De door Webkit aangedreven browsers (Safari en Chrome) waren bijvoorbeeld de eersten die enkele eigenschappen in animatiestijl introduceerden, zoals transformatie en overgang. Door leverancier-prefix te gebruiken eigendommen, konden webontwerpers die nieuwe functies in hun werk gebruiken en ze in de browsers laten zien die ze meteen ondersteunde, in plaats van te moeten wachten tot elke andere browserfabrikant het betrapt op!

Algemene voorvoegsels

Dus vanuit het perspectief van een front-end webontwikkelaar, worden browservoorvoegsels gebruikt om nieuwe CSS-functies aan een site toe te voegen, terwijl u er gerust op bent dat de browsers die stijlen ondersteunen. Dit kan met name handig zijn wanneer verschillende browserfabrikanten eigenschappen op enigszins verschillende manieren of met een andere syntaxis implementeren.

De CSS-browservoorvoegsels die u kunt gebruiken (die elk specifiek zijn voor een andere browser) zijn:

• Android:

  -webkit-

• Chroom:

  -webkit-

• Firefox:

  -moz-

• Internetverkenner:

  -Mevrouw-

• iOS:

  -webkit-

• Opera:

  -O-

• Safari:

  -webkit-

Een voorvoegsel toevoegen

Om een ​​geheel nieuwe CSS-stijleigenschap te gebruiken, neemt u in de meeste gevallen de standaard CSS-eigenschap en voegt u het voorvoegsel voor elke browser toe. De prefix-versies komen altijd eerst (in elke gewenste volgorde), terwijl de normale CSS-eigenschap als laatste komt. Als u bijvoorbeeld een CSS3-overgang aan uw document wilt toevoegen, gebruikt u de overgangseigenschap zoals hieronder weergegeven:

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

Onthoud dat sommige browsers een andere syntaxis hebben voor bepaalde eigenschappen dan andere, dus ga er niet vanuit dat de browser-prefixversie van een eigenschap precies hetzelfde is als de standaardeigenschap. Als u bijvoorbeeld een CSS-verloop wilt maken, gebruikt u de eigenschap linear-gradient. Firefox, Opera en moderne versies van Chrome en Safari gebruiken die eigenschap met het juiste voorvoegsel, terwijl vroege versies van Chrome en Safari de voorvoegseleigenschap -webkit-gradient gebruiken.

Ook gebruikt Firefox andere waarden dan de standaardwaarden.

De reden dat u uw declaratie altijd beëindigt met de normale, niet-voorgevoegde versie van de CSS-eigenschap, is dat wanneer een browser de regel ondersteunt, deze deze zal gebruiken. Onthoud hoe CSS wordt gelezen. De latere regels hebben voorrang op eerdere als de specificiteit hetzelfde is, dus een browser zou de leveranciersversie van a. lezen regel en gebruik dat als het de normale versie niet ondersteunt, maar zodra het dat doet, zal het de leveranciersversie overschrijven met de daadwerkelijke CSS regel.

Leveranciersvoorvoegsels zijn geen hack

Toen leveranciersvoorvoegsels voor het eerst werden geïntroduceerd, vroegen veel webprofessionals zich af of ze een hack of een ga terug naar de donkere dagen van het forken van de code van een website om verschillende browsers te ondersteunen (onthoud dat "Deze site is het best te bekijken in IE" bericht). Voorvoegsels van CSS-leveranciers zijn echter geen hacks en u zou geen bedenkingen moeten hebben bij het gebruik ervan in uw werk.

Een CSS-hack maakt gebruik van fouten in de implementatie van een ander element of een andere eigenschap om een ​​andere eigenschap correct te laten werken. De hack van het boxmodel maakte bijvoorbeeld gebruik van fouten in het ontleden van de spraakfamilie of in de manier waarop browsers backslashes \ ontleden. Maar deze hacks werden gebruikt om het probleem op te lossen van het verschil tussen hoe Internet Explorer 5.5 omging met het boxmodel en hoe Netscape geïnterpreteerd, en hebben niets te maken met de stijl van de stemfamilie. Gelukkig zijn deze twee verouderde browsers degenen waar we ons tegenwoordig geen zorgen over hoeven te maken.

Een leveranciersvoorvoegsel is geen hack omdat het de specificatie in staat stelt regels op te stellen voor hoe een eigendom kan worden geïmplementeerd, terwijl browsermakers tegelijkertijd een eigenschap op een andere manier kunnen implementeren zonder alles te breken anders. Bovendien werken deze voorvoegsels met CSS-eigenschappen die: zal uiteindelijk deel uitmaken van de specificatie. We voegen gewoon een code toe om vroegtijdig toegang te krijgen tot de accommodatie. Dit is nog een reden waarom u de CSS-regel beëindigt met de normale eigenschap zonder prefix. Op die manier kunt u de vooraf ingestelde versies verwijderen zodra volledige browserondersteuning is bereikt.

Voorvoegsels van leveranciers zijn vervelend maar tijdelijk

Ja, het kan vervelend en repetitief aanvoelen om de eigenschappen 2-5 keer te moeten schrijven om het in alle browsers te laten werken, maar het is een tijdelijke situatie. Om bijvoorbeeld een paar jaar geleden een afgeronde hoek op een doos te plaatsen, moest je schrijven:

-moz-grens-radius: 10px 5px;
-webkit-border-linksboven-radius: 10px;
-webkit-grens-rechtsboven-radius: 5px;
-webkit-border-rechtsonder-radius: 10px;
-webkit-grens-linksonder-radius: 5px;
grensradius: 10px 5px; 

Maar nu browsers deze functie volledig ondersteunen, heb je eigenlijk alleen de gestandaardiseerde versie nodig:

grensradius: 10px 5px; 

Chrome ondersteunt de CSS3-eigenschap sinds versie 5.0, Firefox heeft het toegevoegd in versie 4.0, Safari heeft het toegevoegd in 5.0, Opera in 10.5, iOS in 4.0 en Android in 2.1. Zelfs Internet Explorer 9 ondersteunt het zonder een voorvoegsel (en IE 8 en lager ondersteunden het niet met of zonder voorvoegsels).

Houd er rekening mee dat browsers altijd zullen veranderen en dat creatieve benaderingen voor het ondersteunen van oudere browsers vereist zijn, tenzij je van plan bent om dit te doen webpagina's bouwen die jaren achterlopen op de modernste methoden. Uiteindelijk is het schrijven van browservoorvoegsels veel gemakkelijker dan het vinden en exploiteren van fouten die hoogstwaarschijnlijk in een toekomstige versie zullen worden opgelost, waardoor u een andere fout moet vinden om te misbruiken enzovoort.