CSS-At-Regel-Deskriptor override-colors
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2022 browserübergreifend verfügbar.
Der override-colors-Deskriptor in CSS wird verwendet, um Farben in der ausgewählten base-palette einer Farbschrift zu überschreiben.
Syntax
/* basic syntax */
override-colors: <index of color> <color>;
/* using color names */
override-colors: 0 red;
/* using hex-color */
override-colors: 0 #ff0000;
/* using rgb */
override-colors: 0 rgb(255 0 0);
/* overriding multiple colors */
override-colors:
0 red,
1 green,
2 blue;
Der Deskriptor override-colors akzeptiert eine kommagetrennte Liste aus Farbindizes und neuen Farbwerten.
Die Farbindizes beginnen bei null. Als Farbwert kann jeder Farbwert verwendet werden.
Für jedes Paar aus Index und Farbe wird die Farbe mit diesem Index in der angegebenen base-palette überschrieben. Wenn die Farbschrift am angegebenen Index keine Farbe enthält, wird das Paar ignoriert.
Werte
[ <integer [0,∞]> <absolute-color-base> ]-
Gibt den Index einer Farbe in einer base-palette und die Farbe an, mit der sie überschrieben werden soll.
Formale Definition
| Zugehörige @-Regel | @font-palette-values |
|---|---|
| Anfangswert | n/a (required) |
| Berechneter Wert | wie angegeben |
Formale Syntax
override-colors =
[ <integer [0,∞]> <color> ]#
<integer> =
<number-token>
Beispiele
Farben von Emojis ändern
Dieses Beispiel zeigt, wie Sie Farben in der Farbschrift Noto Color Emoji überschreiben, damit sie zum Erscheinungsbild Ihrer Website passen.
HTML
<section class="hats">
<div class="hat">
<h2>Original Hat</h2>
<div class="emoji">🎩</div>
</div>
<div class="hat">
<h2>Red Hat</h2>
<div class="emoji red-hat">🎩</div>
</div>
</section>
CSS
@font-face {
font-family: "Noto Color Emoji";
font-style: normal;
font-weight: normal;
src: url("https://mdn.github.io/shared-assets/fonts/noto-color-emoji/NotoColorEmoji-Regular.woff2")
format("woff2");
}
.emoji {
font-family: "Noto Color Emoji", emoji;
font-size: 3rem;
}
@font-palette-values --red {
font-family: "Noto Color Emoji";
override-colors:
720 rgb(74 11 0),
1192 rgb(149 22 1),
2052 rgb(183 27 1),
3426 rgb(193 28 1),
4614 rgb(230 34 1);
}
.red-hat {
font-palette: --red;
}
Ergebnis
Eine Farbe in einer alternativen base-palette ändern
Dieses Beispiel verwendet die Rocher Color Font und zeigt, wie Sie eine Farbe in der Schrift überschreiben.
HTML
<h2 class="normal-palette">Normal Palette</h2>
<h2 class="override-palette">Override Palette</h2>
CSS
@font-face {
font-family: "Rocher";
src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}
h2 {
font-family: "Rocher", fantasy;
}
@font-palette-values --override-palette {
font-family: "Rocher";
base-palette: 3;
}
@font-palette-values --override-palette {
font-family: "Rocher";
base-palette: 3;
override-colors: 0 rebeccapurple;
}
.normal-palette {
font-palette: --normal-palette;
}
.override-palette {
font-palette: --override-palette;
}
Ergebnis
Dieses Beispiel zeigt, dass in base-palette 3 die Farbe am Index 0 durch rebeccapurple überschrieben wird.
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # override-color |