CSS/alternative Stylesheets
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!
Inhaltsverzeichnis
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.
<!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.
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
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.
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.
Achtung!
Variante als Meta-Angabe
Mit Hilfe eines meta-Elements kann das Einbinden eines Stylesheets über HTTP emuliert werden.
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!
meta-Elements ab Version 4.0 nicht mehr. Stylesheets in XML einbinden
XML-Dokumente können Stylesheets mit der „xml-stylesheet“-Verarbeitungsanweisung einbinden.
<?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.
<?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.
Weblinks
- ↑ MDN: Alternative style sheets
- ↑ Alternate Stylesheets: still a thing? June 15, 2022 (publishing Project)
