www.e-workers.de
barrierefrei.e-workers.de
Browser-Weiche
Hinweis: Die Pfade und Dateinamen in den folgenden Beispielen beziehen sich auf die mitgelieferten Demo-Dateien. Sie können natürlich den Vorgaben Ihrer Website angepasst werden. Um die Weiche zu testen, laden Sie das komplette Verzeichnis "browser-weiche" auf Ihren Webspace und rufen anschließend die Datei "test.php"
auf.
Mit Hilfe der Browser-Weiche können Sie jedem Besucher ein auf seinen Browser angepasstes Stylesheet zuweisen. Alternativ können Sie auch auf eine andere Datei umleiten. Dies macht z.B. Sinn für Browser, die überhaupt keine CSS-Anweisungen interpretieren. In unserer Weiche werden zB. NC2, NC3 und MSIE2 auf eine Druckversion der Seite umgeleitet. Dies geschieht automatisch, Ihr Besucher muss keine lästigen Abfragen beantworten.
Normalerweise binden Sie Ihr (externes) Stylesheet mit einer der folgenden Methoden ein:
<link rel="stylesheet" type="text/css" href="css/base.css">
oder
<style type="text/css">
@import url("css/base.css");
</style>
Diese Anweisung ersetzen Sie einfach mit der folgenden:
<? include("includes/weiche.php"); ?>
Bei Aufruf der Seite ermittelt nun das Script den Browser und weist das entsprechende Stylesheet zu oder leitet auf eine andere Datei weiter.
Das Script in der Datei "/includes/weiche.php"
listet die Browser und die Pfade zu den entsprechenden Stylesheets auf. Ein typischer Browser-Eintrag sieht so aus:
if (preg_match("/MSIE 5.+Win./", $browser)) {
$client=3;
$pfad="css/_ie5.css";
}
In der ersten Zeile interessiert uns der Begriff "MSIE 5."
dies ist die eindeutige Kennung, mit der sich ein Browser beim Server identifiziert. Die eindeutigen Kennungen der Browser lassen sich z.B. aus den Server-Logfiles ermitteln.
Die zweite Zeile enthält einen script-internen Hinweis ($client=3;
). Die Zahl "3" kann beliebig ersetzt werden. Wir haben die Browser der Übersicht halber durchnummeriert.
Die dritte Zeile teilt mit, wo das korrekte Stylesheet zu finden ist, in diesem Fall unter "css/_ie5.css"
.
Alles, was Sie in dieser Datei anpassen müssten, sind die Pfade und Dateinamen zu den einzelnen Dateien. Wenn Sie die vorgeschlagenen Pfade und Namen identisch übernehmen, müssen Sie die Datei "/includes/weiche.php"
überhaupt nicht anfassen. Sie brauchen nur die Weiche inkludieren (wie oben beschrieben). Dann können Sie sich direkt an die Arbeit machen und die einzelnen Stylesheets im Ordner "/css/" mit den passenden Anweisungen füllen.
ACHTUNG: Natürlich müssen Sie die Weiche auch anpassen, wenn Sie weitere (bzw. neuere) Browser-Versionen einbinden wollen/müssen. Neu hinzugekommen ist zB. die Opera-Version 6. Um auch diesen Browser in die Weiche einzubinden, gehen Sie folgendermaßen vor:
Suchen Sie in der Datei "/includes/weiche.php"
den folgenden Block -
// Op5
if (preg_match("/Opera\\/5./", $browser)) {
$client=11;
$pfad="css/_op5.css";
}
Kopieren Sie diesen Block und fügen Sie ihn direkt im Anschluß erneut ein. Ändern Sie die relevanten Angaben wie folgt -
// Op6
if (preg_match("/Opera\\/6./", $browser)) {
$client=12;
$pfad="css/_op6.css";
}
Passen Sie bitte auch die durchlaufende Nummerierung der Browser in der Zeile $client=12;
an. Erstellen Sie das passende Stylesheet und legen es im Ordner "/css/" ab.
Umleitung auf eine andere Datei
In der "test.php"
steht in der ersten Zeile folgende Anweisung:
<?php include("includes/druck.php"); ?>
Diese Datei leitet alle Browser, die nicht mit CSS umgehen können, auf eine reine Textversion ("druck.htm"
) um. Alle anderen Browser werden von hier weitergeleitet und mit ihrem entsprechenden Stylesheet versorgt.
Bitte beachten:
In der Datei "/includes/druck.php"
finden Sie folgende Anweisungen -
if (preg_match("/MSIE 2.+Win./", $browser)) {
header("Location: http://barrierefrei.e-workers.de/weiche/druck.htm");
exit;
}
Hier müssen Sie hinter "Location: ..."
den Pfad zur gewünschten Datei eintragen, und zwar immer den absoluten Pfad!
Tipps zu den Stylesheets
Um das Ganze anschaulich zu gestalten, haben wir für jeden Browser ein eigenes Stylesheet angelegt. Im aktuellen Einsatz bedeutet das jedoch nicht, dass Sie jedes Stylesheet von Grund auf entwickeln müssen. Beginnen Sie mit einem Basis-Stylesheet, in dem nur Anweisungen stehen, die von allen Browsers verstanden werden. Diese grundsätzlichen Anweisungen übertragen Sie in sämtliche Stylesheets. Anschließend können Sie browser-spezifische Anpassungen und Erweiterungen vornehmen.
Zum Ausprobieren und experimentieren haben wir ein solches Basis-Stylesheet beigelegt. Sie finden es unter "/css/base.css".
Prüfen Sie auch genau, welche Browser sich zu "Gruppen" zusammenfassen lassen, die mit identischen Style-Anweisungen auskommen. So lässt sich die Anzahl der notwendigen Stylesheets verringern.
Browser, die Sie nicht gesondert berücksichtigen möchten, können Sie natürlich auch komplett aus der Weiche entfernen.
Viel Spaß und viel Erfolg wünscht Ihnen
das e-workers-Team!