CSSFontPaletteValuesRule: name-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2022.

Die schreibgeschützte name-Eigenschaft der CSSFontPaletteValuesRule-Schnittstelle repräsentiert den Namen, der die zugehörige @font-palette-values-Regel identifiziert. Ein gültiger Name beginnt immer mit zwei Bindestrichen, wie zum Beispiel --Alternate.

Wert

Ein String, der mit zwei Bindestrichen beginnt.

Beispiele

Den Namen der Regel auslesen

Dieses Beispiel definiert zunächst eine @import- und eine @font-palette-values-Regel. Dann wird die @font-palette-values-Regel ausgelesen und ihr Name angezeigt. Da diese Regeln im zuletzt hinzugefügten Stylesheet des Dokuments leben, wird die Palette die zweite CSSRule sein, die vom letzten Stylesheet im Dokument (document.styleSheets[document.styleSheets.length-1].cssRules) zurückgegeben wird. Daher gibt rules[1] ein CSSFontPaletteValuesRule-Objekt zurück, aus dem wir auf name zugreifen können.

HTML

html
<pre id="log">The @font-palette-values at-rule's name:</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

js
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}`;

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch