rel="alternate stylesheet"
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das alternate stylesheet Schlüsselwortpaar, wenn es als Wert für das rel-Attribut des <link>-Elements verwendet wird, zeigt an, dass die Zielressource ein alternatives Stylesheet ist. Das Angeben von alternativen Stylesheets auf einer Webseite ermöglicht es Benutzern, je nach ihren Bedürfnissen oder Vorlieben, verschiedene Versionen einer Seite zu sehen.
Hinweis:
Diese Funktion wird in Browsern ohne Erweiterung nicht gut unterstützt. Um alternative Präsentationen anzubieten, die mit den bestehenden Präferenzen eines Benutzers funktionieren, sehen Sie sich die CSS Medienfunktionen prefers-color-scheme und prefers-contrast an.
Firefox ermöglicht es Benutzern, alternative Stylesheets über das Untermenü Ansicht > Seitenstil auszuwählen, in dem die Werte der title-Attribute angezeigt werden. Andere Browser erfordern eine Erweiterung, um diese Funktionalität zu aktivieren. Die Webseite kann auch ihre eigene Benutzeroberfläche bereitstellen, um Benutzern den Wechsel der Styles zu ermöglichen.
Beispiele
Angabe von alternativen Stylesheets
Alternative Stylesheets werden durch <link>-Elemente mit den Attributen rel="alternate stylesheet" und `title="…"`` spezifiziert. 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.
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", mittitle="…"spezifiziert): wird standardmäßig angewendet, aber deaktiviert, wenn ein alternatives Stylesheet ausgewählt wird. Es kann nur ein bevorzugtes Stylesheet geben, daher werden Stylesheets mit unterschiedlichen Titelattributen dazu führen, dass einige von ihnen ignoriert werden. - Alternate (
rel="alternate stylesheet", mittitle="…"spezifiziert): standardmäßig deaktiviert, kann ausgewählt werden.
In Fällen, in denen ein Stylesheet-Menü existiert, wenn Stylesheets mit einem title-Attribut am <link rel="stylesheet"> oder <style>-Element referenziert werden, wird der Titel zu einer der angebotenen Auswahlmöglichkeiten für den Benutzer. Stylesheets, die mit demselben title verlinkt sind, sind Teil derselben Auswahl. Stylesheets, die ohne ein title-Attribut verlinkt sind, werden immer angewendet.
Verwenden Sie rel="stylesheet" für das Verknüpfen mit dem Standardstil und rel="alternate stylesheet" für das Verknüpfen mit alternativen Stylesheets. Dies teilt dem Browser mit, welcher Stylesheet-Titel standardmäßig ausgewählt werden sollte, und macht diese Standardauswahl in Browsern anwendbar, die alternative Stylesheets nicht unterstützen.
Spezifikationen
| 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 |