CSSFontPaletteValuesRule: name-Eigenschaft

Die schreibgeschützte name-Eigenschaft der CSSFontPaletteValuesRule-Schnittstelle repräsentiert den Namen zur Identifizierung der zugehörigen @font-palette-values-At-Regel. Ein gültiger Name beginnt immer mit zwei Bindestrichen, wie --Alternate.

Wert

Ein String, der mit zwei Bindestrichen beginnt.

Beispiele

Den Namen der At-Regel lesen

Dieses Beispiel definiert zunächst eine @import- und eine @font-palette-values-At-Regel. Dann wird die @font-palette-values-Regel gelesen und ihr Name angezeigt. Die MDN Live-Beispiel-Infrastruktur kombiniert alle CSS-Blöcke im Beispiel in einem einzigen Inline-Stil mit der ID css-output, daher nutzen wir zuerst document.getElementById(), um dieses Stylesheet zu finden. Die Palette wird die zweite CSSRule in diesem Stylesheet sein. Also gibt rules[1] ein CSSFontPaletteValuesRule-Objekt zurück, auf das wir über name zugreifen können.

HTML

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

CSS

@import "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.getElementById("css-output").sheet.cssRules;
const fontPaletteValuesRule = rules[1]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.name}`;

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @font-palette-values-At-Regel