Zum Textbeginn springen Zur Navigation springen

CSS 2.1 ::Artikel

Einfacher Stylesheet-Wechsler

Das Original dieses Textes wurde zuerst am 02. November 2001 unter dem Titel Alternative Style: Working With Alternate Style Sheets im Online-Magazin A List Apart veröffentlicht. Der Autor ist Paul Sowden. Die Übersetzung erfolgte mit Genehmigung von A List Apart und dem Autor.
Translated with the permission of A List Apart Magazine and the author.

Sie haben also eine Webseite. Sie haben den Inhalt mit strukturiertem XHTML codiert und mit Stylesheets für das gute Aussehen gesorgt. Als braver Webdesigner sind Sie sogar soweit gegangen, mehrere alternative Stylesheets zu basteln, damit Sie der Welt zeigen können, was Sie 'drauf' haben.

Prima. Jetzt soll der Besucher die Stylesheets dynamisch wechseln und dazu brauchen Sie eine Möglichkeit, die in allen Browsern funktioniert.

Stylesheets anbringen

Externe Stylesheets können über das Element link im Kopf eines Dokuments angebunden werden. Es gibt drei Möglichkeiten, wie Stylesheets mit Webdokumenten in Relation stehen können: ständig (=persistent), bevorzugt (=preferred) und alternativ (=alternate).
[Anm. des Übers.: Mehr über bevorzugte und alternative Stylesheets enthält der Artikel Anbindung von CSS an HTML.]

Ständige (`persistent`) Stylesheets

Diese Stylesheets werden immer verwendet (sie sind immer 'eingeschaltet') und sind mit dem aktiven Stylesheet kombiniert. Sie können Regeln enthalten, die für alle Stylesheets gemeinsam gelten. Um ein Stylesheet zum 'ständigen' Stylesheet zu machen, gibt man dem Attribut rel im Element link den Wert stylesheet und vermeidet das Attribut title.

Wenn wir z. B. ala.css zum ständigen Stylesheet machen wollen, fügen wir folgendes Element in den Kopfteil unseres Dokuments ein:

Bevorzugte (`preferred`) Stylesheets

Diese Stylesheets sind voreingestellt, d. h. sie sind beim Laden der Seite 'eingeschaltet'. Sie können abgeschaltet werden, wenn der Nutzer ein alternatives Stylesheet auswählt. Ein Stylesheet erhält dann den Status 'bevorzugt', wenn man das Attribut rel im Element link auf stylesheet setzt und dem Stylesheet mit dem Attribut title einen Namen gibt.

Mehrere bevorzugte Stylesheets können zusammen gruppiert werden, indem man ihnen identische Attribute title gibt. Dann werden diese Stylesheets alle gemeinsam ein- und ausgeschaltet. Wenn mehrere Gruppen bevorzugter Stylesheets definiert sind, erhält die erste Gruppe Vorrang.

Auch hier ein Beispiel: Um ala.css zum bevorzugten Stylesheet zu machen, geben wir ihm mit dem Attribut title einen Namen.

Alternative (`alternate`) Stylesheets

Diese Stylesheets lassen sich vom Besucher als Alternativen zum bevorzugten Stylesheet auswählen. Mit der Wahl des von ihm favorisierten Farbschemas kann der Besucher das Aussehen einer Website individualisieren. Alternative Stylesheets können auch zur Verbesserung der Zugänglichkeit verwendet werden.

Um ein alternatives Stylesheet zu spezifizieren, muss das Attribut rel den Wert alternate stylesheet erhalten und das Stylesheet muss mit dem Attribut title benannt werden. Genau wie bevorzugte Stylesheets können auch alternative Stylesheets durch identische Attribute title gruppiert werden.

Um die Datei ala.css aus dem vorhergehenden Beispiel zu einem alternativen Stylesheet zu machen, fügen wir dem Wert des Attributs rel einfach das Schlüsselwort alternate hinzu.

Wichtig ist noch, dass diese Beziehungen nur auf externe Stylesheets zutreffen, die mit dem Element link eingebunden sind.

Stylewechsel

Beim ersten Laden eines Webdokuments wird es durch den Inhalt der ständigen und bevorzugten Stylesheets formatiert. Das alternative Stylesheet kann dann vom Nutzer ausgewählt werden. Dazu erzählt uns das W3C, dass der Browser uns die Auswahl zwischen verschiedenen Stylesheets geben sollte und schlägt dazu u. a. ein herunterklappbares Menü vor.

So weit, so gut. Wir haben verschiedene Stylesheets und der Besucher hat die Wahl, z. B. aus einem Menü. Aber dann taucht ein Problem auf. Und zwar ein großes. Mozilla bzw. Firefox stellt uns dafür ein Menü zur Verfügung. MS IE tut das dagegen nicht. Wir haben also mehrere Stylesheets, können sie aber im IE nicht nutzen.

An dieser Stelle können wir uns mit ein wenig JavaScript und dem DOM helfen, um Nutzern des MSIE die Auswahl verschiedener Stylesheets zu ermöglichen (ohne dabei Mozilla/Firefox-Nutzer auszuschließen). Ihre Wahl können wir auch in einem Cookie abspeichern und da wir entsprechend der Vorgabe des W3C das Element link verwenden, fällt das JavaScript im Mozilla/Firefox problemlos auf das browsereigene Menü zurück.

Das Script

Der erste Zweck unseres Scripts ist, zwischen den drei verschiedenen Typen von Stylesheets zu unterscheiden. Das ist relativ einfach, wir brauchen in jedem Element link nur zwei Attribute abzufragen:

Ist es ein Link zu einem Stylesheet?
HTMLLinkElement.getAttribute("rel").indexOf("style") != -1
Gibt es ein Attribut title?
HTMLListElement.getAttribute("title")
Enthält das Attribut rel das Schlüsselwort alternate?
HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1

Wir fragen hier den verkürzten String alt ab, weil einige Browser das Schlüsselwort alternative anstelle von alternate akzeptieren.

Mit diesen drei Abfragen können wir eine Funktion zum Wechsel der Stylesheets schreiben. Dazu müssen wir jedes Element link unseres Webdokuments durchlaufen und dabei alle bevorzugten und alternativen Stylesheets, die wir aktivieren wollen, zulassen und alle bevorzugten und alternativen Stylesheets, die wir nicht aktivieren wollen, ausschließen.

Nicht vergessen: nur Elemente link zu bevorzugten und alternativen Stylesheets haben ein Attribut title.

Die Wechselfunktion sieht so aus:

Cookies

Cool, jetzt können wir das Stylesheet wechseln und haben damit unser Webdokument individualisiert. Das trifft aber nicht für die gesamte Website zu, denn die Änderung gilt immer nur für die aktuelle Seite. Wenn wir zur nächsten Seite gehen, verlieren wir unsere Auswahl. Mit einem Cookie können wir das ändern.

Für den Cookie brauchen wir eine weitere Funktion, um das aktuell verwendete Stylesheet für die nächste Seite wieder einzusetzen. Dazu benötigen wir noch zwei Funktionen, um den Cookie abzuspeichern und wieder zu lesen.

Dazu suchen wir nach einem bevorzugten oder alternativen Stylesheet, das aktiv ist, und prüfen das Attribut title.

Zuerst durchlaufen wir mit unserer Schleife wiederum alle Elemente link unseres Dokuments. Bei jedem prüfen wir, ob ein Stylesheet verlinkt wird. Falls ja, prüfen wir, ob ein Attribut title vorhanden ist. Dadurch erfahren wir, dass das Stylesheet entweder bevorzugt oder alternativ ist.

Mit der letzten Abfrage prüfen wir, ob das Stylesheet wirklich das aktive ist. Wenn alle drei Abfragen das Ergebnis true haben, sind wir bei dem aktuell verwendeten Stylesheet angelangt und kennen damit auch den Inhalt des Attributs title.

Die fertige Funktion sieht so aus:

function getActiveStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); } return null; }

In diesem Artikel geht es um Stylesheets, Cookies sind aber ein ganz anderes Thema. Deshalb will ich die Funktionen für die Cookies hier nicht weiter erklären, sondern nur der Einfachheit halber einfügen. Sie wurden vom ALA-Autor Peter-Paul Koch geschrieben.

Damit wir diese Cookie-Funktionen verwenden können, müssen wir noch die Event-Handler onLoad und onUnload ergänzen.

`onLoad`

In der vom W3C festgelegten DOM Level 2 gibt es ein Attribut disabled. Dieses Attribut ist auf false gesetzt, wenn ein Stylesheet auf ein Webdokument angewendet wird. Mozilla/Firefox implementiert es auch korrekt, leider aber nicht MS IE.

MS IE kennt ein proprietäres HTML-Attribut, das auf Elemente link zutrifft und ebenfalls disabled genannt wird. Dieses Attribut ist zu Beginn für alle Elemente link auf false gesetzt.

Um das MSIE-Attribut disabled mit dem DOM-Level-2-Attribut disabled abzugleichen, können wir die Funktion setActiveStyleSheet() mit dem Namen des bevorzugten Stylesheets verwenden.

Um herauszufinden, welches Stylesheet das bevorzugte Stylesheet ist, brauchen wir eine weitere Funktion. Sie ist der Funktion getActiveStyleSheet() sehr ähnlich und soll darum hier nicht erklärt werden. So sieht sie aus:

function getPreferredStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title") ) return a.getAttribute("title"); } return null; }

In der Funktion onLoad setzen wir zuerst eine Variable title. Diese enthält entweder den Wert des für die vorhergehende Seite benutzten Stylesheets, das im Cookie gespeichert ist, oder, falls es das noch nicht gibt, den Wert des bevorzugten Stylesheets. Damit alle logisch aussieht, nennen wir den Cookie 'style'.

Als nächstes folgt der Aufruf der Funktion getActiveStyleSheet() mit der Variablen title. Unsere Funktion onLoad sollte dann etwa so aussehen:

window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); }

Es könnte vorteilhaft sein, diese Funktion ebenfalls vor dem Event onLoad auszuführen, dadurch wird das Dokument gleich mit unserem bevorzugten Stylesheet formatiert.

Falls Sie das tun, stellen Sie aber sicher, dass die Funktion erst aufgerufen wird, nachdem alle Funktionen und Elemente link definiert wurden.

`onUnload`

Den Cookie während des Events onUnload zu speichern, ist etwas einfacher. Wir brauchen nur die Funktion getActiveStyleSheet(), um den Namen des aktiven Stylesheets zu erhalten und dann in einem Cookie zu speichern. Die Funktion sieht etwa so aus, wenn sie zur Speicherung des Cookies verwendet wird:

window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); }

Hier kommt alles zusammen

Damit Sie diese Funktionen für Ihre Website nutzen können, müssen Sie sie in Ihr Webdokument einfügen. Um den Download zu vereinfachen, hab ich sie alle in einer JavaScript-Datei zusammengestellt: style-switcher .

[Anm. d. übers.: Achtung, da dieses Script hier von einigen Webmastern hotverlinkt wurde, sind jetzt alle Funktionen auskommentiert. Wenn Sie das Script verwenden wollen, müssen Sie es herunterladen, die Kommentar- Notationen entfernen und es dann auf Ihrem eigenen Server verwenden.]

Mit einem Element script fügen wir die JavaScript-Datei im Kopf unseres Webdokuments ein. Wir müssen nur sicherstellen, dass sie unterhalb von allen Elementen link für die Stylesheets steht. Das HTML dazu sieht etwa so aus:

Um dem Besucher die Möglichkeit zum Wechseln des aktiven Stylesheets zu geben, bietet JavaScript den Event onClick. Mit folgendem HTML könnten wir z. B. zwischen zwei Themen hin- und herschalten, deren Attribut title die Werte default und ala enthält:

<a href="#" onclick="setActiveStyleSheet('default'); return false;">change style to default</a> <a href="#" onclick="setActiveStyleSheet('ala'); return false;">change style to ala</a>

Sobald der Besucher ein Thema auswählt, wird es im Cookie gespeichert. Um ihm oder ihr die Wahl desselben Themas bei allen Seiten unserer Website zu geben, verlinken wir dieselben Stylesheets und JavaScript-Dateien im Kopf jeder Seite.

Das ist schon alles.

Damit haben wir eine individualisierbare Website, in der wir, wie vom W3C empfohlen, die Elemente link zum Verlinken der Stylesheets verwenden. Viel Spaß.
TOPAuthor: Paul Sowden
Translation: kl

Hinweis:
Das Original dieses Textes wurde zuerst am 02. November 2001 unter dem Titel Alternative Style: Working With Alternate Style Sheets im Online-Magazin A List Apart veröffentlicht. Der Autor ist Paul Sowden. Die Übersetzung erfolgte mit Genehmigung von A List Apart und dem Autor.
Translated with the permission of A List Apart Magazine and the author.