CSSFontPaletteValuesRule: name property
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. As these rules live in the last stylesheet added to the document, the palette will be the second CSSRule
returned by the last stylesheet in the document (document.styleSheets[document.styleSheets.length-1].cssRules
). So, rules[1]
returns a CSSFontPaletteValuesRule
object, from which we can access name
.
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}`;
Result
Specifications
Specification |
---|
CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-name |
Browser compatibility
BCD tables only load in the browser
See also
@font-palette-values
at-rule