Grafik/Farbe/currentColor

Text-Info

15min

leicht

CSS

Der berechnete Wert der Schriftfarbe eines Elements wird in der CSS-Variablen currentColor gespeichert. Diesen Wert können Sie als Standardfarbwert festlegen und überall dort verwenden, wo eine Farbangabe erwartet wird. Die Darstellung ist also abhängig von den Textfarben der Vorfahrenelemente.

Vererbung von Farbwerten

Information: color-Eigenschaft mit falschen Namen?

Die color-Eigenschaft regelt die Schriftfarbe eines Elements und (falls nicht anders festgelegt) seiner Nachfahren.
Genau genommen müsste sie eigentlich text-color heißen.
Zukünftig sollen wie in SVG eine fill- und eine stroke-Eigenschaft weitere Gestaltungsmöglichkeiten bieten.

Der Wert der Eigenschaft color wird automatisch auf Nachfahrenlemente vererbt. Im Beispiel wird die Textfarbe des body-Elements – hier der Defaultwert der meisten Browser, schwarz – für alle Nachfahren verwendet, ohne dass eine Angabe zur Textfarbe erfolgt.

Des Weiteren wird bei Rahmen, Außenlinien oder Schlagschatten ohne Farbangabe die Textfarbe als Farbe für den Schatten bzw. Linien verwendet.

Vererbung der Schriftfarbe ansehen …

h1 { 
  color: royalblue;
  border-bottom: 4px solid; 
}
 
aside {
  float: right;
  box-shadow: 5px 10px 15px;
  outline: 3px solid;
}
 
aside.hinweis {	
  color: red;
}

ansehen …

Beachten Sie: Der Schatten im Beispiel wird von Safari nicht dargestellt, Safari benötigt zur Darstellung von Schatten eine Farbangabe.

Definieren eines Standardfarbwerts

Mit currentColor können Sie einen Standardfarbwert definieren, den Sie für Text- und Hintergrundfarben verwenden können.

Beispiel ansehen …

body {
  color: saddlebrown;
  background-image: linear-gradient(white, currentColor);
}
 
.hinweis {
  outline: none;
  border: 10px ridge currentColor;
}
 
p#test a {
  color: currentColor;
  text-decoration: none;
  border-bottom: 2px solid black;
}
 
p#test a:hover {
  border-color: currentColor;
}

Sie können mit input type="color" eine Farbe auswählen, die dann den Farbwert von body überschreibt. Dieser Farbwert wird als Standardfarbwert auch für die Rahmen, Außenlinien und Schlagschatten sowie den Verlauf im Hintergrund verwendet.

ansehen …

Beachten Sie: Wenn Sie für ein Element eine Textfarbe festlegen, ändert sich dort und ggf. für die Nachfahrenelemente der Wert von currentColor.

Beachten Sie: Dieses Beispiel funktioniert in Safari nur eingeschränkt, da der Schatten und der Verlauf nicht dargestellt werden.

Ein Verdunkeln oder Aufhellen des Farbwerts um einen bestimmten Prozentsatz oder andere Rechenoperationen mit Farbwerten sind mit reinem CSS nicht möglich. Dazu können beispielsweise Präprozessoren wie SASS verwendet werden.

Da CSS die Groß- und Kleinschreibung von Buchstaben nicht unterscheidet, konnte hier das aus JavaScript bekannte so genannte „CamelCase“, in dem die ersten Buchstaben der einzelnen Bestandteile des Namens groß geschrieben werden, verwendet werden. Die Schreibweise „currentcolor“ ist genauso richtig.

Siehe auch

• CSS/Custom properties (CSS-Variablen)
  Mit custom properties ist es möglich, mehrere Farben festzulegen und über die var()-Funktion als Wert beliebig oft wieder einzusetzen. Änderungen von Farbwerten können nun zentral für das ganze Stylesheet durchgeführt werden.