CSS/alternative Stylesheets

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

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

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

Alternative Stylesheets[Bearbeiten]

  • IE
  • Opera
  • Firefox
  • Safari

Bereits mehrfach wurde angesprochen, dass so genannte alternative Stylesheets definiert werden können.

Ü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.

Beachten Sie: Werden alternative Stylesheets mit Hilfe des style-Elements definiert, ignoriert der Internet Explorer bis Version 9 dies und verarbeitet alle style-Elemente gemeinsam. Sie können dieses Problem umgehen, wenn Sie stattdessen Stylesheets per link-Element einbinden.

zusätzliche Stylesheets im CSS einbinden[Bearbeiten]

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

Stylesheet über HTTP einbinden[Bearbeiten]

  • Opera
  • Firefox
  • Achtung

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[Bearbeiten]

  • Opera
  • Achtung

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[Bearbeiten]

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • XML 1.0

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 Kodierung das Stylesheet vorliegt. Die Angabe besitzt hinweisenden Charakter. Sie wird nur dann verarbeitet, wenn mit dem Stylesheet selbst keine Informationen über die verwendete Kodierung 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[Bearbeiten]

  • IE
  • Firefox

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.