Browserweichen

Ralph G. Schulz am 30.11.2002 – 7 Kommentare

Mit Hilfe einer Browser-Weiche können Sie jedem Besucher ein auf seinen Browser angepasstes Stylesheet zuweisen.

Die heutige Browser-Landschaft ist für Entwickler sehr schwierig. Es gibt unendlich viele Generationen und Versionen, mit kaum überschaubarem Verbreitungsgrad. Jede Browser-Version hat ihre eigenen Stärken und Unzulänglichkeiten. Zwar setzen sich die modernen Browser immer mehr durch (IE 5/6, NC 6, Opera 5/6, Mozillas), doch einige der älteren Browser zeigen sich als äußerst hartnäckig, allen voran der Netscape der vierten Generation (im Folgenden NC 4x).

Mit Hilfe einer Browser-Weiche können Sie jedem Besucher ein auf seinen Browser angepasstes Stylesheet zuweisen. Alternativ können Sie auch auf eine andere Datei umleiten. Letzteres macht z.B. Sinn für Browser, die überhaupt keine CSS-Anweisungen interpretieren. Zuerst eine Methode, mit der Sie speziell den Browser NC 4x "abfangen" können, und zwar ohne Scripte oder aufwendige Programmierung.

Normalerweise binden Sie Ihr (externes) Stylesheet mit der folgenden Methode ein:

<link rel="stylesheet" type="text/css" href="base.css">

Diese Anweisung verstehen alle Browser. Es gibt jedoch noch eine zweite Anweisung, die von allen Browsers verstanden wird - außer vom NC4x!

<style type="text/css">

@import url(/2002/11/30/browserweichen/-quot-base.css-quot-);

</style>

Wir können diese Tatsache ausnutzen und diesen Code zu einer Art Browser-Weiche umfunktionieren. Notieren Sie beide Code-Schnipsel im Head-Bereich Ihrer Datei (in der angegebenen Reihenfolge!) - das Ergebnis sollte so aussehen:

<html>

<head>

<title>Titel des Dokuments</title>

<link rel="Style-Sheet" type="text/css" href="base-ns.css">

<style type="text/css">

@import url(/2002/11/30/browserweichen/-quot-base.css-quot-);

</style>

</head>

<body>

Was passiert nun? Fangen wir mit NC 4x an: Er stößt als erstes auf die Anweisung
<link rel="Style-Sheet" type="text/css" href="/2002/11/30/browserweichen/base-ns.css">, liest die Anweisungen aus der Datei "/2002/11/30/browserweichen/base-ns.css" und setzt sie entsprechend um. Anschließend stößt er auf die Anweisung
@import url("/2002/11/30/browserweichen/base.css");, die er nicht kennt und deshalb ignoriert.

Alle anderen Browser, die die zweite Anweisung verstehen, ersetzen die Anweisungen aus <link rel="..."> mit den Anweisungen, die sie in @import url("/2002/11/30/browserweichen/base.css"); finden, da diese Anweisungen "frischer" sind - deshalb ist die korrekte Reihenfolge so wichtig! So haben wir mit minimalem Aufwand eine saubere Lösung erreicht - NC4x hat sein "Magerquark-CSS", alle anderen das "Delikatessen-CSS".

Allerdings gilt es hier, einige wichtige Dinge zu verstehen - böse Fallen lauern! Wir haben gesehen, dass ein Stylesheet_A (der Magerquark) eingelesen wird, die enthaltenen Anweisungen dann jedoch durch die Anweisungen aus einem zweiten Stylesheet_B (den Delikatessen) überschrieben werden. Überschrieben - das gilt es zu verstehen! Es wird nicht einfach eine Datei gegen eine andere ausgetauscht, sondern die Inhalte von beiden Dateien werden eingelesen und verglichen. Jeder Magerquark-Anweisung aus _A MUSS eine Delikatessen-Anweisung aus _B gegenüberstehen. Zu abstrakt? Ok, hier ein Beispiel:

In _A steht die Anweisung p { font-size: 80%; }

Diese Anweisung kann nur überschrieben werden, wenn in _B eine Entsprechung zu finden ist, also z.B. p { font-size: 90%; }

In diesem Fall wird die Fontgröße aller Elemente innerhalb P von 80% (für NC4x) auf 90% (für alle anderen Browser) vergrößert. Findet sich in _B keine Anweisung für P, so gilt weiterhin die Anweisung aus _A (da ja keine Anweisung zum Überschreiben vorhanden ist)!

Wir erweitern das Beispiel noch einmal:

In _A steht die Anweisung p { font-size: 80%; font-weight:bold; color:red; }

In _B steht die Anweisung p { font-size: 90%; }

Was passiert? Richtig, der Font wird zwar auf 90% vergrößert, bleibt aber auch weiterhin fett und rot. Das mag in diesem Fall nicht kritisch erscheinen, wird es aber in jedem Fall, bei dem Sie eine Anweisung erteilen, die nur für NC4x gültig sein soll.

Kleiner Ratschlag: Versuchen Sie nicht, Stylesheets _A und _B so zu schreiben, dass sie sich ergänzen. Bearbeiten Sie jedes Sheet als eigenständige Formatvorlage. Prima bewährt hat sich die Methode, zuerst das "Delikatessen"-Stylesheet zu erstellen und am Ende dort alles herauszustreichen, was die "Magerquark"-Version sowieso nicht beherrscht.

Die oben beschriebene Methode eignet sich für alle Fälle, in denen es primär darum geht, den störrischen NC4x mit CSS zu bedienen, ohne für alle anderen Browser gewaltige Abstriche machen zu müssen. Natürlich wird es auch Situationen geben, in denen Sie sehr ausgefeiltes CSS anbieten wollen und daher auch auf die "Macken" anderer Browser eingehen müssen. In solchen Fällen müssen Sie eine "echte" Browser-Weiche nutzen, die jedem Browsertyp ein passendes Stylesheet anbietet. Eine solche Weiche (basierend auf PHP) bieten wir zum Download an. Das Zip-File (ca. 18Kb) enthält Demo-Files und ein Tutorial mit ausführlichen Erklärungen. Bitte lesen Sie auch die beiliegende Textdatei (readme.txt), in der die technischen Voraussetzungen erklärt werden.

Original Artikel ist zu finden unter: http://barrierefrei.e-workers.de/p_weiche.php

Download ZIP