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, mehrere Versionen einer Seite basierend auf ihren Bedürfnissen oder Vorlieben zu sehen.

Hinweis: Diese Funktion wird ohne eine Erweiterung in Browsern nicht gut unterstützt. Um alternative Darstellungen anzubieten, die mit den bestehenden Vorlieben eines Benutzers funktionieren, sehen Sie sich die CSS Media Features prefers-color-scheme und prefers-contrast an.

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, um Benutzern das Wechseln der Styles zu ermöglichen.

Beispiele

Alternative Stylesheets angeben

Alternative Stylesheets werden mit <link>-Elementen angegeben, die rel="alternate stylesheet" und title="…"-Attribute haben. 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 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

Probieren Sie hier ein funktionierendes Beispiel aus.

Details

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

Persistierend (hat rel="stylesheet", kein title=""): wird immer auf das Dokument angewendet.
Bevorzugt (hat rel="stylesheet", mit title="…" angegeben): 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 ignoriert werden.
Alternativ (rel="alternate stylesheet", mit title="…" angegeben): 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 vom Benutzer angebotenen Auswahlmöglichkeiten. Stylesheets, die mit demselben title verknüpft sind, sind Teil derselben Auswahl. Stylesheets, die ohne ein title-Attribut verknüpft 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 Style-Sheet-Titel standardmäßig ausgewählt werden sollte und macht diese Standardauswahl in Browsern anwendbar, die keine alternativen Stylesheets 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