Browser-Weichen

Es ist zwar weniger geworden und auch die Erfahrung hilft einem mit der Zeit, jedoch benötigt es immer wieder mal ein paar Browser-Weichen. Nun kann man versuchen diese serverseitig zu behandeln oder clientseitig. Hier soll es mal um die Möglichkeiten im Frontend gehen.

JavaScript

Wer ein JS-Framework wie jQuery einsetzt kann recht komfortabel beispielsweise mit

$.browser.msie

herausfinden, ob der eingesetzte Browser ein Internet Explorer ist. jQuerys Browser-Funktionen bieten noch einige Abfragemöglichkeiten mehr.

CSS

Hacks

Um im CSS Unterscheidungen zu machen gibt es diverse CSS-Hacks. Man nutzt Fehler oder unterschiedliche Interpretationen der Browser aus, um einem speziellen User-Agent eine CSS-Regel anzubieten oder eben genau dem einen eben gerade diese Regel nicht anzubieten. Sonderlich zuverlässig ist das aber leider nicht. Ein Browser-Update kann den CSS-Hack schnell zunichte machen.

Conditional Comments

Da häufig der Internet Explorer in seinen verschiedenen Versionen Ziel von Browser-Weichen ist ist man mit Conditional Comments gut bedient.

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/style/ie7.css" />
<![endif]-->

Mit diesem Code im <head>-Sektor der Seite wird die CSS-Datei ie7.css nur eingebunden, wenn es sich bei dem Browser um einen Internet Explorer der Version 7 oder kleiner handelt.

Nun hat diese Methode allerdings noch einen kleinen Nachteil: Man definiert etwas in seinem normalen Stylesheet und die Sonderbehandlung dafür in der Datei ie7.css – ändert man später etwas am normalen CSS muss man immer im Hinterkopf haben, dass es da ja auch noch eine Sonderregel für den IE7 gab (einen Nachteil, den CSS-Hacks zugegebenermaßen nicht haben). Um diesem Missstand zu begegnen nutzt man die Conditional Comments einfach etwas anders.
<!--[if IE 8]>
<html class="ie8">
<![endif]-->

<!--[if IE 7]>
<html class="ie7">
<![endif]-->

<!--[if IE 6]>
<html class="ie6">
<![endif]-->

<!--[if IE 5]>
<html class="ie5">
<![endif]-->

<!--[if !IE]>
<html class="noie">
<![endif]-->

Ob es die .noie-Klasse braucht ist sicherlich fraglich, ich habe sie hier nur vollständigkeitshalber eingefügt. Im CSS kann man nun später einfach in einer Datei zuerst das normale CSS definieren und anschließend für den entsprechenden IE eine Sonderregel mit vorangestellter Klasse der jeweiligen IE-Version.

p ul {
  padding-left: 0;
}
.ie6 p ul li {
  margin-left: 0;
}

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

Ein Gedanke zu „Browser-Weichen“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.