Document.preferredStyleSheetSet — Eigenschaft · JavaScript-Referenz

Signatur

get Document.preferredStyleSheetSet

Beschreibung

Die schreibgeschützte Eigenschaft document.preferredStyleSheetSet liefert den Namen des Style-Sheet-Sets, das der Seitenautor als bevorzugt festgelegt hat. Ein Style-Sheet-Set ist eine Gruppe von Stylesheets mit demselben title-Attribut, z. B. <link rel="stylesheet" title="Hell" href="hell.css">. Alternative Sets werden mit rel="alternate stylesheet" eingebunden.

Das bevorzugte Set wird in dieser Reihenfolge bestimmt:

durch ein <meta http-equiv="Default-Style" content="Name">-Element,
durch einen HTTP-Header Default-Style bzw. einen Link-Header,
andernfalls durch den title des ersten benannten, nicht alternativen Stylesheets.

Die Eigenschaft gehörte zur alten „Style-Sheet-Sets“-API (zusammen mit selectedStyleSheetSet, lastStyleSheetSet, styleSheetSets und enableStyleSheetsForSet()). Sie war nützlich, um etwa einen Theme-Umschalter auf den Ausgangszustand zurückzusetzen. Da die API nie breit unterstützt wurde und inzwischen entfernt ist, sollte man den bevorzugten Stil heute selbst aus dem DOM ermitteln – etwa über document.styleSheets und die Eigenschaften title und disabled.

Rückgabewert

Typ

string

Beschreibung

Name des bevorzugten Style-Sheet-Sets. Leere Zeichenkette "", wenn kein bevorzugtes Set definiert ist. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Bevorzugtes Set mit Feature-Erkennung auslesen

// HTML:
// <meta http-equiv="Default-Style" content="Hell">
// <link rel="stylesheet" title="Hell" href="hell.css">
// <link rel="alternate stylesheet" title="Dunkel" href="dunkel.css">

if ('preferredStyleSheetSet' in document) {
  console.log(`Bevorzugt: ${document.preferredStyleSheetSet}`);
} else {
  console.log('preferredStyleSheetSet wird nicht unterstützt');
}

preferredStyleSheetSet wird nicht unterstützt (in altem Firefox: "Bevorzugt: Hell")

Polyfill: bevorzugtes Set aus dem DOM ermitteln

const getPreferredStyleSheetSet = () => {
  if (typeof document.preferredStyleSheetSet === 'string') {
    return document.preferredStyleSheetSet;
  }
  // 1. <meta http-equiv="Default-Style">
  const meta = document.querySelector('meta[http-equiv="Default-Style" i]');
  if (meta?.content) return meta.content;

  // 2. Erstes benanntes, nicht alternatives Stylesheet
  const link = [...document.querySelectorAll('link[rel~="stylesheet"][title]')]
    .find((el) => !el.relList.contains('alternate'));
  return link?.title ?? '';
};

console.log(getPreferredStyleSheetSet());

Hell

Theme-Umschalter auf Autor-Voreinstellung zurücksetzen

const activateSet = (name) => {
  for (const link of document.querySelectorAll('link[rel~="stylesheet"][title]')) {
    // Nur Stylesheets mit passendem Titel aktivieren
    link.disabled = link.title !== name;
  }
};

const preferred =
  document.querySelector('meta[http-equiv="Default-Style" i]')?.content ?? 'Hell';

document.querySelector('#theme-reset')?.addEventListener('click', () => {
  activateSet(preferred);
  console.log(`Zurückgesetzt auf: ${preferred}`);
});

Zurückgesetzt auf: Hell

// Wichtig · Fallstricke

Veraltet und nicht standardisiert: Die Eigenschaft wurde nur von Firefox unterstützt und dort (zusammen mit der restlichen Style-Sheet-Sets-API) in Version 64 entfernt. Chrome, Safari und Edge haben sie nie implementiert. Nicht in neuem Code verwenden.
Immer per Feature-Erkennung ('preferredStyleSheetSet' in document) prüfen – sonst erhält man undefined statt einer Zeichenkette.
Die Eigenschaft ist schreibgeschützt; das aktive Set ändert man darüber nicht. Dafür diente früher selectedStyleSheetSet, heute setzt man disabled auf den <link>-Elementen bzw. CSSStyleSheet-Objekten.
Für Hell/Dunkel-Themes ist die Medienabfrage prefers-color-scheme bzw. window.matchMedia() meist die bessere, breit unterstützte Lösung.

Siehe auch

Document.styleSheets Document.selectedStyleSheetSet Document.lastStyleSheetSet Document.styleSheetSets Document.enableStyleSheetsForSet() StyleSheet.disabled Window.matchMedia()