Alternative Stylesheets verwenden

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen Ihren Benutzern unterschiedliche Stylesheets, z.B. für größere Schriften oder ein anderes Farbschema, anbieten.

Lösung

Versehen Sie das link-Element mit dem Attribut title und binden Sie das alternative Stylesheet in die Seite ein. Im Attribut title können Sie festlegen, unter welchem Namen das alternative Stylesheet dem Benutzer angeboten wird. In Firefox können Sie diese Liste beispielsweise über ANSICHT ➝ WEBSEITEN-STIL anzeigen lassen. Für alternative Stylesheets wird das Attribut rel um das Schlüsselwort alternate erweitert, wie im Folgenden gezeigt:

<link href="default.css" rel="stylesheet" title="Standardstil" type="text/css" media="screen"/>
<link href="green.css" rel="alternate stylesheet" title="Grünes Farbschema" type="text/css" media="screen"/>
<link href="blue.css" rel="alternate stylesheet" title="Blaues Farbschema" type="text/css" media="screen"/>

Leider funktioniert diese Lösung nicht mit dem Internet Explorer 6.0 oder Safari.

Diskussion

Die Verwendung alternativer Stylesheets funktioniert so ähnlich wie die medienspezifischen Stylesheets im Rezept Eine Webseite mit Stildefinitionen versehen. Anstatt Stile für bestimmte Medien zu definieren, bieten Sie den Benutzern in diesem Fall verschiedene Optionen für die Bildschirmdarstellung. Diese Technik kann übrigens auch von Benutzern verwendet werden, die JavaScript deaktiviert haben, da sie vom Browser direkt unterstützt wird. Um alternative Stylesheets zu verwenden, brauchen Sie nur eine Kopie von einem bestehenden Stylesheet anzufertigen und es unter einem anderen Namen zu speichern. Nehmen Sie in der neuen Datei die gewünschten Änderungen vor und binden Sie diese mit dem nötigen link-Element, einem passenden title-Attribut und der nötigen Erweiterung im Attribut rel in Ihr Webdokument ein (siehe die nächste Abbildung).

In vielen Browsern können Sie zwischen mehreren alternativen Stylesheets wählen

Abbildung: In vielen Browsern können Sie zwischen mehreren alternativen Stylesheets auswählen.

Siehe auch

Den Artikel "Invasion of the Body Switchers" von Andy Clarke und James Edwards, der beschreibt, wie man eine Stylesheet-Auswahl mit Hilfe von JavaScript realisieren kann.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln