CSSFontPaletteValuesRule

The CSSFontPaletteValuesRule interface represents an @font-palette-values at-rule.

Instance properties

Inherits properties from its ancestor CSSRule.

• name Read only
  • : A string with the name of the font palette.
• fontFamily Read only
  • : A string indicating the font families on which the rule has to be applied.
• basePalette Read only
  • : A string indicating the base palette associated with the rule.
• 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. 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 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 fontFamily.

HTML

<pre id="log">The @font-palette-values at-rule font families:</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]; // aA CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;

Result

Specifications

Browser compatibility

See also

• @font-palette-values