CSSFontPaletteValuesRule: name property

{{APIRef("CSSOM")}}

The read-only name property of the {{domxref("CSSFontPaletteValuesRule")}} interface represents the name identifying the associated {{CSSxRef("@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 {{cssxref("@import")}} and an {{cssxref("@font-palette-values")}} at-rule. Then it reads the {{cssxref("@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 {{domxref("document.getElementById()")}} to find that sheet. The palette will be the second {{domxref("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

{{EmbedLiveSample("Read the at-rule's name", "100", "40")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• {{cssxref("@font-palette-values")}} at-rule