Just when one thinks one knows the HTML specification, a little‑known feature jumps out at you. In this instance, it is the disabled attribute on <link rel="stylesheet">. It’s one of those web platform features that feels almost forgotten, but it has some surprising potential uses.

How I stumbled upon it

While digging into the HTML spec for a book I am writing, I noticed that link elements with rel="stylesheet" may carry a Boolean disabled attribute. According to the spec:

The disabled attribute must only be specified on link elements that have a rel attribute containing the stylesheet keyword. Whenever the attribute is removed, the link element’s “explicitly enabled” flag is set to true.

Specification reference

In practice, this means you can load a stylesheet in a disabled state and enable it later with JavaScript:

Array.from(document.querySelectorAll("link[disabled]")).forEach((link) => link.removeAttribute("disabled"));

Only when the attribute is removed should the browser fetch and apply the stylesheet.

Why might this be useful?

Because the attribute controls when a stylesheet is actually fetched and applied, it can open the door to several practical scenarios.

Potential use cases include:

• Lazy loading: Load a stylesheet only when its component is about to enter the viewport (for example, with IntersectionObserver).

• Theming: Toggle different stylesheets for light or dark mode.

• Performance control: Delay non‑critical styles until after the page becomes interactive.

Current state of browser support

All major browsers support the attribute, but their behavior differs.

• Firefox

  • Fetches the CSS on page load.

  • Does not apply the CSS initially.

  • When enabled, it applies the stylesheet and loads any assets referenced in the CSS.

• Chromium

  • Fetches the CSS on page load.

  • Does not apply the CSS initially.

  • When enabled, it appears to fetch the CSS again (likely from cache), then applies the CSS and loads referenced assets.

• Safari

  • Does not fetch the CSS on page load.

  • When enabled, it fetches and applies the stylesheet and any referenced assets.

  • This matches the specification most closely.

Work in progress

Fixes are under discussion in both Chromium and Firefox to align behavior across browsers.

• Chromium issue

• Firefox bug

Watch the demo

I recorded a video that walks through this discovery, demonstrates the behavior across browsers, and explains the implications for developers.

Closing thoughts

Small details like the disabled attribute remind us that the web platform still holds underused features waiting to be (re)discovered. Understanding them not only deepens our knowledge of the platform but also opens up new opportunities for practical, creative solutions.

Comments or questions? Drop them on YouTube.

The Spotlight

This week, I’m spotlighting Chris Mills for his unrelenting dedication to the web platform and for working tirelessly to ensure the quality of documentation on the web. 🤘 Learn more at MILLSdocs.

You can find the code on GitHub. You can also find the documentation for the disabled attribute on MDN Web Docs.

Find value in the work I do? You can support the work by buying me a coffee. Thank you! ✌️