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.

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.