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 2 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
5 changes: 3 additions & 2 deletions files/en-us/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@
/en-US/docs/Addons/Add-on_guidelines https://extensionworkshop.com/documentation/publish/add-on-policies/
/en-US/docs/Addons/Working_with_AMO /en-US/docs/Mozilla/Add-ons
/en-US/docs/Advanced_styling_for_HTML_forms /en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling
/en-US/docs/Alternative_style_sheets /en-US/docs/Web/CSS/Alternative_style_sheets
/en-US/docs/Alternative_style_sheets /en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet
/en-US/docs/An_Overview_of_Accessible_Web_Applications_and_Widgets /en-US/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
/en-US/docs/An_overview_of_NSS_Internals https://firefox-source-docs.mozilla.org/security/nss/index.html
/en-US/docs/Animation /en-US/docs/Web/API/Animation
Expand Down Expand Up @@ -452,7 +452,7 @@
/en-US/docs/CSS/@supports /en-US/docs/Web/CSS/@supports
/en-US/docs/CSS/Adjacent_sibling_selectors /en-US/docs/Web/CSS/Next-sibling_combinator
/en-US/docs/CSS/Alias /en-US/docs/Web/CSS/cursor
/en-US/docs/CSS/Alternative_style_sheets /en-US/docs/Web/CSS/Alternative_style_sheets
/en-US/docs/CSS/Alternative_style_sheets /en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet
/en-US/docs/CSS/At-rule /en-US/docs/Web/CSS/At-rule
/en-US/docs/CSS/Attribute_selectors /en-US/docs/Web/CSS/Attribute_selectors
/en-US/docs/CSS/Aural /en-US/docs/Web/CSS/@media/aural
Expand Down Expand Up @@ -11813,6 +11813,7 @@
/en-US/docs/Web/CSS/Adjacent_sibling_selectors /en-US/docs/Web/CSS/Next-sibling_combinator
/en-US/docs/Web/CSS/Alias /en-US/docs/Web/CSS/cursor
/en-US/docs/Web/CSS/All_About_The_Containing_Block /en-US/docs/Web/CSS/CSS_display/Containing_block
/en-US/docs/Web/CSS/Alternative_style_sheets /en-US/docs/Web/HTML/Attributes/rel/Alternate_stylesheet
/en-US/docs/Web/CSS/Aural /en-US/docs/Web/CSS/@media/aural
/en-US/docs/Web/CSS/Block_formatting_context /en-US/docs/Web/CSS/CSS_display/Block_formatting_context
/en-US/docs/Web/CSS/CSS3_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
Expand Down
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
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
title: Alternative style sheets
slug: Web/CSS/Alternative_style_sheets
page-type: guide
title: Alternate stylesheet
slug: Web/HTML/Attributes/rel/alternate_stylesheet
page-type: html-attribute-value
browser-compat: html.elements.link.rel.alternate_stylesheet
---

{{CSSRef}}
{{HTMLSidebar}}

Specifying **alternative style sheets** in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.
The **`alternate stylesheet`** keyword pair for the [`rel`](/en-US/docs/Web/HTML/Element/link#rel) attribute of the {{HTMLElement("link")}} element indicates that the target resource an _alternative style sheet_. Specifying **alternative style sheets** in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.
estelle marked this conversation as resolved.
Show resolved Hide resolved

> [!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 the user select the stylesheet using the _View > Page Style_ submenu. Other browsers require an extension to enable this functionality. The web page can also provide its own user interface to let the user switch styles.
Firefox lets the user select the {{glossary("stylesheet")}} 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 the user switch styles.
estelle marked this conversation as resolved.
Show resolved Hide resolved

## An example: specifying the alternative stylesheets
estelle marked this conversation as resolved.
Show resolved Hide resolved

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

```html
<link href="reset.css" rel="stylesheet" />
Expand All @@ -28,7 +28,7 @@ The alternate stylesheets are commonly specified using a {{HTMLElement("link")}}

In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the _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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is Firefox-specific. Make that clear?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Follow-up — looking at the BCD table, this is now only supported in Firefox, although it is still a standard. This might affect how you decide to update this wording, if at all.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this one is, so added.

estelle marked this conversation as resolved.
Show resolved Hide resolved

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

### Try it out

Expand All @@ -42,7 +42,7 @@ Any stylesheet in a document falls into one of the following categories:
- **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.

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` are part of the same choice. Style sheets linked without a `title` attribute are always applied.
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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, Firefox-specific, in terms of how this is offered to the user?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extensions exists, so edited to reflect that.

estelle marked this conversation as resolved.
Show resolved Hide resolved

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.

Expand All @@ -53,3 +53,8 @@ Use `rel="stylesheet"` to link to the default style, and `rel="alternate stylesh
## 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