Baseline Widely available
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
.
A string beginning with two dashes.
Examples Read the at-rule's nameThis 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
.
<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.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.name}`;
Result Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4