Anforderungen
Unser praxisnahes Layout-Beispiel wollen wir jetzt noch ein bißchen aufpeppen, nämlich um einen sog. Styleswitcher.
Hintergrund: Moderne Browser bieten dem Anwender eine komfortable Möglichkeit, die angebotenen CSS-Styles abzuschalten oder durch ein (eigenes) Anwender-Stylesheet zu ersetzen. Dies ist sehr praktisch, da einer sinnvollen Skalierung doch gewisse Grenzen gesetzt sind, so man denn Wert auf ein einigermaßen stilvolles Layout legt.
Zur Erinnerung - praxisnah definieren wir so: Das Layout muß nicht skalieren, 'bis der Arzt kommt' ... wir orientieren uns an den Skalierungsstufen des MSIE ('sehr klein' bis 'sehr groß', entspricht in Mozillas etwa 2x [STRG] + [-/+]).
Doch zurück zum Thema ... Um auch Anwendern mit mangelhaften Browsers (wie z.B. Internet Explorer) zu ermöglichen, aufwendige Layouts einfach abzuschalten, wollen wir dafür einen eigenen Button anbieten. Probieren Sie unseren Button "Nur Text" oben rechts ...
Sie sehen, wir nutzen die Gelegenheit, um eine invertierte Version des Contents anzubieten, jedoch als einfach strukturierten Text. Natürlich können Sie dort auch ein leeres Stylesheet referenzieren, um einen Text in 'Reinkultur' zu erzwingen. Wieviel Aufwand Sie an dieser Stelle betreiben, bleibt Ihre Entscheidung.
Wir nutzen hier eine simplifizierte Version des Styleswitchers, der unter anderem bei www.einfachfueralle.de zum Download angeboten wird. Einbindung und Konfiguration unserer Version sind denkbar einfach, da Sie keine Skripte anfassen müssen.
Binden Sie einfach die Datei styleswitcher.js ein, zusätzlich empfehlen wir auch das Einbinden der cookies.js, um die gewünschte Einstellung seitenübergreifend beizubehalten.
Die Stylesheets referenzieren Sie wie gewohnt -
<link rel="stylesheet" href="css/grafisch.css" type="text/css" title="Grafisch">
<link rel="alternate stylesheet" href="css/nurtext.css" type="text/css" title="Nur Text">
Achten Sie auf das Attribut title= - die hier gewählte Schreibweise müssen Sie später, bei der Referenzierung der Buttons, identisch beibehalten!
Schauen wir uns so einen Button gleich mal an - vom Prinzip her ein ganz gewöhnlicher Form-Button, dessen einzelne Werte wir anschließend erläutern:
<form action="switch">
<input type="button"
id="style"
value="Nur Text"
onclick="setActiveStyleSheet(value);">
</form>
Hier die Werte im Einzelnen -
action="switch"
Ruft die Funktion auf (nicht umbenennen!)
id="style"
Im Skript angesprochene ID (nicht umbenennen!)
value="Nur Text"
Title des Stylesheets (Schreibweise genau einhalten, auch Groß- und Kleinschreibung!)
onclick="setActiveStyleSheet(value);"
Zuweisung des gewünschten Stylesheets
Natürlich dürfen Sie die gekennzeichneten Werte auch umbenennen - aber dann müssen Sie die Skripte doch anfassen ;-))
Der zweite Button wird identisch eingebunden, es ändert sich lediglich der Wert für *value*:
value="Grafisch"
Wenn Sie möchten, können Sie auf diese Art natürlich noch weitere Buttons einbinden und mit jeweils eigenen Stylesheets verknüpfen.
Hinweis
Die Links in den beiden Menüleisten (oben und links) dienen nur zu Anschauungszwecken und verweisen ausnahmsweise auf "sich selbst".