Wat zijn CSS-voor- of browservoorvoegsels?

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

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 transitie. Door voor prefixing van eigenschappen van leveranciers te gebruiken, konden webontwerpers die nieuwe functies in hun werk gebruiken en ze laten zien in de browsers die ze meteen ondersteunden, in plaats van te moeten wachten tot elke andere browserfabrikant het zou inhalen!

Dus vanuit het perspectief van een front-end webontwikkelaar worden browser-voorvoegsels gebruikt om nieuwe CSS-functies aan een site toe te voegen, terwijl het comfort heeft wetende 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 voorvoegsels van de CSS-browser die u kunt gebruiken (elk specifiek voor een andere browser) zijn:

Android:
-webkit-
Chrome:
-webkit-
Firefox:
-moz-
Internet Explorer:
-Mevrouw-
iOS:
-webkit-
Opera:
-O-
Safari:
-webkit-

In de meeste gevallen gebruikt u de nieuwe CSS-stijleigenschap om de standaard CSS-eigenschap te gebruiken en het voorvoegsel voor elke browser toe te voegen. De prefixversies komen altijd eerst (in elke gewenste volgorde), terwijl de normale CSS-eigenschap het laatst zal verschijnen. Als u bijvoorbeeld een CSS3-overgang aan uw document wilt toevoegen, gebruikt u de

overgang

eigendom zoals hieronder getoond:

-webkit- overgang: alle 4s gemak; -moz- overgang: alle 4s gemak; -Mevrouw- overgang: alle 4s gemak; -O- overgang: alle 4s gemak;overgang: alle 4s gemak;

Notitie: Houd er rekening mee dat sommige browsers voor bepaalde eigenschappen een andere syntax hebben dan andere, dus neem niet aan dat de browser-prefix van een eigenschap exact hetzelfde is als de standaardeigenschap. Als u bijvoorbeeld een CSS-verloop wilt maken, gebruikt u de

lineaire gradiënt
eigendom. Firefox, Opera en moderne versies van Chrome en Safari gebruiken die eigenschap met het juiste voorvoegsel, terwijl eerdere versies van Chrome en Safari de prefix gebruiken

-webkit-gradiënt
. Firefox gebruikt ook andere waarden dan de standaardwaarden.

De reden dat u altijd uw verklaring beëindigt met de normale, niet-voorgemengde 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 regels als de specificiteit hetzelfde is, dus een browser leest de leveranciersversie van een regel en gebruikt die als deze de normale versie niet ondersteunt, maar als deze eenmaal wordt gebruikt, overschrijft deze de leverancierversie met de eigenlijke CSS-regel.

Voorvoegsels van leveranciers zijn geen hack

Toen voorvoegsels van leveranciers voor het eerst werden geïntroduceerd, vroegen veel webprofessionals zich af of het een hack of een verschuiving inhield naar de donkere dagen van het formuleren van de code van een website om verschillende browsers te ondersteunen (onthoud die " Deze site wordt het best bekeken in IE "berichten). Voorvoegsels van CSS-leveranciers zijn echter geen hacks en u moet geen bedenkingen hebben bij het gebruik ervan in uw werk.

Een CSS-hack gebruikt fouten bij de implementatie van een ander element of een andere eigenschap om een andere eigenschap correct te laten werken. Bijvoorbeeld, de boxmodel-hack benut fouten in het ontleden van de

voice-familie
of in hoe browsers backslashes parseren (

). Maar deze hacks werden gebruikt om het probleem op te lossen van het verschil tussen hoe Internet Explorer 5.5 het boxmodel hanteerde en hoe Netscape het interpreteerde en niets te maken had met de stijl van de stemfamilie. Gelukkig zijn deze twee verouderde browsers degenen waar we ons tegenwoordig geen zorgen over maken.

Een prefix van een leverancier is geen hack, omdat het de specificatie toestaat regels in te stellen voor de manier waarop een property kan worden geïmplementeerd, terwijl browser-ontwikkelaars op hetzelfde moment een property op een andere manier kunnen implementeren zonder al het andere te verbreken. Bovendien werken deze voorvoegsels met CSS-eigenschappen zal uiteindelijk deel uitmaken van de specificatie . We voegen simpelweg wat 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, niet-voorgemengde eigenschap. Op die manier kunt u de prefixversies laten vallen zodra de volledige browserondersteuning is bereikt.

Wilt u weten wat de browserondersteuning voor een bepaalde functie is? De website CanIUse.com is een geweldige bron voor het verzamelen van deze informatie en om u te laten weten welke browsers en welke versies van deze browsers op dit moment een functie ondersteunen.

Voorvoegsels van leveranciers zijn vervelende maar tijdelijk

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

-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;grensradius: 10px 5px;
Maar nu browsers deze functie volledig hebben ondersteund, hebt u 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).

Vergeet niet dat browsers altijd zullen veranderen en dat er creatieve benaderingen voor het ondersteunen van oudere browsers nodig zijn, tenzij je van plan bent webpagina's te bouwen die jaren achterlopen op de modernste methoden. Uiteindelijk is het schrijven van browserprefixen veel eenvoudiger dan het vinden en exploiteren van fouten die waarschijnlijk in een toekomstige versie worden opgelost, waardoor u een andere fout moet vinden om te exploiteren, enzovoort.