CSS accent-color: HTML Form-Elemente mit nur einer Zeile CSS stylen
![CSS accent-color: HTML Form-Elemente mit nur einer Zeile CSS stylen](/static/00365a9cb255789a8f807cd652362a2d/dbf9a/2021_11_03_CSS_accent_color_af288ca995_8f3ea79bc5.png)
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
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; }
![Accent-Color im Light-Mode](/static/3d74c9ce48a217eba2d791e1a733a553/b237f/accent_color_light_mode_4c878a18ed.png)
Die Eigenschaft accent-color
funktioniert auch wunderbar im Zusammenspiel mit prefers-color-scheme
.
@media(prefers-color-scheme: dark) { :root { accent-color: #59CBE8; } }
![Accent-Color funktioniert aber auch super in Kombination mit "prefers-color-scheme"](/static/c74b55f9a33a2133520eab57bed3aa94/b237f/accent_color_dark_mode_7bb4978ab3.png)
Welche Elemente unterstützen die CSS-Eigenschaft 'accent-color'?
Zum aktuellen Zeitpunkt unterstützen nur 4 HTML-Elemente standardmäßig accent-color
.
<input type="checkbox">
<input type="radio">
<input type="range">
<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 90% der Internet-Nutzer unterstützt.
![Browser-Support von CSS Accent-Color](/static/3141982d1b8b765fe80a2ec4238276e9/45419/Screenshot_2023_01_17_at_20_45_30_2ccf03c146.png)
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).
![](/static/0c8c8dbd53ad4a00952e683b42d3f8f6/f50d8/accent_color_browser_implementation_ade40e5844.png)
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.