JavaScript Document preferredStyleSheetSet Property

What You’ll Learn

Document.preferredStyleSheetSet is a deprecated, non-standard instance property that returns the page author’s preferred style sheet set name, or the empty string when none is defined. Learn how it differs from selectedStyleSheetSet and lastStyleSheetSet, and what to use instead for themes.

Introduction

Years ago, HTML offered alternate stylesheets with <link rel="stylesheet" title="..."> and rel="alternate stylesheet". The page author could mark one named set as the default. preferredStyleSheetSet exposes that author-chosen default.

MDN: the property returns the preferred style sheet set as set by the page author. This is determined from the order of style sheet declarations and the Default-Style HTTP header. If there isn’t a preferred style sheet set defined by the author, the empty string ("") is returned.

Related Document tutorials: lastStyleSheetSet, adoptedStyleSheets, documentElement, Document constructor.

Understanding Document.preferredStyleSheetSet

A read-only instance property from the legacy style sheet set API.

• Value — preferred set name string, or "" if none defined (MDN).
• Read-only — reflects author markup / headers; not for assigning themes.
• Source — stylesheet order and Default-Style HTTP header (MDN).
• Status — Deprecated and Non-standard (MDN).
• Support — often missing; always feature-detect.

📝 Syntax

document.preferredStyleSheetSet

Value

A string naming the author’s preferred style sheet set, or "" when no preferred set is defined (MDN).

MDN example

if (document.preferredStyleSheetSet) {
  console.log(
    `The preferred style sheet set is: ${document.preferredStyleSheetSet}`
  );
} else {
  console.log("There is no preferred style sheet.");
}

Example markup that defines sets

<link rel="stylesheet" href="default.css" title="Default">
<link rel="alternate stylesheet" href="dark.css" title="Dark">
<link rel="alternate stylesheet" href="large.css" title="Large print">

⚖️ Legacy Style Sheet Set Properties

Examples Gallery

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

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

preferredStyleSheetSet supported? false

if ("preferredStyleSheetSet" in document) {
  const preferred = document.preferredStyleSheetSet;
  console.log(preferred === "" ? "(empty — no author default)" : preferred);
} else {
  console.log("Property not available in this browser");
}

Property not available in this browser

if ("preferredStyleSheetSet" in document) {
  if (document.preferredStyleSheetSet) {
    console.log(
      `The preferred style sheet set is: ${document.preferredStyleSheetSet}`
    );
  } else {
    console.log("There is no preferred style sheet.");
  }
}

There is no preferred style sheet.

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

console.log(reportStyleSheetSets());

Style sheet set API not supported

document.getElementById("theme-btn").addEventListener("click", () => {
  document.documentElement.classList.toggle("dark");
  const isDark = document.documentElement.classList.contains("dark");
  console.log("theme:", isDark ? "dark" : "light");
});

theme: dark
theme: light

🚀 Common Use Cases

• Legacy audits — detect whether old sites declared an author-preferred theme.
• Migration planning — map preferredStyleSheetSet to a CSS class default.
• Teaching history — explain alternate stylesheets vs modern themes.
• Feature detection — branch away from style sheet set APIs when missing.
• Do not use for new themes — prefer CSS / classList.
• Code reviews — flag deprecated API usage in maintenance work.

📝 Notes

• MDN: Deprecated and Non-standard — both banners shown above.
• Returns "", not null, when no author preferred set exists (MDN).
• Often unavailable in Chromium and other modern engines.
• Pair learning with lastStyleSheetSet and selectedStyleSheetSet for full legacy context.
• Prefer class-based themes or adoptedStyleSheets for new work.

💡 Best Practices