Document.lastStyleSheetSet — Eigenschaft · JavaScript-Referenz

Signatur

Document.lastStyleSheetSet

Beschreibung

Document.lastStyleSheetSet ist eine schreibgeschützte Eigenschaft aus der früheren Stylesheet-Sets-API. Sie gibt den Namen des Stylesheet-Sets zurück, das zuletzt aktiviert wurde. Ein Stylesheet-Set ist eine Gruppe von <link rel="stylesheet">- bzw. <link rel="alternate stylesheet">-Elementen mit demselben title-Attribut, zum Beispiel für ein helles und ein dunkles Design.

Der Wert ändert sich nur, wenn document.selectedStyleSheetSet gesetzt wird. Wenn Sie einzelne Stylesheets über StyleSheet.disabled ein- oder ausschalten, bleibt lastStyleSheetSet unverändert. Solange noch kein Set per Skript ausgewählt wurde, ist der Wert null.

Gedacht war die Eigenschaft für Designwechsler: Man konnte damit unterscheiden, ob gerade das bevorzugte Set des Autors (preferredStyleSheetSet) aktiv ist oder ob der Nutzer ein anderes gewählt hat, und diese Wahl zum Beispiel speichern. Die API wurde aber nie standardisiert und nur in Firefox umgesetzt. Für neuen Code sollten Sie sie nicht verwenden. Besser ist es, Designs mit StyleSheet.disabled, CSS-Variablen oder einer Klasse bzw. einem Datenattribut am Wurzelelement umzuschalten und die Auswahl selbst zu speichern, etwa in localStorage.

Rückgabewert

Typ

string | null

Beschreibung

Der Name (title) des zuletzt über selectedStyleSheetSet aktivierten Stylesheet-Sets oder null, wenn bisher keines gesetzt wurde. In aktuellen Browsern ist die Eigenschaft nicht vorhanden, der Zugriff ergibt also undefined.

Beispiele

Unterstützung prüfen und Wert auslesen

// Die Eigenschaft gibt es nur in alten Firefox-Versionen
if ('lastStyleSheetSet' in document) {
  const last = document.lastStyleSheetSet;
  console.log(last === null
    ? 'Noch kein Stylesheet-Set per Skript gewählt'
    : `Zuletzt aktiviert: ${last}`);
} else {
  console.log('lastStyleSheetSet wird nicht unterstützt');
}

lastStyleSheetSet wird nicht unterstützt

Designwechsler mit Rückfallebene (ohne die veraltete API)

// HTML: <link rel="stylesheet" title="Hell" href="hell.css">
//       <link rel="alternate stylesheet" title="Dunkel" href="dunkel.css">
let lastSet = null; // eigener Ersatz für document.lastStyleSheetSet

const activateSet = (name) => {
  for (const sheet of document.styleSheets) {
    if (sheet.title) sheet.disabled = sheet.title !== name;
  }
  lastSet = name;
  localStorage.setItem('theme', name);
};

activateSet(localStorage.getItem('theme') ?? 'Hell');
console.log(`Zuletzt aktiviert: ${lastSet}`);

Zuletzt aktiviert: Hell

Historische Nutzung in Firefox ≤ 63

// Funktioniert nur in Firefox bis Version 63
const supported = 'selectedStyleSheetSet' in document;
if (supported) {
  console.log(document.lastStyleSheetSet);   // null
  document.selectedStyleSheetSet = 'Dunkel';
  console.log(document.lastStyleSheetSet);   // "Dunkel"
  const isPreferred =
    document.lastStyleSheetSet === document.preferredStyleSheetSet;
  console.log(`Bevorzugtes Set aktiv: ${isPreferred}`);
} else {
  console.log('Stylesheet-Sets-API nicht verfügbar');
}

Stylesheet-Sets-API nicht verfügbar

// Wichtig · Fallstricke

Veraltet und nicht standardisiert: Nur Firefox hat die Eigenschaft umgesetzt. Mit Firefox 64 wurde sie zusammen mit selectedStyleSheetSet, preferredStyleSheetSet, styleSheetSets und enableStyleSheetsForSet() entfernt. Chrome, Safari und Edge haben sie nie unterstützt.
Im Code, der heute ausgeführt wird, ergibt der Zugriff undefined und nicht null. Prüfen Sie deshalb mit 'lastStyleSheetSet' in document, ob die Eigenschaft vorhanden ist.
Auch in Firefox änderte sich der Wert nur beim Setzen von selectedStyleSheetSet. Wer StyleSheet.disabled direkt änderte, bekam kein aktualisiertes lastStyleSheetSet.
Die Umschaltung über das Browsermenü „Ansicht → Webseiten-Stil“ und rel="alternate stylesheet" funktioniert in Firefox weiterhin. Nur die Skript-API wurde entfernt.

Siehe auch

Document.selectedStyleSheetSet Document.preferredStyleSheetSet Document.styleSheetSets Document.enableStyleSheetsForSet() Document.styleSheets StyleSheet.disabled StyleSheet.parentStyleSheet