Stylesheet TricksArtikel

Alternative Stylesheets
Der W3C-Standard erlaubt alternative externe Stylesheets für HTML-Dateien. Der Vorteil: Ein intelligent geschriebener Code kann unter anderem auf Sehbehinderungen oder aktuelle Events eingehen und alternative Designs im Handumdrehen ermöglichen.

So können kontraststarke Monochrom-Versionen einer Website alternativ angeboten werden oder eine Christmas-Version, die bei Missfallen vom Besucher auch wieder deaktiviert werden können.

Es gibt zunächst das Standard-Stylesheet, welches bei jedem Laden einer Seite standardmäßig aktiviert wird:


Weitere alternative Stylsheets bindet man wie folgt ein:


Das title-Attribut hat hierbei eine strukturelle Bedeutung: Bei dem Standard-Stylesheet optional, bei dem alternativen Stylesheet Pflicht, ergibt der title-Eintrag den Namen der "Stylegruppe", die aus einem und bei dem alternativen Gruppen auch aus mehreren Stylesheets bestehen kann.

Bei Mozilla Firefox erscheinen die unterschiedlichen Stylegruppen dann unter Ansicht->Webseiten-Stil. Der oben gelistete Code würde also die Gruppen "Standard", "alt-a" und "alt-b" erstellen, wobei die Gruppe alt-a die Stylesheet Dateien screen-alt1.css und screen-alt2.css lädt.

Im Internet Explorer existiert leider keine browserinterne Funktion zum Auswählen der alternativen Stylegruppen. Aber auch Firefox bereitet Probleme: So ist eine ausgewählte alternative Stylegruppe nur einmalig für die gerade aufgerufene Seite verfügbar: Die Auswahl wird nicht weiter gespeichert und muss bei jedem Seitenaufruf neu bestätigt werden.

Einen Workaround dazu bietet Paul Sowden. Dieses basiert aus javascript und Cookies und ist eine sinnvolle Ergänzung, wenn man alternative Stylesheets als wichtige Komponente und nicht nur als Spielerei einer Website vorsieht.


Stylesheet per PHP
Wer versucht sein externes Stylesheet mit PHP dynamisch zu erstellen, um die Vorteile der serverseitigen Programmiersprache für ein variables Layout zu nutzen, steht vor einem Problem:
PHP sendet alle Dateien mit dem Dateityp text/html, so auch das dynamisch erstellte Stylesheet. Die Browser Internet Explorer, Opera und Safari stört das wenig. Netscape, Mozilla, Firefox, Camino und Phoenix dagegen streiken und führen die Stylesheet-Datei nicht aus, so Marcus Völkel.

Die Lösung: In der ersten Zeile der Datei, noch bevor irgend etwas anderes steht muss folgendes eingefügt werden:


Dann wird die CSS-Datei mit dem korrekten Dateityp gesendet und es gibt keine Probleme mehr

Das ganze ist übrigens unabhängig von der Dateiendung. Die Datei muss also nicht style.css heißen, man kann sie auch style.php benennen.

Sie sind nicht eingeloggt.