JavaScript Document styleSheetSets Property

What You’ll Learn

Document.styleSheetSets is a deprecated read-only instance property that returns a live list of available style sheet set names. Learn how MDN builds the list from styleSheets titles, populate a theme picker UI, compare with related set properties, and modern alternatives.

Introduction

Legacy pages with multiple alternate stylesheets needed a way to list every named theme the user could pick. document.styleSheetSets exposed those names as a live list so scripts could build menus or radio buttons.

MDN: the styleSheetSets read-only property returns a live list of all of the currently-available style sheet sets.

Related Document tutorials: selectedStyleSheetSet, preferredStyleSheetSet, lastStyleSheetSet, styleSheets.

Understanding Document.styleSheetSets

A read-only instance property from the alternate stylesheet era. MDN marks it deprecated and non-standard.

• Value — live list of available style sheet set name strings (MDN).
• Construction — from styleSheets titles, in sheet order; duplicates dropped case-sensitively (MDN Notes).
• Sheets without title — omitted from the list (MDN Notes).
• Switch active set — use selectedStyleSheetSet, not this list.
• Status — Deprecated and Non-standard (MDN).

📝 Syntax

document.styleSheetSets

Value

A list of style sheet sets that are available (MDN).

MDN: populate a list UI

const list = document.getElementById("sheetList");
const sheets = document.styleSheetSets;

list.textContent = "";

for (const sheet of sheets) {
  const item = document.createElement("li");
  item.textContent = sheet;
  list.appendChild(item);
}

⚖️ Style Sheet Set API Family

Examples Gallery

Examples follow MDN Document: styleSheetSets. Many browsers will report the property as missing—that is expected.

const supported = "styleSheetSets" in document;
console.log("styleSheetSets supported?", supported);

styleSheetSets supported? false

if ("styleSheetSets" in document) {
  for (const name of document.styleSheetSets) {
    console.log(name);
  }
} else {
  console.log("Property not available");
}

Property not available

const list = document.getElementById("sheetList");
const sheets = document.styleSheetSets;

list.textContent = "";

for (const sheet of sheets) {
  const item = document.createElement("li");
  item.textContent = sheet;
  list.appendChild(item);
}

<ul id="sheetList"> gets one <li> per set name

function reportSets() {
  if (!("styleSheetSets" in document)) {
    return "Style sheet set API not supported";
  }
  const available = [...document.styleSheetSets];
  return {
    available,
    selected: document.selectedStyleSheetSet
  };
}

console.log(reportSets());

Style sheet set API not supported

const themes = ["light", "dark", "high-contrast"];

themes.forEach((theme) => {
  const btn = document.createElement("button");
  btn.textContent = theme;
  btn.addEventListener("click", () => {
    document.documentElement.dataset.theme = theme;
    console.log("theme:", theme);
  });
  document.body.appendChild(btn);
});

theme: dark

🚀 Common Use Cases

• Legacy theme menus — populate radio buttons with set names.
• Code audits — find pages still reading styleSheetSets.
• Migration — map old set names to new CSS theme tokens.
• Teaching — explain how alternate stylesheets worked.
• Do not use for new pickers — define themes in app config.
• Pair with selectedStyleSheetSet — list options, then assign active set (legacy only).

📝 Notes

• MDN: Deprecated and Non-standard — both banners shown above.
• MDN Notes: list built from styleSheets titles; sheets without titles skipped; duplicates dropped case-sensitively.
• Live list — changes when stylesheets are added or removed.
• Often unavailable in Chromium and other modern engines.
• Related: selectedStyleSheetSet, styleSheets, adoptedStyleSheets.

💡 Best Practices