Signatur
Beschreibung
Die schreibgeschützte Eigenschaft basePalette gehört zur Schnittstelle CSSFontPaletteValuesRule. Diese Schnittstelle steht für eine @font-palette-values-At-Regel im CSS-Objektmodell (CSSOM). Die Eigenschaft liefert den Wert des Deskriptors base-palette als String. Dieser Deskriptor legt fest, welche der in einer Farbschriftart (z. B. COLRv0/COLRv1 oder CPAL) eingebauten Paletten als Ausgangspunkt dient. Einzelne Farben daraus lassen sich anschließend mit override-colors überschreiben.
Mögliche Werte sind ein nullbasierter Index wie "0" oder "2" sowie die Schlüsselwörter "light" und "dark". Mit diesen wählt der Browser die Palette, die in der Schriftart als geeignet für helle bzw. dunkle Hintergründe markiert ist. Fehlt der Deskriptor in der Regel, ist der Rückgabewert ein leerer String. In diesem Fall verwendet der Browser die Standardpalette der Schriftart (Index 0).
Praktisch nützlich ist die Eigenschaft vor allem, um Stylesheets zur Laufzeit zu untersuchen. Beispiele: Paletten-Definitionen in Entwicklerwerkzeugen anzeigen, Theme-Umschalter mit den definierten Paletten abgleichen oder prüfen, ob eine Regel eine bestimmte Basis-Palette verwendet. Zum Ändern der Palette muss man die Regel ersetzen, zum Beispiel mit deleteRule() und insertRule(). Alternativ setzt man per font-palette eine andere Regel am Element.
Rückgabewert
base-palette-Deskriptors, z. B. "1", "light" oder "dark". Ist der Deskriptor nicht gesetzt, wird ein leerer String "" zurückgegeben.Beispiele
Basis-Palette einer Regel auslesen
// CSS im Dokument:
// @font-palette-values --festlich {
// font-family: "Bungee Spice";
// base-palette: 2;
// override-colors: 0 crimson;
// }
const rule = [...document.styleSheets[0].cssRules]
.find((r) => r instanceof CSSFontPaletteValuesRule);
console.log(rule.name); // Name der Palette
console.log(rule.basePalette); // gewählte Basis-PaletteAlle Paletten-Regeln eines Stylesheets auflisten
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
@font-palette-values --hell { font-family: "Nabla"; base-palette: light; }
@font-palette-values --dunkel { font-family: "Nabla"; base-palette: dark; }
@font-palette-values --standard { font-family: "Nabla"; }
`);
const paletten = [...sheet.cssRules]
.filter((r) => r instanceof CSSFontPaletteValuesRule)
.map((r) => ({ name: r.name, basis: r.basePalette || "(Standard)" }));
console.table(paletten);Passende Palette zum Farbschema wählen
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
@font-palette-values --hell { font-family: "Nabla"; base-palette: light; }
@font-palette-values --dunkel { font-family: "Nabla"; base-palette: dark; }
`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
const istDunkel = matchMedia("(prefers-color-scheme: dark)").matches;
const gesucht = istDunkel ? "dark" : "light";
const regel = [...sheet.cssRules].find(
(r) => r instanceof CSSFontPaletteValuesRule && r.basePalette === gesucht
);
if (regel) {
document.querySelector("h1").style.fontPalette = regel.name;
console.log(`Palette ${regel.name} aktiviert`);
}// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
basePalettewird ignoriert und löst im Strict Mode einenTypeErroraus. Soll sich die Palette ändern, muss man die Regel neu einfügen. - Rückgabe ist immer ein String: Auch ein Index kommt als
"2"und nicht als Zahl zurück. Für Vergleiche vorher mitNumber()umwandeln oder direkt mit Strings vergleichen. - Leerer String: Fehlt
base-palette, liefert die Eigenschaft""statt"0", obwohl der Browser dann Palette 0 verwendet. - Ungültige Indizes: Gibt es den angegebenen Index in der Schriftart nicht, fällt der Browser auf Palette 0 zurück.
basePalettegibt trotzdem den notierten Wert zurück, denn geprüft wird dabei nicht gegen die Schriftdatei. - Kompatibilität: Unterstützt ab Chrome/Edge 101, Firefox 107 und Safari 15.4. In älteren Browsern gibt es
CSSFontPaletteValuesRulenicht. Deshalb vorher mittypeof CSSFontPaletteValuesRule !== "undefined"prüfen. - Cross-Origin-Stylesheets: Wer auf
cssRuleseines fremden Stylesheets ohne CORS-Freigabe zugreift, bekommt einenSecurityError. - Sichtbar wirkt die Palette nur bei Farbschriftarten (COLR/CPAL). Bei normalen Schriften ändert sich nichts.