CSSFontPaletteValuesRule: name プロパティ

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.

name は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、関連付けられた @font-palette-values アットルールを識別する名前を表します。有効な名前は常に 2 つのダッシュで始まり、 --Alternate のようになります。

この例では、最初に @import および @font-palette-values アットルールを定義します。そして、 @font-palette-values ルールを読み込み、その名前を表示します。これらのルールは文書に追加された最後のスタイルシートに存在するため、パレットは文書内の最後のスタイルシート (document.styleSheets[document.styleSheets.length-1].cssRules) が返す 2 つ目の CSSRule にあります。つまり、 rules[1] は CSSFontPaletteValuesRule オブジェクトを返し、そこから name にアクセスすることができます。

HTML

html

<pre id="log">@font-palette-values アットルールのフォントファミリー:</pre>

CSS

css

@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}

.alternate {
  font-palette: --Alternate;
}

JavaScript

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

const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // CSSFontPaletteValuesRule インターフェイス
log.textContent += ` ${fontPaletteValuesRule.name}`;

結果ｓ

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser