Websites met stijl
vendor-prefix
Op dit naslagblad:
Inleiding
W3C, the World Wide Web Consortium , ontwerpt en onderhoudt webstandaards. Het instituut komt regelmatig met nieuwe eigenschappen.
In de afgelopen jaren kwam css3 uit, nu wordt gewerkt aan css4.
Als een nieuwe eigenschap wordt voorgesteld, wordt gedurende enkele jaren overlegd hoe die eigenschap precies zal worden vormgegeven.
Soms gaan de makers van een browser dan al experimenteren met die eigenschap. Die geven ze dan een vendor-prefix (ook wel browser prefix genaamd,
om aan te geven dat de nieuwe eigenschap nog experimenteel is en misschien niet helemaal overeenkomt met de definitieve specificatie van de eigenschap.
Na verloop van tijd gaat een browsermaker dan over op de definitieve vorm. Pas dan is de eigenscap volldig geïmplmenteerd.
De meest gebruikte prefixes zijn:
- -webkit-, prefix voor Chrome, Safari, Opera
- -moz-, prefix voor Firefox
- -ms-, prefix voor Explorer en Edge
Voorbeeld: de eigenschap column-width
Ondersteuning
De eigenschap column-width is nieuw in css3. Die eigenschap wordt nog niet door alle browsers ondersteund:
- Chrome
- vanaf versie 4.0 met prefix -webkit-
- vanaf versie 50 volledig
- Firefox
- vanaf versie 2.0 met prefix -moz-
- vanaf versie 52 volledig
- Explorer/Edge
- geen prefix
- vanaf versie 10 volledig
- Safari
- vanaf versie 3.1 met prefix -webkit-
- vanaf versie 9.0 volledig
- Opera
- vanaf versie 15.0 met prefix -webkit-
- vanaf versie 37.0 volledig
Css zonder en met prefix
voorbeeld 1: Zonder prefix: werkt alleen met de nieuwste versie (mogelijk niet met Firefox)
column-width: 250px;
voobeeld 2: prefixes toegevoegd: werkt ook met een aantal andere versies van de browsers
-webkit-column-width: 250px;/* voor oudere versies van Chrome, Safari, Opera */
-moz-column-width: 250px;/* voor Firefox */
column-width: 250px;/* voor browser(-versies) die de eigenschap volledig ondersteunen */
Kies dus voor versie 2.
Tips
- Let op: zet de versie zonder vendor-prefix altijd achteraan, die wordt dan uitgevoerd door alle browsers die de eigenschap volledig ondersteunen.
- Tip: Op de website autoprefixer.github.io kan je in het linker vak je css code tikken of plakken.
In het rechter venster worden dan eventuele vendor-prefixes toegevoegd.
- Tip: Op de webpagina www.w3schools.com/cssref/css3_browsersupport.asp
van w3 schools staat een overzicht van alle css3 eigenschappen met ondersteuning (met en zonder prefix).
- Tip: De website shouldiprefix.com/ geeft aan voor welke eigenschappen een prefix nodig is (de blauwe regels),
voor welke niet (de groene regels). Met veel info.
Overigens ontbreekt de info dat column-span niet wordt ondersteund door Mozilla