Over CSS vendor-prefixes
Een CSS vendor-prefix, meestal CSS-prefix, maar ook wel browser-prefix genoemd, is een manier om een nieuwe CSS-eigenschap
in te bouwen in een browser, als die eigenschap nog niet in een standaard is opgenomen. CSS-prefixes worden ook gebruikt als
een eigenschap al wel in de standaard staat, maar nog niet in de browsers definitief is ingebouwd.
Het geeft de browserfabrikanten de mogelijkheid om zo'n eigenschap in hun browser op te nemen zonder de standaard geweld aan
te doen.
Dit verhaal is opgezet voor recente versies van de meest gebruikte browsers. Het werkt niet met Internet Explorer 9 en eerder.
De CSS-prefixes zijn:
- -moz- Voor FireFox.
- -webkit- Voor browsers die zijn gebaseerd op de rendering-engine Webkit: Android, Safari, iOS, Chrome, Opera (versie 15 en later) en Microsoft Edge (vanaf Windows 10-1809).
- -o- Voor browsers die zijn gebaseerd op de Presto-engine: Opera versies 11 en 12. Latere versies van Opera ondersteunen dit nog, maar geldt het als deprecated (afgeraden). De prefix -o- zal in de toekomst geheel verdwijnen.
- -ms- Voor Internet-Explorer.
Als je een geavanceerde CSS-eigenschap wilt toepassen in je webdocument, zet je die eigenschap in de meeste gevallen in je CSS en zet je voor elke browser de prefixes er boven. Houd daarbij de bovenstaande volgorde aan.
Je kun er niet van uit gaan dat de syntax van een CSS-eigenschap met prefix gelijk is aan de syntax volgens de standaard. Ook kan het gebeuren dat de syntax verandert met een nieuwe versie van de render-motor.
Hieronder wordt als voorbeeld de code gegeven voor een (horizontaal) lineair verloop van rood naar geel. Let op de dubbele declaratie voor Webkit: de eerste is de oudste en die is nodig voor tablets en smartphones die onder iOS werken. De tweede is voor Chrome en Opera.
<div id="Voorbeeld"></div>
<style>
#Voorbeeld {
position:relative; margin:10px auto; width:400px; height:40px;
border:1px solid black;
background:-moz-linear-gradient(left, #f88 0%, #ff8 100%);
background:-webkit-gradient(linear, left top, right top,
color-stop(0%,#f88), color-stop(100%,#ff8));
background:-webkit-linear-gradient(left, #f88 0%, #ff8 100%);
background:-ms-linear-gradient(left, #f88 0%, #ff8 100%);
background:linear-gradient(left, #f88 0%, #ff8 100%);
}
</style>Opmerking:
De noodzaak voor het gebruik van vendor-prefixes neemt snel af. Zie het item
CSS-properties die (nog) een vendor-prefix nodig hebben.
