rel="alternate stylesheet" HTML-Attributwert
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Das Schlüsselwortpaar alternate stylesheet, wenn es als Wert für das rel-Attribut des <link>-Elements verwendet wird, zeigt an, dass die Zielressource ein alternatives Stylesheet ist. Die Angabe von alternativen Stylesheets auf einer Webseite ermöglicht es Benutzern, mehrere Versionen einer Seite basierend auf ihren Bedürfnissen oder Vorlieben zu sehen.
Hinweis:
Diese Funktion wird in Browsern ohne Erweiterung nicht gut unterstützt. Um alternative Präsentationen anzubieten, die mit den vorhandenen Präferenzen eines Benutzers funktionieren, siehe die CSS Medienmerkmale prefers-color-scheme und prefers-contrast.
Firefox ermöglicht es Benutzern, alternative Stylesheets über das Untermenü Ansicht > Seitenstil auszuwählen, das die Werte der title-Attribute anzeigt. Andere Browser erfordern eine Erweiterung, um diese Funktionalität zu aktivieren. Die Webseite kann auch ihre eigene Benutzeroberfläche bereitstellen, um es den Benutzern zu ermöglichen, Styles zu wechseln.
Beispiele
Alternativen Stylesheets angeben
Alternative Stylesheets werden mithilfe von <link>-Elementen mit den Attributen rel="alternate stylesheet" und title="…" angegeben. Zum Beispiel:
<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 diesem Beispiel werden die Styles "Default Style", "Fancy" und "Basic" im Firefox-Untermenü Seitenstil aufgelistet, wobei "Default Style" vorab ausgewählt ist. Wenn der Benutzer einen anderen Stil auswählt, wird die Seite sofort mit diesem Stylesheet neu gerendert.
Unabhängig davon, welcher Stil ausgewählt ist, werden die Regeln aus dem reset.css-Stylesheet immer angewendet.
Probieren Sie es aus
Details
Jedes Stylesheet in einem Dokument fällt in eine der folgenden Kategorien:
- Persistent (hat
rel="stylesheet", keintitle=""): wird immer auf das Dokument angewendet. - Preferred (hat
rel="stylesheet", mit angegebenemtitle="…"): wird standardmäßig angewendet, aber deaktiviert, wenn ein alternatives Stylesheet ausgewählt wird. Es kann nur ein bevorzugtes Stylesheet geben, sodass die Bereitstellung von Stylesheets mit unterschiedlichen Titelattributen dazu führen wird, dass einige von ihnen ignoriert werden. - Alternate (
rel="alternate stylesheet", mit angegebenemtitle="…"): standardmäßig deaktiviert, kann ausgewählt werden.
In Fällen, in denen ein Stylesheet-Menü existiert, wird der Titel zu einer der dem Benutzer angebotenen Optionen, wenn Stylesheets über ein title-Attribut am <link rel="stylesheet">- oder <style>-Element referenziert werden. Stylesheets, die mit demselben title verlinkt sind, gehören zur gleichen Auswahl. Stylesheets, die ohne ein title-Attribut verlinkt sind, werden immer angewendet.
Verwenden Sie rel="stylesheet", um auf das Standard-Stylesheet zu verlinken, und rel="alternate stylesheet", um auf alternative Stylesheets zu verlinken. Dies teilt dem Browser mit, welcher Style-Titel standardmäßig ausgewählt werden soll und lässt diese Standardauswahl in Browsern, die alternative Stylesheets nicht unterstützen, gelten.
Spezifikationen
| Spezifikation |
|---|
| 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 |