CSSFontPaletteValuesRule: overrideColors Eigenschaft

Baseline 2022
Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die schreibgeschützte overrideColors-Eigenschaft der CSSFontPaletteValuesRule-Schnittstelle ist ein String, der eine Liste von Farbindex und Farbpaar enthält, die stattdessen verwendet werden sollen. Sie wird im gleichen Format angegeben wie der entsprechende override-colors Deskriptor.

Wert

Ein String, der eine durch Kommas getrennte Liste von Farbindex und Farbpaar enthält.

Beispiele

Die überschriebenen Farben lesen

Dieses Beispiel definiert zunächst einige At-Regeln, darunter zwei @font-palette-values. Da diese Regeln im zuletzt dem Dokument hinzugefügten Stylesheet leben, wird die Palette die zweite CSSRule sein, die vom letzten Stylesheet im Dokument (document.styleSheets[document.styleSheets.length-1].cssRules) zurückgegeben wird.

HTML

html
<div class="hat">
  <div class="emoji colored-hat">🎩</div>
</div>
<button>Toggle color</button>
<pre id="log"></pre>

CSS

css
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24)
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji";
  font-size: 3rem;
}

@font-palette-values --blue {
  font-family: "Noto Color Emoji";
  override-colors:
    3 rgb(1 28 193),
    4 rgb(60 124 230);
}

@font-palette-values --green {
  font-family: "Noto Color Emoji";
  override-colors:
    3 rgb(28 193 1),
    4 rgb(34 230 1);
}

.colored-hat {
  font-palette: --blue;
}

JavaScript

js
const log = document.getElementById("log");
const button = document.querySelector("button");
const hat = document.querySelector(".colored-hat");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const greenFontPaletteValuesRule = rules[3];
const blueFontPaletteValuesRule = rules[2];
log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;

button.addEventListener("click", (event) => {
  if (hat.style.fontPalette !== "--green") {
    hat.style.fontPalette = "--green";
    log.textContent = `Overridden colors: ${greenFontPaletteValuesRule.overrideColors}`;
  } else {
    hat.style.fontPalette = "--blue";
    log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;
  }
});

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4
# dom-cssfontpalettevaluesrule-overridecolors

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overrideColors

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch