Ben's Hobbyhoekje -- CSS-properties die (nog) een vendor-prefix nodig hebben

CSS-properties die (nog) een vendor-prefix nodig hebben

Dit verhaal is door de tijd ingehaald. De ondersteuning van CSS door de moderne browsers is inmiddels zo goed, dat prefixes niet meer nodig zijn. Voorlopig blijft blijft het hier staan omdat prefixes nog steeds in (wat oudere) websites worden gebruikt. Dit verhaal wordt nog gewoon onderhouden.

De CSS-code van veel websites bevat vendor-prefixes voor veel CSS-eigenschappen. Het merendeel daarvan is overbodig. Browsers zijn inmiddels zover ontwikkeld dat ze geen vendor-prefix meer nodig hebben; de 'echte' CSS-eigenschap volstaat.
Opmerking: In het item Over CSS vendor-prefixes wordt een en ander gezegd over het hoe en waarom van vendor-prefixes.

Een wijd verbreide misvatting onder website-bouwers was (is?) dat je vendor-prefixes moet inzetten voor vrijwel elke CSS-eigenschap, "om zo compatibel mogelijk te zijn". Daar zijn vendor-prefixes niet voor bedoeld. Ze zijn bedacht om een CSS-eigenschap al in een vroeg stadium van de ontwikkeling in de browser te kunnen implementeren, al vóórdat de standaard gereed is.

Het is niet onredelijk om te verwachten dat internetgebruikers hun browsers regelmatig updaten. Meestal gaat dat automatisch. De meeste gebruikers van je site beschikken over een up-to-date browser die overweg kan met de laatste ontwikkelingen op CSS-gebied.

Als je twijfelt of je een vendor-prefix met een CSS-eigenschap moet gebruiken, kun je altijd caniuse.com raadplegen.

Op het moment dat dit geschreven wordt is de status (voor zover mij bekend):

Per april 2020 zijn er nog nauwelijks prefixes meer nodig. Een die nog wel een prefix nodig heeft:
text-fill-color: -webkit-
Per april 2020 zijn prefixes overbodig voor:
transform.
flex.
column: Wordt niet volledig ondersteund door Chrome, FireFox en Edge.
box-shadow.
transition.
3D-transform.
animation.
gradient.
calc() function, ondersteuning voor rekenen met kleuren is nog niet volledig.
background-clip.

Het bovenstaande geldt voor browsers die up-to-date zijn.

De noodzaak om -webkit- te gebruiken wordt voornamelijk veroorzaakt door Safari en door mobiele apparaten die op Android of iOS draaien.

Opmerking:

Als je er tegenaan loopt dat een CSS-eigenschap in een bepaalde browser niet werkt, kun je proberen of de het wel werkt met de bij die browser behorende vendor-prefix. Bij mobiele apparaten doet -webkit- vaak wonderen.