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

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

Dit verhaal gaat door de tijd worden ingehaald. De ondersteuning van CSS door de moderne browsers is inmiddels zo goed, dat prefixes nauwelijks 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.

Per juli 2024 is er het nodige verbeterd, maar helemaal klaar is het nog niet. Zo zijn er nog zaken die al wel goed werken, maar die nog in geen enkele standaard voorkomen. En opvallende is de opmaak van de schuifknop van een schuifregelaar. Die moet worden opgemaakt als een pseudoklasse van de schuifbalk. Voor FireFox is de benaming anders dan voor Edge, Chrome, Opera en Safari.

Voor FireFox gebruik je:

[input type="range"]::-moz-range-thumb { … }

Voor andere browsers gebruik je:

[input type="range"]::-webkit-slider-thumb { … }

Let in beide gevallen op de dubbele punten: twee achter elkaar, zonder dat werkt het niet.
Een uitgewerkt voorbeeld vind je in het item Schuifregelaar voor de helderheid van een afbeelding.

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.