Glengamoi (Forum) · AspHeute · .NET Heute (RSS-Suche) · AspxFiles (Wiki) · .NET Blogs

Dynamische Stylesheets

Geschrieben von: Christoph Wille
Kategorie: ASP Grundlagen

This printed page brought to you by AlphaSierraPapa

Cascaded Stylesheets (CSS) erfreuen sich immer größerer Beliebtheit für das Websitedesign. In den meisten Fällen handelt es sich dabei um eine extern eingelinkte Datei mit der Endung .css, die die Definitionen für die Styles enthält. Wer verbietet uns eigentlich, diese Endung auf .asp zu ändern?

Niemand! Die Hauptsache ist, unsere ASP Seite liefert eine gültige CSS Datei - wie diese zustande kommt, ist dem Browser im Prinzip egal - also können wir diese auch personalisiert für den Benutzer erstellen.

Das Opfer unserer Experimente

Um es einfach und überschaubar zu halten, "vergreifen" wir uns nur an einem einzigen Style - dem Style für die H1 Überschrift. Dazu habe ich eine wirklich einfache HTML Datei erstellt (ShowPersonalizedCSS.asp).

<html>
<head>
  <title>Personalisiertes CSS</title>
  <link rel="stylesheet" type="text/css" href="personalizedCSS.asp">
</head>
<body bgcolor="#ffffff">

<h1>Testüberschrift</h1>

</body>
</html>

Das Stylesheet (personalizedCSS.asp) wird extern über die link Direktive im Header eingebunden. Dies ist die Variante, die verwendet wird, wenn auf der gesamten Site dasselbe Stylesheet verwendet werden soll. Die Variante eines Inline-Stylesheets wäre ja für den heutigen Artikel zu leicht zu personalisieren - eine externe Datei macht da mehr Spaß.

Personalisieren des Stylesheets

Für unseren H1 Style wollen wir die Schriftart und die Schriftfarbe personalisieren - dies ist eine von mir willkürlich getroffene Übungsannahme, die man gerne ändern kann. Zum Speichern der Personalierungsdaten habe ich mich für einen Cookie entschieden - warum? Erstens: es ist leicht implementierbar, zweitens bekommt personalizedCSS.asp diesen Cookie auch geschickt.

Auf einen Nachteil möchte ich auch gleich eingehen: Cookies werden am Client gespeichert, und somit immer vom Client zum Server geschickt (der Server schickt nur beim Setzen des Cookies). Wenn man viel im Cookie speichert, kann das schon in meßbaren Traffic ausarten. Der skalierbarere Ansatz wäre im Cookie nur eine "Erkennungs-ID" zu speichern, mit der man die personalisierten Daten in der Datenbank ansprechen kann.

Nach diesem Ausflug in die Welt der großen Websites begeben wir uns wieder zu unserem einfachen Beispiel zurück - SetCSSPreferences.asp. Es verwendet Cookies, und stellt dem Benutzer zwei DropDown Boxen zur Auswahl von Schriftart und -farbe zur Verfügung:

<html>
<head>
  <title>CSS definieren</title>
</head>
<body bgcolor="#ffffff">
<%
strFarbe = Request.Cookies("CSSCookie")("H1Color")
strFont = Request.Cookies("CSSCookie")("H1Font")

If (0 <> Request.ServerVariables("CONTENT_LENGTH")) Then
  strFarbe = Request.Form("txtFarbe")
  strFont = Request.Form("txtFont")
  Response.Cookies("CSSCookie")("H1Color") = strFarbe
  Response.Cookies("CSSCookie")("H1Font") = strFont
End If
%>

<form method="post" action="<%=Request.ServerVariables("SCRIPT_NAME")%>">
Farbe: 
<%
  cString="Schwarz,Grün,Gelb,Blau,Rot"
  cStringValue="black,green,yellow,blue,red"
  GenerateComboBox "txtFarbe", strFarbe, cString, cStringValue
%>
<br>
Schriftart: 
<%
  cString="Arial,Times New Roman,Tahoma"
  cStringValue=cString
  GenerateComboBox "txtFont", strFont, cString, cStringValue
%>
<br>
 
 &nbsp;<br>
<input type=submit value="Änderung durchführen">
</form>

</body>
</html>

Das ist ein All-In-One Forumlar, das das Formular als auch den serverseitigen Auswertungscode beeinhaltet. Das Setzen der Cookiewerte ist einfachst implementiert (die Expiration setze ich nicht), interessant an diesem Formular ist die Funktion GenerateComboBox. Das ist eine von mir implementierte Funktion zur einfachen Generierung von DropDown Boxen: ich übergebe den Namen der Box, die Standardauswahl und zwei Arrays - die die Werte und die sichtbaren Texte beinhalten:

<script language="vbscript" runat="server">
Sub GenerateComboBox(strComboName, strDefaultValue, strDisplay, strValue)
  arrDisplay = Split(strDisplay, ",")
  arrValues = Split(strValue, ",")
  nValues = UBound(arrDisplay)
  If (nValues <> UBound(arrValues)) Then
    Err.Raise 1, "GenerateComboBox: Display.Count != Values.Count!"
  End If
  Response.Write "<SELECT NAME=""" & strComboName & """>" & vbCrlf
  
  For i=0 To nValues
    If (0 = StrComp(arrValues(i), strDefaultValue)) Then
      Response.Write "<OPTION SELECTED VALUE=""" & arrValues(i) & _
           """>" & arrDisplay(i) & vbCrlf
    Else
      Response.Write "<OPTION VALUE="""& arrValues(i) &""">" & _
           arrDisplay(i) & vbCrlf
    End If
  Next
  Response.Write "</SELECT>"
End Sub
</script>

Damit bekommt man eine DropDown Box, die einen bestimmten Wert bereits ausgewählt hat - damit beim zweiten Aufruf des Formulars die vorhergehende Selektion auch wieder korrekt dargestellt wird. Das können Sie gleich testen, denn wir brauchen sowieso Testwerte im Cookie.

Das dynamische Stylesheet

Was uns noch fehlt, ist die Implementierung des dynamischen Stylesheets personalizedCSS.asp. Da ich mich ungerne darauf verlasse, daß alle Werte initialisiert sind, habe ich noch Standardwertabfragen in diese Datei eingebaut - und sei es nur um Benutzern, die Cookies deaktiviert haben, auch ein brauchbares Stylesheet zu präsentieren.

<%
strH1Color = Request.Cookies("CSSCookie")("H1Color")
If ("" = strH1Color) Then strH1Color = "black"
strH1Font = Request.Cookies("CSSCookie")("H1Font")
If ("" = strH1Font) Then strH1Color = "Arial"
%>

H1
{
color:'<%=strH1Color%>';
font-family:'<%=strH1Font%>';
font-weight:bold;
}

Wenn man jetzt die Datei ShowPersonalizedCSS.asp aufruft, bekommt man je nach vorher eingestellten Werten sein eigenes persönliches CSS präsentiert.

Schlußbemerkung

Die heute präsentierte Lösung kann verbessert werden - erstens sollten die Personalisierungen in die Datenbank gespeichert werden, und der Cookie nur noch die Erkennungs-ID enthalten. Zweitens sollte man sich ein gutes Caching für das CSS ausdenken - es ist keine gute Idee, bei jedem Seitenaufruf das CSS generieren zu müssen.