CSS accent-color: HTML Form-Elemente mit nur einer Zeile CSS stylen

1 min Lesezeit
CSS accent-color: HTML Form-Elemente mit nur einer Zeile CSS stylen

Die CSS-Eigenschaft accent-color erleichtert das stylen von HTML Form-Elementen mit einer einzigen Zeile CSS.

Was ist die 'accent-color' CSS-Eigenschaft?

Das stylen von HTML-Elementen ist nicht immer ganz einfach. Oft muss schon für geringfügige Design-Änderungen der Standard-Style zurückgesetzt und das Element von Grund auf selbst gestylt werden. Um Abhilfe zu schaffen gibt es nun die CSS-Eigenschaft accent-color. accent-color ist eine CSS-Eigenschaft aus dem CSS UI Module Level 4 um mit einer einzelnen Zeile CSS einige standard HTML-Elemente mit einer Akzentfarbe zu personalisieren.

:root {
    accent-color: #E93CAC;
}
CSS-Eigenschaft accent-color im Light-Mode

Die Eigenschaft accent-color funktioniert auch wunderbar im Zusammenspiel mit color-scheme.

@media(prefers-color-scheme: dark) {
    :root {
        accent-color: #59CBE8;
    }
}
CSS-Eigenschaft accent-color im Dark-Mode

Welche Elemente unterstützen die CSS-Eigenschaft 'accent-color'

Zum aktuellen Zeitpunkt unterstützen nur 4 HTML-Elemente standardmäßig accent-color. checkbox, radio, range und progress. Eine Vorschau aller unterstützen Elemente gibt es unter https://accent-color.glitch.me/. Es ist aber damit zu rechnen, dass es zukünftig noch mehr Elemente mit accent-color-Support geben wird.

Browser Support

Momentan wird accent-color nur von den Browsern von knapp 62% der Internet-Nutzer unterstützt.

Browser-Support der CSS-Eigenschaft accent-color via CanIUse.

Der aktuelle Stand kann jederzeit über CanIUse gecheckt werden.

Auch wenn einige Browser accent-color noch nicht unterstützen, lohnt es sich, accent-color jetzt schon zu verwenden, da Browser ohne accent-color-Support weiterhin den Standard-Style als Fallback verwenden und es keine technischen Einschränkungen für Nutzer dieser Browser gibt.

Browser-Implementierung garantieren ausreichenden Kontrast

Damit keine Elemente mit zu geringem Kontrast entstehen können, welche die Accessibility der Seite verschlechtern, berechnen die Browser automatisch eine passende Kontrastfarbe zur gewählten accent-color. Dabei verwenden unterschiedliche Browser allerdings verschiedene Algorithmen. Hier zum Vergleich Chrome 95 (links) und Firefox 93 (rechts).

Verschiedene Browser berechnen den Kontrastwert der accent-color auf verschiedene weißen.

Unser Fazit

Die CSS-Eigenschaft accent-color ist ein einfacher Weg die bisher unterstützten HTML-Elemente zu personalisieren. Auch wenn bisher erst wenige Elemente und noch nicht alle Browser accent-color unterstützen, lohnt es sich unserer Meinung nach trotzdem, accent-color zur verwenden, da es für Nutzer von Browsern ohne accent-color-Support keine technischen Einschränkungen gibt und in Zukunft mit Sicherheit noch mehr HTML-Elemente diese nützliche CSS-Eigenschaft unterstützen werden.