JavaScript Document lastStyleSheetSet Property

What You’ll Learn

Document.lastStyleSheetSet is a deprecated, non-standard instance property that returns the last enabled style sheet set name. Learn how it relates to selectedStyleSheetSet, when it is null, how to feature-detect it, and what to use instead for themes.

Introduction

Years ago, HTML offered alternate stylesheets with <link rel="stylesheet" title="..."> and rel="alternate stylesheet". Browsers could switch among named “style sheet sets.” Document APIs like selectedStyleSheetSet and lastStyleSheetSet exposed that switching.

MDN: lastStyleSheetSet returns the last enabled style sheet set. Its value changes whenever document.selectedStyleSheetSet is changed. If the current set has never been changed that way, the value is null.

Related Document tutorials: adoptedStyleSheets, documentElement, Document constructor.

Understanding Document.lastStyleSheetSet

An instance property from the legacy style sheet set API.

• Value — name of the last enabled set, or null if selectedStyleSheetSet was never changed (MDN).
• Updates — when document.selectedStyleSheetSet changes (MDN).
• Does not update — when document.enableStyleSheetsForSet() is called (MDN).
• Status — Deprecated and Non-standard (MDN).
• Support — often missing; always feature-detect.

📝 Syntax

document.lastStyleSheetSet

Value

A string naming the style sheet set most recently set, or null if selectedStyleSheetSet has not been changed (MDN).

MDN example

let lastSheetSet = document.lastStyleSheetSet;

if (!lastSheetSet) {
  lastSheetSet = "Style sheet not yet changed";
} else {
  console.log(`The last style sheet set is: ${lastSheetSet}`);
}

⚖️ Legacy Style Sheet Set APIs vs Modern Themes

Examples Gallery

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

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

lastStyleSheetSet supported? false

if ("lastStyleSheetSet" in document) {
  console.log(document.lastStyleSheetSet);
} else {
  console.log("Property not available in this browser");
}

Property not available in this browser

let lastSheetSet =
  "lastStyleSheetSet" in document
    ? document.lastStyleSheetSet
    : null;

if (!lastSheetSet) {
  lastSheetSet = "Style sheet not yet changed";
} else {
  console.log(`The last style sheet set is: ${lastSheetSet}`);
}

console.log(lastSheetSet);

Style sheet not yet changed

function reportStyleSheetSets() {
  if (!("lastStyleSheetSet" in document)) {
    return "Style sheet set API not supported";
  }
  return {
    selected: document.selectedStyleSheetSet,
    last: document.lastStyleSheetSet
  };
}

console.log(reportStyleSheetSets());

Style sheet set API not supported

function toggleTheme() {
  document.documentElement.classList.toggle("dark");
  const isDark = document.documentElement.classList.contains("dark");
  console.log("theme:", isDark ? "dark" : "light");
}

toggleTheme();

theme: dark

🚀 Common Use Cases

• Legacy migration — find old alternate-stylesheet switchers.
• Feature detection — decide whether a polyfill/UI path is needed.
• Debugging old Firefox UIs — inspect last selected set where still present.
• Teaching history — compare style sheet sets with modern theme classes.
• Do not use for new themes — prefer CSS / classList.
• Docs / audits — flag deprecated API usage in code reviews.

📝 Notes

• MDN: Deprecated and Non-standard — both banners shown above.
• Updates when selectedStyleSheetSet changes; not when enableStyleSheetsForSet() is called (MDN).
• Often unavailable in Chromium and other modern engines.
• Prefer class-based themes or adoptedStyleSheets for new work.
• Related: adoptedStyleSheets, lastModified, documentElement, Document constructor.

💡 Best Practices