Alternative Stylesheets einbinden

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Viele modernen Browser, wie etwa Firefox oder Opera, bieten ihren Benutzern bereits die Möglichkeit, zwischen mehreren Stylesheets eines Dokuments auszuwählen, vorausgesetzt, diese Stylesheets wurden korrekt in das Dokument eingebunden. Um Ihren Benutzern mehrere Stylesheets anzubieten, müssen Sie die Kommentarzeichen vor Ihrem Haupt-Stylesheet entfernen, falls Sie es im vorigen Beispiel auskommentiert hatten. Fügen Sie dann diesem Link das Attribut title="default layout" hinzu. Der Link, der auf das Stylesheet zoom.css verweist, bekommt das Attribut title="zoom layout".

Sie können nun mit dem Firefox-Browser, der alternative Stylesheets unterstützt, zwischen den beiden Formatdateien auswählen. Klicken Sie dazu einfach auf den Menüpunkt Ansicht > Webseiten-Stil und wählen das gewünschte Stylesheet aus. Die angezeigten Optionen geben die Werte wieder, die Sie im title-Attribut eingetragen haben, wie Sie in der Abbildung sehen.

Abbildung: Auswahl der verschiedenen Stylesheets mit Firefox.

Was ist mit den Besuchern, deren Browser diese Auswahlmöglichkeit nicht anbietet? Nun, Sie können auf Ihrer Seite einen eigenen »Style-Switcher« anbieten und damit auch diesen Besuchern mehrere Stylesheets zur Verfügung stellen. Obwohl eine Erörterung, wie solche »Style-Switcher« erzeugt werden, über den Rahmen dieses Buches hinausgehen würde, sei kurz bemerkt, dass es eine ganze Anzahl von Varianten gibt, diese Funktionalität einzubauen. Sei es mit JavaScript oder einer serverseitigen Sprache wie PHP oder ASP. Ein gebräuchliches JavaScript-Programm zum Wechseln von Stylesheets wird in dem Artikel »Alternative Style: Working With Alternate Style Sheets« von Paus Sowden auf der Seite »A List Apart« erklärt.