Diese Seite enthält eine komplette Suite alternativer Stylesheets. Sie besteht aus vier auswählbaren Styles, einer Weiche für alte Netscape(4x), einem Stylesheet für den Druck sowie Korrektur-Sheets für InternetExplorer 5, 5.5 und 6 (via Conditional Comments).
Beim Aufruf der Seite wird das css/standard.css geladen. Wenn Javascript aktiv ist, werden zusätzliche Links zur Auswahl alternativer Styles (business.css, grunge.css, text.css) angeboten. Dies geschieht über die externe Datei (js/styleswitcher.js), die auch einen Cookie setzt, der sich die aktuelle Auswahl merkt. Ausgenommen von dieser Routine sind alte Netscape4x, diese werden von Haus aus mit einem abgespeckten Stylesheet (css/nn4.css) versorgt. In der Druckvorschau des Browser lassen sich Formatierungen aus der css/print.css überprüfen.
Anwender mit deaktiviertem Javascript können die alternativen Styles natürlich auch auswählen, wenn sie über einen Browser mit entsprechenden Boardmitteln verfügen (Mozilla, Firefox, Opera u.ä.), dort über das Menü 'View' bzw. 'Ansicht'.
Um reichlich Formatierungsmöglichkeiten zu gewähren, wurden die Auswahl-Links in einen eigenen Container (div id="switcher") gesetzt und bestehen aus einer Liste (ul), deren einzelne Punkte separat formatiert werden können (li class="aa", "bb", "cc" ...). Hier der Aufbau des 'Switcherblocks' (Links verkürzt):
<div id="switcher">
<ul>
<li class="aa"><a href="#">Standard</a></li>
<li class="bb"><a href="#">Business</a></li>
<li class="cc"><a href="#">Grunge</a></li>
<li class="dd"><a href="#">Text</a></li>
</ul>
</div>
Der komplette Link zum gewählten Stylesheets sieht so aus:
<a href="#" onclick="setActiveStyleSheet('Standard'); return false;">Standard</a>
Um weitere alternative Styles anzubieten, kann die Liste natürlich erweitert werden. Öffnen Sie die Datei js/styleswitcher.js und editieren Sie den Link-Block im unteren Bereich der Seite. Achten Sie dabei auf die korrekte Syntax und die Maskierung der Anführungszeichen.
Die per Conditional Comments eingefügten Korrektur-Styles für IE, genau wie die Magerstyles für NN4x, sind natürlich optional und könnenen nach eigenem Ermessen gefüllt werden.
© 2005 http://barrierefrei.e-workers.de