Cascading-Style-Sheets sind eine schöne Sache. Damit lässt sich damit
eine Web-Seite wunderbar layouten. Nun soll es schon vorgekommen sein, dass
ein Web-Designer nach der Fertigstellung eines Webs für die gleiche Seite
noch weitere fantastische Ideen hat, wie man diese dem Benutzer darbieten
kann.
Mit Opera und Firefox gibt es die Möglichkeit mehrere verschiedenene
Style-Sheets an eine HTML-Seite zu binden. Der Benutzer kann dann während
der Laufzeit über ein entsprechendes Menü zwischen den verschiedenen Layouts
hin- und herwechseln. Im HTML-Code werden die einzelnen CSS-Dateien wie
folgt eingebunden:
<link rel="stylesheet" type="text/css" href="/style1.css" title="Stil 1">
<link rel="alternate stylesheet" type="text/css" href="/style2.css" title="Stil 2">
Hauptaugenmerk liegt hierbei zum einen auf dem title-Attribut, dass
vorhanden sein muss und zum anderen auf dem rel-Attribut, für
dass beim Standard-Stil lediglich 'stylesheet' und für den alternative Stil
'alternate stylesheet' definiert sein muss.
Einen Haken hat dieses Vorgehen jedoch: der Internet Explorer bleibt
wieder einmal außen vor. Dieser nicht mehr ganz so moderne Browser kennt
keine alternativen Stile. Zudem ist dieser Stil-Wechsel auch nicht sehr
komfortabel, denn man muss sich zum einen durch die Menüs der Browser
hangeln und zum anderen merken sich die moderneren Browser die Auswahl
nicht. Navigiert man zu einer anderen Seite des Webs, so wird wieder der
Original-Stil angelegt!
Eine interessante Alternative habe ich für dieses Web entwickelt: einen
ASP-basierten Style-Switcher. Das Grundprinzip ist relativ einfach. Über
eine Auswahlliste auf dem Web sucht sich der Benutzer einen Stil aus und
diese Auswahl wird während der kompletten Sitzung in einer Session-Variablen
vorgehalten, die beim Aufruf jeder neuen Seite ausgewertet wird.
Sehen wir uns zunächst die Auswahlliste an:
<select id="cboStyle" onchange="setWebStyle(this.form);">
<option >Stil 1</option>
<option >Stil 2</option>
</select>
Der Wechsel des Stils ist hier mit einem kleinen Stück Javascript-Code
realisiert.
<script><!--
function setWebStyle(frm) {
index = frm.cboStyle.selectedIndex;
frm.action = "/inc/setstyle.asp?index=" + index;
frm.submit();
}
--></script>
Man kann jedoch genauso gut eine Schaltfläche verwenden, denn es wird
lediglich eine ASP-Seite aufgerufen (setstyle.asp), die den Index des ausgewählten Stils in
eine Session-Variable schreibt und anschließend zur Ursprungsseite
zurückkehrt:
<% @ LANGUAGE="VBScript" %>
<%
'Auslesen der Parameter
intIndex = CInt(Request.QueryString("index"))
'Vermerken des Index (Stil)
Session("styleIndex") = intIndex
'Aufrufen der Ursprungsseite
response.redirect(Request.ServerVariables("HTTP_REFERER"))
%>
Da hier nur der Index festgehalten wird, macht es Sinn, die einzelnen
CSS-Dateien fortlaufend, anhand des Indexes der Auswahlliste, zu
nummerieren: stil1.css, stil2.css, etc..
Die eigentlich Arbeit verrichtet die ASP-Funktion GetStyles, die im HEAD
jeder Seite aufgerufen wird.
Aufruf
<head>
...
<% Response.write GetStyles() %>
...
</head>
Code
Public Function GetStyles()
'Standardauswahl, wenn noch keine alternative Auswahl getroffen wurde
if Len(Session("styleIndex")) = 0 then
intIndex = 0
Session("styleIndex") = intIndex
else
intIndex = CInt(Session("styleIndex"))
end if
'Zusammenhängen aller Stil-Informationen
str = str & "<link rel=""" & iif(intIndex <> 0, "alternate ","") & _
"stylesheet"" type=""text/css"" href=""/style1.css"" title=""Stil 1"">" & vbcrlf
str = str & "<link rel=""" & iif(intIndex <> 1, "alternate ","") & _
"stylesheet"" type=""text/css"" href=""/style2.css"" title=""Stil 2"">" & vbcrlf
GetStyles = str
End Function
In der Funktion ist die kleine Hilfsfunktion iif enthalten,
mit der entschieden wird, ob die auszugebende HTML-Zeile einen alternativen
Stil darstellt oder nicht.
Public Function iif(condition, value1, value2)
if condition Then
iif = value1
else
iif = value2
end if
End Function
Zu guter Letzt muss nur noch dafür gesorgt werden, dass in der
Auswahlliste auch der Stil ausgewählt ist, der anliegt. Hierzu wird die o.g.
Definition der Liste mit Hilfe der gleichen iif-Funktion etwas
aufgebohrt:
<select id="cboStyle" onchange="setWebStyle(this.form);">
<option <%response.write(iif(CInt(Session("styleIndex"))=0, "selected",""))%>>
Stil 1
</option>
<option <%response.write(iif(CInt(Session("styleIndex"))=1, "selected",""))%>>
Stil 2
</option>
</select>