CSSFontPaletteValuesRule: name property
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.
The read-only name property of the CSSFontPaletteValuesRule interface represents the name identifying the associated @font-palette-values at-rule. A valid name always starts with two dashes, such as --Alternate.
Value
A string beginning with two dashes.
Examples
Read the at-rule's name
This example first defines an @import and an @font-palette-values at-rule. Then it reads the @font-palette-values rule and displays its name. The MDN live sample infrastructure combines all the CSS blocks in the example into a single inline style with the id css-output, so we first use document.getElementById() to find that sheet. The palette will be the second CSSRule in that stylesheet. So, rules[1] returns a CSSFontPaletteValuesRule object, from which we can access name.
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}`;
Result
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-name |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
name
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
@font-palette-valuesat-rule