Alternative style sheets
The rel="alternate stylesheet" attribute for the <link> HTML element offers an alternative style option to users. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The rel="alternate stylesheet" attribute for the <link> HTML element offers an alternative style option to users. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | | 3 | | 18 | | |
- This feature was removed in a later browser version (48)
- This feature was removed in a later browser version (48)
Syntax
<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
Why it is rare
Explain why alternate stylesheets exist but are less common than application-level theme toggles.
Use it carefully
Reserve alternate stylesheets for documents that genuinely need named style variants.
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
Powered by web-features