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.

Newsletter abonnieren

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.