Grafik/Farbe/currentColor
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[Bearbeiten]
Information: color-Eigenschaft mit falschen Namen?
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.
h1 {
color: royalblue;
border-bottom: 4px solid;
}
aside {
float: right;
box-shadow: 5px 10px 15px;
outline: 3px solid;
}
aside.hinweis {
color: red;
}
Definieren eines Standardfarbwerts[Bearbeiten]
Mit currentColor können Sie einen Standardfarbwert definieren, den Sie für Text- und Hintergrundfarben verwenden können.
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;
}
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[Bearbeiten]
- 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.