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, gibt an, dass die Zielressource ein alternatives Stylesheet ist. Die Angabe von alternativen Stylesheets auf einer Webseite ermöglicht es den Benutzern, mehrere Versionen einer Seite basierend auf ihren Bedürfnissen oder Vorlieben anzuzeigen.
Hinweis:
Diese Funktion wird in Browsern ohne Erweiterung nicht gut unterstützt. Um alternative Darstellungen anzubieten, die mit den bestehenden Vorlieben eines Benutzers funktionieren, siehe die CSS Media Features prefers-color-scheme und prefers-contrast.
Firefox ermöglicht es Benutzern, alternative Stylesheets über das Untermenü Ansicht > Seitenstil auszuwählen, welches 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 Benutzern den Wechsel von Styles zu ermöglichen.
Beispiele
Alternativen Stylesheets angeben
Alternative Stylesheets werden mittels <link>-Elementen mit rel="alternate stylesheet" und title="…"-Attributen 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" vorausgewählt ist. Wenn der Benutzer einen anderen Stil auswählt, wird die Seite sofort mit diesem Stylesheet neu gerendert.
Egal welcher Stil ausgewählt ist, die Regeln aus dem reset.css-Stylesheet werden 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"mittitle="…", angegeben): wird standardmäßig angewendet, aber deaktiviert, wenn ein alternatives Stylesheet ausgewählt wird. Es kann nur ein bevorzugtes Stylesheet geben, daher führt das Bereitstellen von Stylesheets mit unterschiedlichen Titelattributen dazu, dass einige ignoriert werden. - Alternate (
rel="alternate stylesheet", mittitle="…"angegeben): standardmäßig deaktiviert, kann ausgewählt werden.
In Fällen, in denen ein Stylesheet-Menü existiert, wenn Stylesheets mit einem title-Attribut im <link rel="stylesheet"> oder <style>-Element referenziert werden, wird der Titel zu einer der dem Benutzer angebotenen Auswahlmöglichkeiten. Stylesheets, die mit demselben title verlinkt sind, sind Teil derselben Auswahl. Style-Sheets, die ohne title-Attribut verlinkt werden, werden immer angewendet.
Verwenden Sie rel="stylesheet", um auf den Standardstil zu verlinken, und rel="alternate stylesheet", um auf alternative Stylesheets zu verlinken. Dadurch wird dem Browser mitgeteilt, welches Stylesheet standardmäßig ausgewählt werden soll, und diese Standardeinstellung wird in Browsern angewendet, die alternative Stylesheets nicht unterstützen.
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 |