rel="alternate stylesheet"
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
alternate stylesheet 关键字对在作为 rel 属性值用于 <link> 元素时，表示目标资源为替代样式表。在网页中指定替代样式表可让用户根据自身需求或偏好查看页面的多个版本。
备注：
该功能在未安装扩展的浏览器中支持不佳。若需提供与用户现有偏好兼容的替代呈现方式，参见 CSS prefers-color-scheme 和 prefers-contrast 媒体特性。
Firefox 允许用户通过视图 > 页面样式子菜单选择替代样式表，该菜单会显示 title 属性的值。其他浏览器需要安装扩展才能启用此功能。网页还可以提供自己的用户界面，让用户切换样式。
示例
提供替代样式表
替代样式表通过使用带有 rel="alternate stylesheet" 和 title="..." 属性的 <link> 标签指定。例如：
<link href="reset.css" rel="stylesheet" />
<link href="default.css" rel="stylesheet" title="默认样式" />
<link href="fancy.css" rel="alternate stylesheet" title="华丽" />
<link href="basic.css" rel="alternate stylesheet" title="基本" />
在此例中，页面样式菜单中会出现“默认样式”、“华丽”和“基本”的选项。“默认样式”默认选中。如果用户选择一个不同的样式，浏览器就使用用户选择的样式。
无论用户选择何种样式，reset.css 样式表中的规则都会始终应用。
试试看
细节
文档的样式表分为三类：
- 持久（具有
rel="stylesheet"，且没有title=""）：始终应用于文档。 - 首选（具有
rel="stylesheet"，且指定了title="…"）：默认应用，但如果选择了替代样式表，则会禁用。只能有一个首选样式表，因此提供具有不同标题属性的样式表会导致其中一些被忽略。 - 替代（
rel="alternate stylesheet"，且指定了title="…"）：默认禁用，可被选中。
当存在样式表菜单时，如果在 <link rel="stylesheet"> 或 <style> 元素上使用 title 属性引用样式表，则该标题将成为用户可选项之一。具有相同 title 的样式表属于同一选项。未指定 title 属性的样式表始终会被应用。
使用 rel="stylesheet" 链接到默认样式表，使用 rel="alternate stylesheet" 链接到替代样式表。这会告知浏览器应默认选择哪个样式表标题，并在不支持替代样式表的浏览器中应用该默认选择。
规范
| Specification |
|---|
| HTML # rel-alternate |
| HTML # the-link-is-an-alternative-stylesheet |
| HTML # attr-style-title |
| HTML # attr-meta-http-equiv-default-style |
| CSS Object Model (CSSOM) # css-style-sheet-collections |
浏览器兼容性
Loading…