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, gibt an, dass es sich bei der Zielressource um ein alternatives Stylesheet handelt. Die Angabe von alternativen Stylesheets auf einer Webseite ermöglicht es den Benutzern, mehrere Versionen einer Seite entsprechend 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 media features 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 benötigen eine Erweiterung, um diese Funktionalität zu aktivieren. Die Webseite kann auch ihre eigene Benutzeroberfläche bereitstellen, damit Benutzer die Stile wechseln können.

Beispiele

Alternativ-Stylesheets angeben

Alternative Stylesheets werden mit <link>-Elementen mit den Attributen rel="alternate stylesheet" und title="…" angegeben. Zum Beispiel:

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 diesem Beispiel werden die Stile "Default Style", "Fancy" und "Basic" im Firefox-Menü Seitenstil aufgeführt, 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

Probieren Sie hier ein funktionierendes Beispiel aus.

Details

Jedes Stylesheet in einem Dokument fällt in eine der folgenden Kategorien:

Persistent (hat rel="stylesheet", kein title=""): wird immer auf das Dokument angewendet.
Preferred (hat rel="stylesheet", mit angegebenem title="…"): wird standardmäßig angewendet, aber deaktiviert, wenn ein alternatives Stylesheet ausgewählt wird. Es kann nur ein bevorzugtes Stylesheet geben, sodass das Bereitstellen von Stylesheets mit unterschiedlichen Titelattributen dazu führt, dass einige ignoriert werden.
Alternate (rel="alternate stylesheet", mit angegebenem title="…"): standardmäßig deaktiviert, kann ausgewählt werden.

In Fällen, in denen ein Stylesheet-Menü existiert, wird, wenn Stylesheets mit einem title-Attribut am <link rel="stylesheet">- oder <style>-Element referenziert werden, der Titel zu einer der Auswahlmöglichkeiten, die dem Benutzer angeboten 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 den Standardstil zu verlinken, und rel="alternate stylesheet", um auf alternative Stylesheets zu verlinken. Dies teilt dem Browser mit, welcher Stylesheet-Titel standardmäßig ausgewählt werden sollte, und lässt diese Standardauswahl in Browsern gelten, 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