CSSFontPaletteValuesRule
The CSSFontPaletteValuesRule
interface represents an @font-palette-values
at-rule.
Instance properties
Inherits properties from its ancestor CSSRule
.
CSSFontPaletteValuesRule.name
Read only-
A string with the name of the font palette.
CSSFontPaletteValuesRule.fontFamily
Read only-
A string indicating the font families on which the rule has to be applied.
CSSFontPaletteValuesRule.basePalette
Read only-
A string indicating the base palette associated with the rule.
CSSFontPaletteValuesRule.overrideColors
Read only-
A string indicating the colors of the base palette that are overwritten and the new colors.
Instance methods
Inherits methods from its ancestor CSSRule
.
Examples
Read associated font family using CSSOM
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 fontFamily
.
HTML
html
<pre id="log">The @font-palette-values at-rule font families:</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]; // aA CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;
Result
Specifications
Specification |
---|
CSS Fonts Module Level 4 # om-fontpalettevalues |
Browser compatibility
BCD tables only load in the browser