Alternativer Stylesheet

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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 alternativer 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 in Browsern ohne Erweiterung nicht gut unterstützt. Um alternative Präsentationen anzubieten, die mit den vorhandenen Benutzerpräferenzen funktionieren, siehe die CSS-Medienfunktionen 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, um es Benutzern zu ermöglichen, zwischen Styles zu wechseln.

Beispiele

Alternative 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 Styles "Default Style", "Fancy" und "Basic" im Firefox-Untermenü Seitenstil aufgelistet, wobei "Default Style" vorausgewählt ist. Wenn der Benutzer einen anderen Style auswählt, wird die Seite sofort mit diesem Stylesheet neu gerendert.

Unabhängig davon, welcher Style 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

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

Persistent (hat rel="stylesheet", kein title=""): wird immer auf das Dokument angewendet.
Bevorzugt (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 Stylesheets mit unterschiedlichen Titelattributen dazu führen, dass einige ignoriert werden.
Alternativ (rel="alternate stylesheet", mit angegebenem title="…") ist standardmäßig deaktiviert und kann ausgewählt werden.

In Fällen, in denen ein Stylesheet-Menü existiert, wird der Titel, wenn Stylesheets mit einem title-Attribut im <link rel="stylesheet">- oder <style>-Element referenziert werden, zu einer der dem Benutzer angebotenen Optionen. Stylesheets, die mit demselben title verlinkt sind, sind Teil derselben Auswahl. Stylesheets, die ohne 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 soll, und sorgt dafür, dass diese Standardauswahl in Browsern gilt, 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

Browser-Kompatibilität

BCD tables only load in the browser