Multimedia Stylesheet-Wechsler

Das Original dieses Textes wurde zuerst am 19. November 2004 unter dem Titel Invasion of the Body Switchers im Online-Magazin A List Apart veröffentlicht. Die Autoren sind Andy Clarke und James Edwards. Die Übersetzung erfolgte mit Genehmigung von A List Apart und den Autoren.
Translated with the permission of A List Apart Magazine and the authors.

Einleitung

Tausende von Webdesignern und Entwicklern haben Paul Sowdens Stylesheet-Wechsler seit seiner Herausgabe im Jahr 2001 heruntergeladen und benutzt, ebenso wurden viele clientseitige und serverseitige Variationen dieses Scripts entwickelt.

Nachdem ich selbst das Script für eine Vielzahl von Projekten verwendet hatte, begann ich mich zu fragen, wie man so einen Style-Wechsler erweitern könnte, um den Besuchern mehr Auswahl oder bessere Zugänglichkeit zu bieten. Um meine Ideen in die Tat umzusetzen, wandte ich mich an meinen Freund Brothercake (James Edwards) und es entstand der Multimedia Stylesheet-Wechsler.

Ein Blick zurück auf den originalen Stylesheet-Wechsler

Paul Sowdens Originalscript ist fantastisch einfach, wenn auch nicht ohne Probleme.

Die Anker, die die Wechselfunktionen auslösen, sind im Mark-Up stets vorhanden. Das ist ein Problem, wenn JavaScript abgeschaltet ist, denn die generell verwendeten #-Anker werden dann zum unnötigen Ärgernis.

<a href="#" onclick="setActiveStyleSheet('default');
return false;">Switcher</a>

Weiter baute die Originallösung auf dem Element link und seinen Attributen stylesheet und alternate stylesheet auf. Dies erzeugt zusätzliche Anfragen an den Server und, was wichtiger ist, es erlaubt nicht, Stylesheets unabhängig voneinander auszuwählen, wenn sie unterschiedlichen Medien zugeordnet sind.

Wäre es nicht fantastisch, wenn wir das ohne zusätzliches Mark-Up hinbekämen, mit einem einzigen JavaScript und einer CSS-Datei? Wäre es nicht noch besser, wenn wir verschiedene Medien unabhängig voneinander ansteuern und dem User dafür eine einfache Schnittstelle geben könnten? Er könnte dort seine Präferenzen auswählen, die dann in einem Cookie gespeichert würden.

Dank des Multimedia Stylesheet-Wechsler ist das jetzt möglich.

Das Konzept

Dieser Multimedia Stylesheet-Wechsler bietet ungezählte Ausbaumöglichkeiten und lässt sich um eine beliebige Anzahl von Optionen und Medientypen erweitern. Sie funktionieren so, dass wir im Starttag des Elements body eine oder mehrere Klassen hinzufügen, die alle nur einmal auf der Seite auftreten dürfen. Die Formatierung definieren wir dann mit Hilfe von Nachfahren- Selektoren.

Dazu müssen wir uns aber von den Werten stylesheet und alternate stylesheet verabschieden, doch damit hab ich keine Probleme, denn:

Viele Browser unterstützen diesen Stylesheet-Wechsel noch nicht, und
Die Browser, die ihn unterstützen, vernachlässigen dabei das persistente Stylesheet, wenn ein alternatives Stylesheet gewählt wird.

Bevor wir anfangen, wollen wir uns kurz das Endresultat ansehen. Wenn Sie sich die Dateien jetzt herunterladen, können Sie besser verfolgen, wenn wir jede Komponente einzeln durchgehen.

Das XHTML

Zuerst notieren wir einige leere div als Container für die Wechsler:

Wir können für jeden weiteren Wechsler einen zusätzlichen Container einsetzen, z.B. haben wir hir einen Container für Druckformatierungen eingefügt:

Oder hier noch einen für Projektionen:

Die Wechsler-Tools werden erst dann ergänzt, wenn das entsprechende Script zur Verfügung steht. Ohne Script sind die Boxes nichts weiter als leere Container aus semantisch neutralem MarkUp.

Das Script

Die Anpassung das Scripts ist ganz einfach. Zuerst erstellen wir das Wechselformular, indem wir die ID des Containers und den Text für das Label definieren:

var screenSwitcher = new bodySwitcher('screen-switcher', 'Screen styles');

Dem können wir eine beliebige Anzahl von Klassen mit Labels hinzusetzen:

screenSwitcher.defineClass('default', 'Normal contrast'); screenSwitcher.defineClass('high', 'High contrast');

Neue Medientypen einfügen

Nun fügen wir Extra-Druckoptionen ein, um dem User die Wahl zwischen verschiedenen Druckmöglichkeiten zu geben, ohne die Bildschirmausgabe zu beeinflussen:

var printSwitcher = new bodySwitcher('print-switcher','Print styles'); printSwitcher.defineClass('default', 'Default'); printSwitcher.defineClass('small-sans', 'Small sans'); printSwitcher.defineClass('large-serif', 'Large serif');

Auch weitere Medientypen, z.B. für PDAs oder Präsentationen, können eingefügt werden:

var projectionSwitcher = new bodySwitcher('projection-switcher','Projection styles');

etc.

var handheldSwitcher = new bodySwitcher( 'handheld-switcher','Handheld styles');

etc.

Die einzige Einschränkung ist, dass jeder Klassenname nur einmal vorkommen darf, selbst in verschiedenen Medientypen.

Das Stylesheet

Alle zur Auswahl stehenden Optionen und Medientypen können in einem einzigen Stylesheet enthalten sein. In diesem Stylesheet kann man jede beliebige CSS-Regel notieren, indem man einfach die oben schon angesprochenen Klassennamen am Element body mit Nachfahren- Selektoren verwendet.

Beispiel für Bildschirm-CSS

@media screen { body { background : #fff; color : #666; } body.high { color : #000; } body.highvisibility { background : #000; color : #ff0; } }

Beispiele für Druck-CSS

@media print { body { font: 100% "Lucida Sans Unicode",verdana,sans-serif; } body.small-sans { font: 80% "Lucida Sans Unicode",verdana,sans-serif; } body.large-serif { font: 120% "Times New Roman",times,serif; } }

Beispiele für zusätzliche Medien im Stylesheet

@media projection { }

etc.

@media handheld { }

etc.

Styling der Schnittstelle

Die Schnittstelle des Wechslers notieren wir mit zugänglichem, semantischem Code, der durch CSS an jedes Design angepasst werden kann. Das HTML der Wechsler- Schnittstelle sieht wie folgt aus, die designerische Anpassung überlasse ich Ihnen selbst.

<form action=""> <fieldset> <label for="select-screen-switcher"> <span>Screen styles</span> <select id="select-screen-switcher"> <option value="default">Normal contrast</option> <option value="high">High contrast</option> <option value="highvisibility">High visibility</option> </select> </label> </fieldset> </form>

Das war es fast schon

Das war's! Sehen Sie sich das Ergebnis noch einmal an: ein moderner Stylesheet-Wechsler, mit dem die Stylesheets verschiedener Medientypen unabhängig voneinander gewechselt werden können. Er gibt den Besuchern eine deutlich verbesserte Kontrolle über die Ausgabe Ihrer Webseiten.

Das hier vorgestellte Prinzip lässt sich ohne Einschränkungen erweitern, man kann es sogar in einzelne Präferenzen für Fonts, Farben, Layout oder Orientierung der Seite unterteilen.

Mit einer Ausnahme:

Unser Multimedia Stylesheet-Wechsler funktioniert nicht im IE/Mac 5.x, fällt dort aber problemlos auf eine weniger qualifizerte Darstellung zurück.
TOPAuthors: Andy Clarke and James Edwards
Translation: kl

Hinweis:
Das Original dieses Textes wurde zuerst am 19. November 2004 unter dem Titel Invasion of the Body Switchers im Online-Magazin A List Apart veröffentlicht. Die Autoren sind Andy Clarke und James Edwards. Die Übersetzung erfolgte mit Genehmigung von A List Apart und den Autoren.
Translated with the permission of A List Apart Magazine and the authors.