Signatur
Beschreibung
document.styleSheetSets gibt eine aktuelle DOMStringList mit den Namen aller Stylesheet-Sets zurück, die im Dokument gerade verfügbar sind. Ein Stylesheet-Set besteht aus allen Stylesheets mit demselben title-Attribut. Solche Stylesheets werden meist über <link rel="stylesheet" title="…"> oder <link rel="alternate stylesheet" title="…"> eingebunden.
Die Eigenschaft gehörte zu einer kleinen API für wechselbare Designs, zum Beispiel „Hell“, „Dunkel“ oder „Hoher Kontrast“. Zur API gehörten außerdem selectedStyleSheetSet, preferredStyleSheetSet, lastStyleSheetSet und enableStyleSheetsForSet(). Damit ließ sich ein Design-Umschalter bauen, ohne die Stylesheets einzeln durchzugehen.
„Aktuell“ bedeutet: Die Liste zeigt immer den momentanen Zustand. Kommen Stylesheets mit neuen Titeln hinzu oder werden welche entfernt, ändert sich der Inhalt der Liste, auch wenn Sie noch eine ältere Referenz darauf halten.
Die API wurde nie standardisiert und nur von Firefox umgesetzt. Heute gibt es sie in keinem aktuellen Browser mehr. Für neuen Code sollten Sie die Sets selbst aus document.styleSheets bzw. den <link>-Elementen ermitteln und über disabled ein- und ausschalten (siehe Beispiele).
Rückgabewert
DOMStringList mit den Titeln aller verfügbaren Stylesheet-Sets. Stylesheets ohne Titel zählen nicht dazu. In aktuellen Browsern ist die Eigenschaft nicht vorhanden, der Zugriff ergibt dann undefined.Beispiele
Verfügbare Sets auflisten (mit Funktionsprüfung)
// HTML:
// <link rel="stylesheet" href="hell.css" title="Hell">
// <link rel="alternate stylesheet" href="dunkel.css" title="Dunkel">
if ('styleSheetSets' in document) {
const sets = document.styleSheetSets;
for (let i = 0; i < sets.length; i++) {
console.log(`Set ${i}: ${sets.item(i)}`);
}
} else {
console.log('styleSheetSets wird nicht unterstützt');
}Moderner Ersatz: Sets aus den link-Elementen ermitteln
const getStyleSheetSets = () => {
const links = document.querySelectorAll(
'link[rel~="stylesheet"][title]'
);
// Titel ohne Doppelungen, Reihenfolge wie im Dokument
return [...new Set([...links].map((link) => link.title))];
};
console.log(getStyleSheetSets());Design-Umschalter ohne die veraltete API
const enableSet = (name) => {
document
.querySelectorAll('link[rel~="stylesheet"][title]')
.forEach((link) => {
// Erst aktivieren, dann nach Titel filtern: bei alternativen
// Stylesheets reagieren manche Browser erst nach einem Umschalten
link.disabled = true;
link.disabled = link.title !== name;
});
localStorage.setItem('theme', name);
};
// Gespeichertes Design wiederherstellen
const saved = localStorage.getItem('theme');
if (saved) enableSet(saved);
document.querySelector('#theme-select')?.addEventListener('change', (e) => {
enableSet(e.target.value);
});// Wichtig · Fallstricke
- Veraltet und nicht standardisiert: Die Eigenschaft gab es nur in Firefox. Ab Firefox 64 ist sie entfernt. Chrome, Safari und Edge haben sie nie unterstützt. Verwenden Sie sie nicht in Produktionscode.
- Prüfen Sie vor einem Zugriff mit
'styleSheetSets' in document, ob die Eigenschaft vorhanden ist. Ein direkter Aufruf wiedocument.styleSheetSets.lengthwirft in aktuellen Browsern einenTypeError. - Stylesheets ohne
titlesind „dauerhaft“ (persistent), gehören zu keinem Set und tauchen deshalb nicht in der Liste auf. - Da die Liste aktuell gehalten wird, kann sich ihre Länge ändern, während Sie in einer Schleife darüber laufen. Kopieren Sie sie bei Bedarf vorher mit
Array.from(). - Einen eingebauten Menüpunkt zum Wechseln alternativer Stylesheets gibt es nur noch in Firefox (Ansicht → Webseiten-Stil). Für Hell- und Dunkel-Designs eignen sich heute meist CSS-Media-Queries mit
prefers-color-schemeoder CSS-Variablen besser.