Browserweiche
Browserweichen sind Techniken, um Unterschiede in der Darstellung von Webseiten in verschiedenen Webbrowsern zu umgehen, indem für unterschiedliche Browser unterschiedlicher Code angeboten wird. Dabei wird entweder versucht, den Browser per JavaScript durch die User-Agent-Kennung zu identifizieren oder durch einen Browser-Hack CSS-Deklarationen anzuwenden, die nur auf bestimmten Browsern funktionieren.
Darüber hinaus ist es nicht möglich, von einzelnen Medienmerkmalen (z. B. kleiner Bildschirm) auf andere (z. B. Touch) zu schließen.
Heute wird üblicherweise versucht, Webseiten durch die Technik des progressive enhancement in allen Browsern bestmöglich aussehen zu lassen. In JavaScript wird nicht mehr nach dem Browser selbst, sondern nach seinen vorhandenen Fähigkeiten gefragt (Siehe auch: Objektabfragen).
Verwenden Sie gegebenenfalls eine @supports-Regel.
Browser-Hack
Unter einem CSS-Browserhack versteht man Deklarationen, die man für spezielle Browser schreibt oder vor bestimmten Browsern verbergen möchte.
- Frage
- Warum sieht meine Webseite in verschiedenen Browsern unterschiedlich aus?
- Antwort
- Muss eine Website in jedem Browser gleich aussehen?
Jeder Browser hat andere Grundeinstellungen, die im Normalfall zu geringfügigen Abweichungen führen können. Schlimmer sieht es aus, wenn ältere Browser fehlerhafte Darstellungen erzeugen.
Mit Browserhacks nutzen Sie Interpretationsfehler von Browsern, um dadurch gezielt einzelne Browser anzusprechen und in ihnen besondere CSS-Einstellungen zu erreichen, sodass das Endergebnis wie in den richtig darstellenden Browsern aussieht. Alternativ können Sie spezielle Stylesheets zur Verfügung stellen, indem sie mit Conditional Comments ältere Versionen des Internet Explorers oder durch Auslesen der User-Agent-Kennung den verwendeten Browser identifizieren.
Die auf fehlerhafter oder unzureichender CSS-Implementierung aufbauenden Browserweichen können in aktuellen Browsern unerwünschte Begleiterscheinungen haben. Auch ist nicht ausgeschlossen, dass künftige Browserversionen zwar weiterhin den Fehler enthalten, den Sie mittels eines Hacks korrigieren, dies jedoch nicht mehr funktioniert, da gerade die Programmstelle korrigiert wurde, die die Nutzung des Hacks erst ermöglicht hat. Sie sollten daher das über eine Browserweiche erzielte Ergebnis mit unterschiedlichen Browsern kritisch begutachten und dies in regelmäßigen Abständen mit neu erschienenen Versionen wiederholen.
Zudem sind die oben angesprochenen Unterschiede zwischen den Browsern geringer geworden. Es gibt deshalb nur noch wenige Notwendigkeiten für Browserhacks. Prüfen Sie sorgfältig, ob sich der Aufwand lohnt.
Conditional Comments
Die älteren Versionen des Internet Explorers zeichneten sich durch eine unvollständige, bzw. fehlerhafte Umsetzung des CSS aus. Microsoft bot dazu mit den conditional comments eine valide Lösung für den Internet Explorer an: Spezielle HTML-Kommentare mit einer Bedingung, die der Internet Explorer für Windows ab der Version 5 auswertet und hiervon abhängig den im Kommentar enthaltenen HTML-Code ausführt oder nicht. Für alle anderen Browser handelt es sich lediglich um Kommentare, deren Inhalt ignoriert wird.
<!doctype html>
<html>
<head>
<title>CSS-basiertes Layout</title>
<link rel="stylesheet" href="standard.css">
<!--[if IE]>
<style>@import url(ie.css);</style>
<![endif]-->
<!--[if IE 6]>
<style>@import url(ie6.css);</style>
<![endif]-->
<!--[if lte IE 8]>
<style>@import url(ie6-7-8.css);</style>
<![endif]-->
</head>
<body>
<!-- HTML-Quelltext -->
</body>
</html>
Für diese Browserweiche waren solcherart Angaben möglich:
-
[if IE]: alle Versionen (ab 5.0 - 9), -
[if IE 6]: alle 6er-Versionen, -
[if lt IE 8]: alle Version vor 8 (less-than = kleiner als), -
[if lte IE 8]: alle Version bis 8 (less-than or equal = kleiner oder gleich), -
[if gte IE 5.5]: alle Version ab 5.5 (greater-than or equal = größer oder gleich).
{{Hinweis|Internet Explorer 10 und neuere Versionen betrachten conditional comments als Kommentare und ignorieren sie daher[1], außer sie werden mittels einer Meta-Angabe wie
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
Damit emuliert IE10 oder höher das Verhalten von IE9.
in einen Kompatibilitätsmodus versetzt und rendern Webseiten mit der Browser-Engine ihres Vorgängers. Standardmäßig stellt der IE Webseiten aus dem Intranet als IE7 dar[2].
Weblinks
- Übersicht über standardkonforme CSS-Hacks (suit.rebell.at)
- archive.org: Browserweiche - Ausschluss mangelhafter Browser Selfhtml-aktuell-Artikel von Roland Skop (2005)
