CSS: Browserweiche

css logo w3corg CSS: BrowserweicheJeder Webentwickler kennt das Problem: Valide programmiert, doch verschiedene Versionen des Internet-Explorers und ältere Browser wie der Netscape 4, stellen das Layout teilweise anders dar als z.B. der standardkonforme Firefox. Hier hilft meist nur der Einsatz einer Browserweiche, die einem bestimmten Browser ein spezielles Stylesheet zuweist. Das Stylesheet enthält nur die Eigenschaften die der “Problem-Browser” auch versteht. Es gibt jedoch auch die Möglichkeit bestimmte Browser komplett auszuschließen, das trifft recht oft auf Browser wie den Netscape 4.x oder den IE 4.x auf Grund ihrer schlechten CSS Unterstützung zu. Insofern die Anzahl der Besucher einer Website die diese Browser noch nutzen recht hoch ist, sollte allerdings auch hier ein separates Stylesheet eingebaut werden. Die Browserweiche wird im Head-Bereich der Site eingefügt und nur von dem gezielt angesprochenen Browsers interpretiert. Hierzu gibt es verschiedenen Möglichkeiten, beginnen wir mit dem zuweisen von Styles für die verschiedenen IE Versionen:

Allgemein

<!–[if IE]> Gilt für alle IE Versionen<![endif]–>

! Ausschließend

<!–[if !IE 5.5]> Wenn nicht Version 5.5 <![endif]–>

lt Kleiner als

<!–[if lt IE 6]> Wenn kleiner als Version 6 <![endif]–>

lte Kleiner als oder gleich

<!–[if lte IE 5.5]> Wenn kleiner oder gleich Version 5.5 <![endif]–>

gt Größer als

<!–[if gt IE 5]> Wenn größer als Version 5 <![endif]–>

gte Größer als oder gleich

<!–[if gte IE 5.5]> Wenn größer oder gleich Version 5.5 <![endif]–>

Das spezielle Stylesheet kann über eine externe Datei geladen werden:

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

Das spezielle Stylesheet kann aber auch direkt mit in die Browserweiche geschrieben werden:

<!–[if IE 6] > < style type="text/css" / >
 .header { height: 169px; width: 938px; background-image:url(bild.jpg); }
 < /style >< ![endif]–>

Weitere Lösungsmöglichkeiten, wie z.B.: Attributabhängige Selektoren und Conditional Comments, stelle ich in einem der kommenden Tutorials vor.




Verwandte Artikel:
» Google Analytics für Einsteiger – Teil 3 – ECommerce Tracking
» Google Analytics für Einsteiger - Teil 2 - Die API
» Google Analytics für Einsteiger
» E-Commerce iPhone Apps
» Twitter für Anfänger - Die 5 ersten Schritte




Trackback: Trackback-URL | Feed zum Beitrag: RSS 2.0
Thema: Tipps & Tricks, Tutorials |

Diesen Beitrag kommentieren.

Kommentiere über Facebook oder weiter unten direkt im Blog

Kommentar abgeben

Bitte lesen!

Ich behalte mir vor Kommentare die gegen folgende Regeln verstoßen nicht zu veröffentlichen, zu kürzen oder zu editieren.

  • Der Kommentar ist Werbung / Spam.
  • Der Kommentar ist beleidigend.
  • Der Kommentar ist sinnlos.

Diese Regeln dienen dazu, die Qualität der Kommentare aufrecht zu halten.