Limited support Use with care and provide a fallback when broad support matters.

Alternative style sheets

The alternate stylesheet keyword pair, when used as a value for the rel attribute of the <link> element, indicates that the target resource is an alternative style sheet. Specifying alternative style sheets in a web page allows users to see multiple versions of a page based on their needs or preferences.

Note: This feature is not well supported in browsers without an extension. To offer alternative presentations that work with a user's existing preferences, see the CSS media features prefers-color-scheme and prefers-contrast.

Firefox lets users select alternate stylesheets using the View > Page Style submenu, which displays the values of the title attributes. Other browsers require an extension to enable this functionality. The web page can also provide its own user interface to let users switch styles.

Other

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
html.elements.link.rel.alternate_stylesheet
1
3
18
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (48)
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (48)

Syntax

HTML 
<link rel="stylesheet" href="default.css" title="デフォルト">
<link rel="alternate stylesheet" href="dark.css" title="ダーク">
<link rel="alternate stylesheet" href="large.css" title="大きい文字">

Live demo

Style set concept

Introduce the idea of named alternate stylesheets for a document.

PreviewFullscreen

Why it is rare

Explain why alternate stylesheets exist but are less common than application-level theme toggles.

PreviewFullscreen

Use it carefully

Reserve alternate stylesheets for documents that genuinely need named style variants.

PreviewFullscreen

Use cases

  • Use Alternative style sheets

    Use Alternative style sheets when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Alternative style sheets to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Alternative style sheets in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Alternative style sheets supports the intended task without making the page harder to perceive, understand, or operate.

Related links