CSS/Wertetypen/Farbangaben/currentColor

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

  • CSS 3.0
  • Android
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Leer

Vererbung von Farbwerten[Bearbeiten]

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.

Beispiel ansehen …
h1 { 
  color: royalblue;
  border-bottom: 4px solid; 
}
 
aside {
  float: right;
  box-shadow: 5px 10px 15px;
  outline: 3px solid;
}
 
aside.hinweis {	
  color: red;
}
Beachten Sie: Der Schatten im Beispiel wird von Safari nicht dargestellt, Safari benötigt zur Darstellung von Schatten eine Farbangabe.

Definieren eines Standardfarbwerts[Bearbeiten]

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.
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.