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! :)


Schreibe einen Kommentar

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

Werde Teil unserer Community

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.