CSSFontPaletteValuesRule: basePalette プロパティ

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.

basePalette は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、このルールに関連付けられたベースパレットを示します。

値

次の色値のいずれかを指定する文字列です。

light: フォントファイル内で、明るい背景に適用できるものとしてマークされている、つまり白に近い最初のパレットに一致します。フォント内にパレットがない場合、または要求されたメタデータを持つパレットがない場合、この値は "0" と等しくなります。
dark: フォントファイル内で、暗い背景に適用できるものとしてマークされている、つまり黒に近い最初のパレットに一致します。フォント内にパレットがない場合、あるいは要求されたメタデータを持つパレットがない場合、この値は "0" と等しくなります。
インデックスの入った文字列（"0", "1", …など）: インデックスに対応するパレットと一致します。最初のパレットは "0" に対応します。

この例では、文書に追加されたスタイルシートにルールを追加し、文書内の最後のスタイルシートとして返しています (document.styleSheets[document.styleSheets.length-1].cssRules)。したがって、 rules[2] は最初の CSSFontPaletteValuesRule オブジェクトを返し、 rules[3] は 2 つ目のオブジェクトを返します。

HTML

html

<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>
<pre id="log"></pre>

CSS

css

@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

h2 {
  font-family: "Nabla";
}

@font-palette-values --two {
  font-family: "Nabla";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Nabla";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}

JavaScript

const log = document.getElementById("log");

const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const twoRule = rules[2]; // CSSFontPaletteValuesRule インターフェイス
const fiveRule = rules[3]; // CSSFontPaletteValuesRule インターフェイス

log.textContent = `${twoRule.name} の @font-palette-values のベースパレット: ${twoRule.basePalette}\n`;
log.textContent += `${fiveRule.name} の @font-palette-values のベースパレット: ${fiveRule.basePalette}`;

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser