CSSFontPaletteValuesRule.name — Eigenschaft · JavaScript-Referenz

Signatur

CSSFontPaletteValuesRule.name

Beschreibung

Die schreibgeschützte Eigenschaft name der Schnittstelle CSSFontPaletteValuesRule gibt den Bezeichner zurück, der in der At-Regel @font-palette-values direkt hinter dem Schlüsselwort steht. Dieser Name ist ein dashed ident, beginnt also immer mit zwei Bindestrichen, etwa --brand-palette.

Über genau diesen Namen verweist die CSS-Eigenschaft font-palette auf eine eigene Farbpalette, zum Beispiel font-palette: --brand-palette;. Mit name kannst du per JavaScript die definierten Paletten eines Stylesheets finden, auflisten oder gezielt eine bestimmte Regel heraussuchen. Das ist praktisch für Theme-Umschalter oder Entwicklerwerkzeuge.

Du bekommst den Wert, indem du document.styleSheets und deren cssRules durchläufst und nach Instanzen von CSSFontPaletteValuesRule filterst. Den Namen kannst du nicht ändern. Willst du ihn umbenennen, musst du die Regel löschen und neu einfügen, z. B. mit deleteRule() und insertRule().

Rückgabewert

Typ

string

Beschreibung

Der Name der Palette als Zeichenkette, inklusive der führenden --, z. B. "--warm".

Beispiele

Namen aller Font-Paletten auflisten

// CSS: @font-palette-values --warm { font-family: Bixa; base-palette: 1; }
//      @font-palette-values --cool { font-family: Bixa; base-palette: 2; }
const paletteNames = [...document.styleSheets]
  .flatMap((sheet) => {
    try {
      return [...sheet.cssRules];
    } catch {
      return []; // Fremd-Stylesheet ohne CORS-Freigabe
    }
  })
  .filter((rule) => rule instanceof CSSFontPaletteValuesRule)
  .map((rule) => rule.name);

console.log(paletteNames);

["--warm", "--cool"]

Regel dynamisch einfügen und Namen auslesen

const style = document.createElement('style');
document.head.append(style);

const sheet = style.sheet;
sheet.insertRule(`@font-palette-values --brand {
  font-family: "Bungee Spice";
  override-colors: 0 #0055ff, 1 #ffcc00;
}`);

const rule = sheet.cssRules[0];
console.log(rule.name);        // Name der Palette
console.log(rule.fontFamily);  // zugehörige Schrift

--brand "Bungee Spice"

Theme-Umschalter: nur existierende Paletten anwenden

const findPalette = (name) =>
  [...document.styleSheets]
    .flatMap((s) => { try { return [...s.cssRules]; } catch { return []; } })
    .find((r) => r instanceof CSSFontPaletteValuesRule && r.name === name);

const applyPalette = (name) => {
  const heading = document.querySelector('h1');
  if (findPalette(name)) {
    heading.style.fontPalette = name;
  } else {
    console.warn(`Palette ${name} nicht definiert – nutze normal`);
    heading.style.fontPalette = 'normal';
  }
};

applyPalette('--warm');

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie rule.name = '--neu' hat keine Wirkung. Im Strict Mode wirft sie einen TypeError, weil die Eigenschaft nur einen Getter hat.
Der Rückgabewert enthält immer die führenden --. Wenn du Namen vergleichst, musst du die Bindestriche also mitschreiben. Bezeichner sind groß-/kleinschreibungsabhängig: --Warm und --warm sind verschiedene Namen.
Bei Stylesheets von fremden Ursprüngen ohne CORS-Freigabe wirft der Zugriff auf cssRules einen SecurityError. Fange diesen Fehler deshalb mit try/catch ab.
Regeln innerhalb von @media, @supports oder @layer stehen nicht direkt in sheet.cssRules. Sie liegen verschachtelt in den cssRules der Gruppierungsregel und müssen rekursiv durchsucht werden.
Kompatibilität: Die Eigenschaft wird seit 2022 in allen aktuellen Browsern unterstützt. In älteren Browsern fehlt CSSFontPaletteValuesRule ganz. Prüfe deshalb vorher mit 'CSSFontPaletteValuesRule' in window, bevor du instanceof verwendest.

Siehe auch

CSSFontPaletteValuesRule.basePalette CSSFontPaletteValuesRule.fontFamily CSSFontPaletteValuesRule.overrideColors CSSFontFeatureValuesRule.swash CSSFontFeatureValuesRule.ornaments