Alternatives 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 die Zielressource ein alternatives Stylesheet ist. Das Spezifizieren von alternativen Stylesheets auf einer Webseite ermöglicht es Nutzern, verschiedene 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 Präferenzen eines Nutzers funktionieren, siehe die CSS media features prefers-color-scheme und prefers-contrast.

Firefox erlaubt es Nutzern, alternative Stylesheets über das Untermenü Ansicht > Seitenstil auszuwählen, das 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 Nutzern das Wechseln der Stile zu ermöglichen.

Beispiele

Spezifizieren von alternativen Stylesheets

Alternative Stylesheets werden unter Verwendung von <link>-Elementen mit rel="alternate stylesheet" und title="…" Attributen spezifiziert. 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 Page Style-Untermenü aufgelistet, wobei "Default Style" vorausgewählt ist. Wenn der Nutzer 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 title="…" 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", 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 auf dem <link rel="stylesheet"> oder <style>-Element referenziert werden, der Titel zu einer der dem Nutzer angebotenen Optionen. 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 wendet diese Standardauswahl in Browsern an, 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