CSS/alternative Stylesheets

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Die Einbindung von CSS in HTML-Dokumente wird im Einstieg in CSS behandelt.

In diesem Abschnitt wird zusammengefasst, wie Sie alternative Stylesheets einbinden können.

Achtung!

Die hier vorgestellten Techniken werden derzeit (Stand Juli 2023) nur vom Firefox untersützt.[1][2]

Alternative Stylesheets

Üblicherweise werden alle Stylesheets, ob extern gelagert oder innerhalb des Dokuments definiert, zusammengefasst und als Einheit verarbeitet. Durch das definieren eines Titels für das link- oder das style-Element wird das entsprechende Stylesheet von anderen Stylesheets (auch „bevorzugtes Stylesheet“ genannt) abgegrenzt.

Ein Browser kann anhand der Titel-Informationen ein Standardstylesheet (das „bevorzugte Stylesheet“) und alternative Stylesheets in einer Liste zusammenfassen, die dem Benutzer zur Auswahl angeboten werden.

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiel für alternative Stylesheets</title>
    <style title="seriös">
      html { font-family: serif; }
      .demo { display: inline-block; border: 1px solid #bbb; background: #ddd; padding: 1em;}
      .demo span::after { content: "'seriös'"; }
    </style>
    <style title="Fantasy">
      html { font-family: fantasy; }
      .demo { display: inline-block; border: 5px solid red; background: gold; padding: 1em;}
      .demo span::after { content: "»Fantasy«"; }
    </style>
  </head>
  <body>
    <h1>Beispiel für alternative Stylesheets</h1>
    <p class="demo">Sie verwenden den Stil <span></span>.</p>
    <p>
      Manche Browser bieten die Möglichkeit, alternative
      Stylesheets zu verwenden.</p>
    <p>
      Im Firefox etwa können Sie über den Menüpunkt
      (Menüleiste muss aktiviert sein)
      <kbd>Ansicht/Webseitenstil</kbd>
      die verschiedenen Stylesheets auswählen.
    </p>
  </body>
</html>

In diesem Beispiel werden zwei Stylesheets definiert. Das erste Stylesheet oder ein Stylesheet ohne title-Attribut wird als Standard verwendet.

Ein Browser kann dem Benutzer nun anzeigen, dass ein alternatives Stylesheet vorhanden ist. Wählt der Benutzer dieses aus, wird die Seite nach dessen Regelwerk dargestellt.

Beachten Sie: Die Vereinbarungen der nicht gewählten Stylesheets werden dabei komplett ignoriert, es ist also nicht möglich, auf diese Weise zusätzliche CSS-Regeln zu vereinbaren.

Besitzen alle Elemente einen Titel, so wird das erste Element als bevorzugtes Stylesheet gewertet und alle anderen als alternative Stylesheets.


zusätzliche Stylesheets im CSS einbinden

Es gibt die Möglichkeit, Stylesheets aus unterschiedlichen Quellen zusammenzuführen. Dafür wird eine @import-Regel verwendet.

Stylesheet über HTTP einbinden

Achtung.svg

Eine Möglichkeit, ein einzelnes Stylesheet in ein Dokument einzubinden, ohne dass Stylesheet und Dokument direkt miteinander verknüpft werden müssen, gibt der HTTP-Header „Link“. Dieser ähnelt in seiner Funktion dem gleichnamigen HTML-Element, funktioniert aber sowohl für HTML- als auch für XML-Dokumente.

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.

Neben dem rel-Attribut sind auch die Attribute type, media und title erlaubt. Die Wirkung der Attribute entspricht den gleichnamigen Attributen des link-Elements.

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.

Achtung!

Das Einbinden eines Stylesheets über HTTP erlauben nur Mozilla Firefox und Opera. Andere Browser ignorieren den Header.

Variante als Meta-Angabe

Achtung.svg

Mit Hilfe eines meta-Elements kann das Einbinden eines Stylesheets über HTTP emuliert werden.

Beispiel
<meta http-equiv="Link" content="<stylesheet.css>;rel=stylesheet;media=print"/>
Hinweis: Das meta-Element ist ein Kindelement des head-Elements. Die sich öffnende Spitzklammer muss maskiert werden, damit beispielsweise bei der Verarbeitung von XHTML kein Fehler entsteht.

Achtung!

Mozilla Firefox unterstützt diese Variante des meta-Elements ab Version 4.0 nicht mehr.

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.

Formate zentral in einem Element festlegen

Mit der „xml-stylesheet“-Verarbeitungsanweisung kann auch ein Stylesheet referenziert werden, das sich innerhalb des Dokuments befindet. Dazu wird im href-Attribut die Referenz auf ein Element mit einer ID notiert.

Beispiel
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="#formatvorlagen" ?>
<beispiel>
 <formatierung id="formatvorlagen">
 text { font-weight: bold; }
 </formatierung>
 <text>Dieser Text soll in Fettschrift dargestellt werden.</text>
</beispiel>
In diesem XML-Dokument wird kein externes Stylesheet eingebunden, sondern der Inhalt eines Elements an die Formatierungsmechanik weitergegeben.
Beachten Sie: Das Referenzieren eines Elements erlauben nur Firefox und Internet Explorer ab Version 9 (Stand April 2011). Beide jedoch fehlerhaft: Anstatt des Elementinhalts wird das gesamte Dokument als Stylesheet verarbeitet. Dadurch werden eigentlich korrekte Regeln nicht richtig erkannt und ignoriert.

Weblinks

  1. MDN: Alternative style sheets
  2. Alternate Stylesheets: still a thing? June 15, 2022 (publishing Project)