Natürlich erfüllt das Keyword „currentColor“ nicht vollkommen den Zweck einer Variable, wie wir sie beispielsweise von CSS-Präprozessoren wie Sass kennen. Trotzdem kann sie wirklich sinnvoll sein, da mit dem geschickten Einsatz dieser viele CSS-Wiederholungen vermieden werden können.
Funktionsweise
„currentColor“ speichert die Vordergrundfarbe (color) eines Elementes und ermöglicht es Dir, diese auch anderen Eigenschaften zuzuordnen. (Achtung: die Hintergrundfarbe (background-color) ist hier ausgeschlossen).
Beispiel
In meinem Beispiel gebe ich einem p-Element eine Vordergrundfarbe mit. Alle Eigenschaften eines a-Elementes, welches sich in meinem p-Element befindet, sollen die bereits definierte Farbe des p-Elementes verwenden. Der Vorteil: Der Farbwert wird nun nicht mehr für jede Eigenschaft einzeln angegeben, somit kann ich durch einmaliges Ändern der Farbe im Elternelement alle anderen mit ansprechen.
p { color: #333333; border-bottom: 1px solid currentColor; } p a { color: currentColor; border: 1px dotted currentColor; }
So einfach und effektiv lässt sich mit „currentColor“ arbeiten.
Browser-Support
Der Browser-Support ist hier nahezu grandios, denn alle gängigen Browser unterstützen das Keyword.
Smalltalk-Ecke
Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)