CSSFontPaletteValuesRule: overrideColors プロパティ

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.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

overrideColors は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、代わりに使用する色インデックスと色のペアのリストの文字列です。これは、対応する override-colors 記述子と同じ形式で指定します。

値

色インデックスと色のペアをカンマ区切りで格納した文字列です。

例

上書きされる色の読み取り

この例では、最初にいくつかのアットルールを定義し、そのうちの 2 つの @font-palette-values を定義しています。これらのルールは文書に追加された最後のスタイルシートにあるため、パレットは文書内の最後のスタイルシート (document.styleSheets[document.styleSheets.length-1].cssRules) が返す 2 つ目の CSSRule になります。

HTML

html
<div class="hat">
  <div class="emoji colored-hat">🎩</div>
</div>
<button>色の切り替え</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 = `上書きした色: ${blueFontPaletteValuesRule.overrideColors}`;

button.addEventListener("click", (event) => {
  if (hat.style.fontPalette !== "--green") {
    hat.style.fontPalette = "--green";
    log.textContent = `上書きした色: ${greenFontPaletteValuesRule.overrideColors}`;
  } else {
    hat.style.fontPalette = "--blue";
    log.textContent = `上書きした色: ${blueFontPaletteValuesRule.overrideColors}`;
  }
});

結果

仕様書

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

ブラウザーの互換性

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

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

Full support

関連情報