CSS/alternative Stylesheets

10min

leicht

• Stylesheets_einbinden

In den frühen 2000er Jahren unterstützten Browser wie Firefox, Opera und Konqueror eine Funktion namens „alternative Stylesheets”.

Eine Webseite konnte mehrere CSS-Dateien mit jeweils einem Titel deklarieren – etwa so:

Alternative Stylesheets im head

<link rel="stylesheet" href="default.css" title="Standard">
<link rel="alternate stylesheet" href="highcontrast.css" title="High Contrast">
<link rel="alternate stylesheet" href="bigtext.css" title="Large Text">

Im Browser-Menü (z. B. „Ansicht“ → „Seitenstil“ in Firefox) konnten Benutzer auswählen, welcher Stil verwendet werden sollte. Dadurch konnten Autoren verschiedene Designs anbieten, zum Beispiel:

• Druckerfreundliche Version
• Hoher Kontrast für Barrierefreiheit
• Dunkler Modus (bevor es diesen als Medienabfrage gab)
• Sans-Serif-Layout für Benutzer mit Legasthenie

Es gab mehrere Nachteile:

• Keine dauerhafte Speicherung
  Browser speicherten den gewählten Stil nicht – sobald man die Seite neu lud oder weg navigierte, wurde er auf die Standardeinstellung zurückgesetzt.
• Schlechte Benutzeroberfläche
  Nur Firefox und das alte Opera (bis V12, 2013) zeigten ein Menü „Seitenstil“ an; Chrome, Safari und Edge haben es nie übernommen.
  Im Firefox ist die Symbolleiste standardmäßig ausgeblendet und muss mit ALT+a oder F10 eingeblendet werden.
  Entwickler konnten sich also nicht darauf verlassen, dass es sichtbar oder nutzbar war.
• Aufstieg von JavaScript und benutzerdefinierten Umschaltfunktionen
  Entwickler begannen, Skripte, Cookies und später localStorage zu verwenden, um Theme-Umschalter (Dunkel-/Hellmodus, Schriftgrößensteuerung usw.) zu erstellen, die dauerhaft waren.
• Neue CSS-Features wie
• @media (prefers-color-scheme)
• @media (prefers-contrast)
• CSS-benutzerdefinierte Eigenschaften (für dynamische Themes)

Diese modernen Funktionen machen alternative Stylesheets überflüssig.

Achtung!

Die hier vorgestellten Techniken werden derzeit (Stand Oktober 2025) nur noch vom Firefox unterstützt.
Sie sind aber selbst dort eher versteckt zu finden.
Von einer Verwendung wird abgeraten.

Stylesheet über HTTP einbinden

Der HTTP-Header „Link“ dient dazu, bereits im HTTP-Teil der Server-Antwort auf bestimmte Ressourcen zu verweisen. Theoretisch funktioniert dieser Header genauso wie das <link>-Element, in der Praxis ist es aber so, dass nur die rel-Werte preconnect und preload browserübergreifend funktionieren.

Achtung!

Weshalb wir das hier erwähnen? Im Firefox wird aber auch rel="stylesheet" unterstützt.
Nur dort! Bevor der Opera-Browser ein Chromium-Derivat wurde, konnte er es auch. Jetzt nicht mehr. Deswegen raten wir dringend davon ab, diesen Header für das Zuordnen von Stylesheets zu benutzen.

Beispiel

Link: <stylesheet.css>;rel=stylesheet

Dem Namen des Headers, „Link“, folgt ein Doppelpunkt. Innerhalb von Spitzklammern wird die einzubindende Datei genannt. Darauf folgend können Attribute hinzugefügt werden. Diese beginnen mit einem Strichpunkt, gefolgt vom Attributnamen, einem Gleichheitszeichen sowie dem Wert des Attributs. Im Falle von rel=stylesheet sind, genau wie im link-Element, die Attribute type, media und title möglich, mit gleicher Wirkung.

Beachten Sie: Über den HTTP-Header können Sie nur ein einziges Stylesheet einbinden. Bei mehrfachem Vorkommen des Headers wird das zuletzt festgelegte Stylesheet eingebunden.

Stylesheets in XML einbinden

XML-Dokumente können Stylesheets mit der „xml-stylesheet“-Verarbeitungsanweisung einbinden.

Beispiel

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="stylesheet.css" ?>
<beispiel>
 <text>Dies ist ein beispielhaftes XML-Dokument.</text>
</beispiel>

Dieses mögliche XML-Dokument bindet ein externes Stylesheet mit Hilfe der „xml-stylesheet“-Verarbeitungsanweisung ein.

Diese Verarbeitungsanweisung kann mehrere Attribute besitzen.

Das href-Attribut ist ein Pflichtattribut und referenziert die einzubindende Stylesheetdatei.

Die Attribute type und media können ebenfalls gesetzt werden. Ihre Wirkung entspricht den gleichnamigen Attributen bei link- und style-Elementen.

Durch das charset-Attribut kann dem Browser ein Hinweis gegeben werden, in welcher Codierung das Stylesheet vorliegt. Die Angabe besitzt hinweisenden Charakter. Sie wird nur dann verarbeitet, wenn mit dem Stylesheet selbst keine Informationen über die verwendete Codierung verfügbar wird.

Auch in XML-Dokumenten können alternative Stylesheets definiert werden. Hierzu muss das Stylesheet als solches gekennzeichnet werden. Dies erfolgt durch das Attribut alternate, sofern es den Wert „yes“ erhält. Wird das Attribut nicht angegeben, gilt automatisch der Wert „no“, durch den kein alternatives Stylesheet definiert wird.

Sofern das alternate-Attribut den Wert „yes“ besitzt, wird die Angabe des title-Attributs erforderlich.

Siehe auch

• JavaScript und CSS
  
   

• Einstieg in CSS
  (Übersicht)
• Guter CSS-Stil