CSS
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 05.12.2019
     
Benutzerdefinierte Style-Angaben mit JavaScript

von Jan Winkler

Viele Surfer kennen das Problem: Beim Besuch einer Seite sind einige Inhalte schwer oder gar nicht zugänglich, weil der Webmaster sie mit seinen besten StyleSheets besonders trickreich und aufwändig gestaltet hat. Bieten Sie mit Hilfe von Javascript Alternativen an.

Auch sonst ist es nur schwer möglich - ausgenommen sind neuere Versionen des Mozilla oder Netscape Navigator - die Style-Angaben des Webmasters so zu verändern, dass sie auch dem Benutzer gefallen. Abhilfe kann da ein kleines Script schaffen, das im Folgenden erläutert werden und den Besucher in die Lage versetzen soll, Style Sheets selbstständig auszuwählen.

Funktionsweise
Die Funktionsweise ist relativ einfach: Dem Besucher wird die Möglichkeit geboten, selbst StyleSheets für die jeweilige Homepage auszuwählen. Die Wahl wird innerhalb eines Cookies gespeichert. Bei jedem Aufruf einer Seite der Homepage wird das Script aufgerufen. Es liest den Cookie aus und lädt die jeweils gewählte CSS-Datei ein. Der Benutzer bekommt davon dann nichts mehr mit.

Vorteile
Die Vorteile liegen klar auf der Hand:

Freie Wahl des verwendeten StyleSheets (geeignet z.B. für Benutzern mit Rot-Grün-, Kontrast- oder allgemeinen Sehschwäche)
Übergreifend auf alle Dateien im selben Verzeichnis und Unterverzeichnissen anwendbar
Funktionstüchtig ab Netscape 4.0 und Internet Explorer 4.0
Speichern
Das Speichern läuft - mehr oder weniger - selbstständig. Der Benutzer kann entweder aus einer Liste von zur Verfügung stehenden CSS-Dateien wählen (z.B. über ein SELECT Feld oder CHECKBOX) oder selbst eine lokale Datei angeben (über ein INPUT-File Feld). Die gewählte Angabe wird dann mit JavaScript in einem Cookie gespeichert.

HTML-Beispiel zum Speichern

<form onSubmit="takeCSS()" action="load.htm"
name="form1" method="get">
<input type="Radio" name="cb" checked="checked">
<select name="cssdef">
<option value="black.css">black
<option value="green.css">green
<option value="red.css">red
</select><br>
<input type="Radio" name="cb"><input type="File" name="cssfile"><br>
<br>
<input type="Submit"><input type="reset">
</form>

JavaScript zum Speichern:

function takeCSS()
{
var a = new Date();
var b = new Date(a.getTime() + (24*60*60*1000));

if(document.form1.cb[0].checked == true)
{
document.cookie = 'cssdef="'+document.form1.cssdef.options[document.
form1.cssdef.selectedIndex].value+'";expires="'+b.toGMTString()+";";
}
else
{
document.cookie = 'cssdef="file://'+document.form1.
cssfile.# value+'";expires="'+b.toGMTString()+";";
}
alert('Gespeichert');
location.href = "load.htm";
return
}

Im Beispielcode sind zwei Mal CHECKBOX, ein SELECT Feld sowie ein INPUT-File Feld innerhalb eines FORM definiert. Das Script fragt ab [Zeile 6], welche CHECKBOX markiert ist. Wurde die CHECKBOX für ein vorgegebenes StyleSheet markiert, wird der Wert (VALUE) der ausgewählten OPTION des SELECT's gespeichert [Zeile 8]. Dieser Wert sollte daher den (am besten absoluten) Pfad zur jeweiligen CSS-Datei enthalten. Wurde eine Datei ausgewählt, so wird der Dateiname statt dessen gespeichert [Zeile 12]. Abschliessend wird 'Gespeichert' ausgegeben und der Besucher auf eine andere Seite weiter geleitet.

Laden
Das Laden fällt wesentlich einfacher aus. Der angelegte Cookie wird ausgelesen und der Pfad der CSS-Datei ausgelesen. Anschließend wird der Dateiname als LINK in das Dokument geschrieben.

JavaScript zum Laden

if(document.cookie)
{
a = document.cookie;
a = a.substring(a.indexOf('cssdef')+6,a.length);
a = a.substring(a.indexOf('=')+2,a.length);
a = a.substring(0,a.indexOf('"'));
document.writeln('<link rel="stylesheet" href="'+a+'"
type="text/css">');
}
else
{
document.writeln('<link rel="stylesheet" href="black.css"
type="text/css">');
}

Der Code fragt als erstes ab, ob überhaupt ein Cookie gespeichert wurde. Ist dies nicht der Fall, wird automatisch die Standard-Definition in das Dokument geschrieben [Zeile 11]. Ist ein Cookie vorhanden, wird der Dateiname extrahiert [Zeile 3 bis 6]. Anschließend wird die CSS-Datei in das Dokument geschrieben [Zeile 7].

Hinweise
Am besten und einfachsten ist es, wenn der Lade-Vorgang in einer externen Datei gespeichert und vor allen anderen CSS-Definitionen im HEAD geladen wird (so können ggf. Benuter-Definitionen durch eigene überschrieben werden). Ausserdem sollten Sie darauf achten, dass die CSS-Dateien existieren und möglichst abolute Pfade verwendet werden, da sonst unter Umständen die Dateien aus Unterverzeichnissen heraus nicht gefunden werden können.

(jw)