Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

move rel="alternate stylesheet" from CSS guide to HTML attribute #38146

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 44 additions & 21 deletions files/en-us/_redirects.txt

Large diffs are not rendered by default.

42 changes: 21 additions & 21 deletions files/en-us/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -75809,27 +75809,6 @@
"webinista"
]
},
"Web/CSS/Alternative_style_sheets": {
"modified": "2020-10-15T21:15:55.661Z",
"contributors": [
"wbamberg",
"mfuji09",
"sideshowbarker",
"chrisdavidmills",
"mfluehr",
"Nickolay",
"r-o-b",
"Sebastianz",
"teoli",
"Sheppy",
"justinpotts",
"minitech",
"Mgjbot",
"Kohei",
"Sevenspade",
"DBaron"
]
},
"Web/CSS/At-rule": {
"modified": "2020-11-13T09:49:20.788Z",
"contributors": [
Expand Down Expand Up @@ -91394,6 +91373,27 @@
"perfmattersconf"
]
},
"Web/HTML/Attributes/rel/alternate_stylesheet": {
"modified": "2020-10-15T21:15:55.661Z",
"contributors": [
"wbamberg",
"mfuji09",
"sideshowbarker",
"chrisdavidmills",
"mfluehr",
"Nickolay",
"r-o-b",
"Sebastianz",
"teoli",
"Sheppy",
"justinpotts",
"minitech",
"Mgjbot",
"Kohei",
"Sevenspade",
"DBaron"
]
},
"Web/HTML/Attributes/rel/dns-prefetch": {
"modified": "2020-10-15T22:29:03.654Z",
"contributors": ["sideshowbarker"]
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/stylesheet/disabled/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The **`disabled`** property of the
applying to the document.

A style sheet may be disabled by manually setting this property to `true` or
if it's an inactive [alternative style sheet](/en-US/docs/Web/CSS/Alternative_style_sheets). Note that `disabled === false` does not guarantee the style
if it's an inactive [alternative style sheet](/en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet). Note that `disabled === false` does not guarantee the style
sheet is applied (it could be removed from the document, for instance).

## Value
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/svgstyleelement/title/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ browser-compat: api.SVGStyleElement.title
{{APIRef("SVG")}}

The **`SVGStyleElement.title`** property is a string corresponding to the [`title`](/en-US/docs/Web/SVG/Element/style#title) attribute of the given SVG style element.
It may be used to select between [alternate style sheets](/en-US/docs/Web/CSS/Alternative_style_sheets).
It may be used to select between [alternate style sheets](/en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet).

## Value

Expand Down
55 changes: 0 additions & 55 deletions files/en-us/web/css/alternative_style_sheets/index.md

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
title: Alternate stylesheet
slug: Web/HTML/Attributes/rel/alternate_stylesheet
page-type: html-attribute-value
browser-compat: html.elements.link.rel.alternate_stylesheet
---

{{HTMLSidebar}}

The **`alternate stylesheet`** keyword pair, when used as a value for the [`rel`](/en-US/docs/Web/HTML/Element/link#rel) attribute of the {{HTMLElement("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](/en-US/docs/Web/CSS/@media#media_features) {{cssxref("@media/prefers-color-scheme","prefers-color-scheme")}} and {{cssxref("@media/prefers-contrast","prefers-contrast")}}.

Firefox lets users select alternate {{glossary("stylesheet", "stylesheets")}} using the _View > Page Style_ submenu, which displays the values of the [`title`](/en-US/docs/Web/HTML/Global_attributes/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.

## Examples

### Specifying alternate stylesheets

Alternate stylesheets are specified using {{HTMLElement("link")}} elements with `rel="alternate stylesheet"` and `title="…"` attributes. For example:

```html
<link href="reset.css" rel="stylesheet" />

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
```

In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the Firefox _Page Style_ submenu with "Default Style" pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.

No matter what style is selected, the rules from the `reset.css` stylesheet will always be applied.

### Try it out

[Try a working example here](https://mdn.github.io/css-examples/alt-style-sheets/).

## Details

Any stylesheet in a document falls into one of the following categories:

- **Persistent** (has `rel="stylesheet"`, no `title=""`): always applies to the document.
- **Preferred** (has `rel="stylesheet"`, with `title="…"` specified): applied by default, but {{domxref("StyleSheet.disabled", "disabled", "", 1)}} if an alternate stylesheet is selected. **There can only be one preferred stylesheet**, so providing stylesheets with different title attributes will cause some of them to be ignored.
- **Alternate** (`rel="alternate stylesheet"`, with `title="…"` specified): disabled by default, can be selected.

In cases where a stylesheet menu exists, when style sheets are referenced with a `title` attribute on the {{HTMLElement("link", "&lt;link rel=\"stylesheet\"&gt;")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same [`title`](/en-US/docs/Web/HTML/Global_attributes/title) are part of the same choice. Style sheets linked without a `title` attribute are always applied.

Use `rel="stylesheet"` to link to the default style, and `rel="alternate stylesheet"` to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- [CSS](/en-US/docs/Web/CSS)
- [Using dynamic styling information](/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information)
2 changes: 1 addition & 1 deletion files/en-us/web/html/attributes/rel/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ The `rel` attribute has no default value. If the attribute is omitted or if none

- : Indicates an alternate representation of the current document. Valid for {{htmlelement('link')}}, {{htmlelement('a')}}, and {{htmlelement('area')}}, the meaning depends on the values of the other attributes.

- With the [`stylesheet`](#stylesheet) keyword on a `<link>`, it creates an [alternate stylesheet](/en-US/docs/Web/CSS/Alternative_style_sheets).
- With the [`stylesheet`](#stylesheet) keyword on a `<link>`, it creates an [alternate stylesheet](/en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet).

```html
<!-- a persistent style sheet -->
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/html/element/link/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib

- `title`
- : The `title` attribute has special semantics on the `<link>` element.
When used on a `<link rel="stylesheet">` it defines a [default or an alternate stylesheet](/en-US/docs/Web/CSS/Alternative_style_sheets).
When used on a `<link rel="stylesheet">` it defines a [default or an alternate stylesheet](/en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet).
- `type`
- : This attribute is used to define the type of the content linked to.
The value of the attribute should be a MIME type such as **text/html**, **text/css**, and so on.
Expand Down Expand Up @@ -310,7 +310,7 @@ To include a stylesheet in a page, use the following syntax:

### Providing alternative stylesheets

You can also specify [alternative style sheets](/en-US/docs/Web/CSS/Alternative_style_sheets).
You can also specify [alternative style sheets](/en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet).

The user can choose which style sheet to use by choosing it from the **View > Page Style** menu.
This provides a way for users to see multiple versions of a page.
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/html/element/style/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
- `nonce`
- : A cryptographic nonce (number used once) used to allow inline styles in a [style-src Content-Security-Policy](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src). The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
- `title`
- : This attribute specifies [alternative style sheet](/en-US/docs/Web/CSS/Alternative_style_sheets) sets.
- : This attribute specifies [alternative style sheet](/en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet) sets.

### Deprecated attributes

Expand Down Expand Up @@ -200,4 +200,4 @@ In this example we build on the previous one, including a `media` attribute on t
## See also

- The {{HTMLElement("link")}} element, which allows us to apply external stylesheets to a document.
- [Alternative Style Sheets](/en-US/docs/Web/CSS/Alternative_style_sheets)
- [Alternative Style Sheets](/en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet)
2 changes: 1 addition & 1 deletion files/en-us/web/svg/element/style/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ svg {
- : This attribute defines to which {{cssxref('@media', 'media')}} the style applies.
_Value type_: [**`<media-query-list>`**](/en-US/docs/Web/CSS/@media#syntax); _Default value_: `all`; _Animatable_: **no**
- {{SVGAttr("title")}}
- : This attribute is the title of the style sheet which can be used to switch between [alternate style sheets](/en-US/docs/Web/CSS/Alternative_style_sheets).
- : This attribute is the title of the style sheet which can be used to switch between [alternate style sheets](/en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet).
_Value type_: [**`<string>`**](/en-US/docs/Web/CSS/string); _Default value_: _none_; _Animatable_: **no**

## Usage context
Expand Down
Loading