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 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
| Specification |
|---|
| CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-name |
Browser-Kompatibilität
Loading…
Siehe auch
@font-palette-values-At-Regel