CSSFontPaletteValuesRule: свойство name

Только для чтения name свойство интерфейса CSSFontPaletteValuesRule представляет имя, идентифицирующее связанное правило @font-palette-values. Действительное имя всегда начинается с двух дефисов, например --Alternate.

Строка, начинающаяся с двух дефисов.

В этом примере сначала определяются правило @import и правило @font-palette-values. Затем считывается правило @font-palette-values и отображается его имя. Поскольку эти правила находятся в последнем добавленном в документ стиле, палитра будет второй CSSRule возвращаемой последним стилем в документе (document.styleSheets[document.styleSheets.length-1].cssRules). Таким образом, rules[1] возвращает объект CSSFontPaletteValuesRule, из которого мы можем получить доступ к name.

HTML

<pre id="log">The @font-palette-values at-rule's name:</pre>

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]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.name}`;

Результат

• @font-palette-values правило