Webseiten für verschiedene Browser optimieren – Browserweichen und CSS-Hacks helfen

cssWebdesigner kennen das Problem: ein und dieselbe Webseite wird im Internet Explorer anders dargestellt als im Safari oder Firefox. Aufgrund dessen das einige Browserentwickler die Web Standards nicht korrekt einhalten, müssen Webdesigner ihre Seiten für gleich mehrere Browser optimieren. Genau dafür ist es wichtig den verwendeten Browser – evtl. mit Versionsnummer – zu erkennen um ihm entsprechend angepasste und optimierte Styles anzubieten. Im folgenden Artikel werden ein paar Möglichkeiten gezeigt diese Probleme zu lösen.

Conditional Comments – die eingebaute Browserweiche im Internet Explorer

Der Explorer ist die Diva unter den Browsern, zickig und launisch – aber nicht wegzudenken. Der Marktanteil dieses Browsers zwingt jede halbwegs ernst gemeinte Internetpräsenz ihr Layout für ihn zu optimieren. Leider verhalten sich die verschiedenen Explorer Versionen auch zueinander recht unterschiedlich. Umso erfreulicher das Microsoft seinem Browser eine eigene Browserweiche spendiert hat – die Conditional Comments. Diese Kommentare sind aufgebaut wie normale HTML Kommentare und werden vom Explorer ab Version 5 ausgewertet, alle anderen Browser ignorieren sie. Die folgenden Beispiele geben Aufschluss über die Verwendung.

Syntax: <!–[if Bedingung]> Anweisungen <![endif]–>

<!–[if IE 5]>
   <style type=“text/css“> 
    Stylesheets für den IE 5
 </style>
<![endif]–>

<!–[if gte IE 6]>
   <style type=“text/css“> 
   Stylesheets für den IE 6 und größer 
   </style>
<![endif]–>

 <!–[if lt IE 6]>
    <link rel=“Stylesheet“ href=“ie5.css“ type=“text/css“ />
<![endif]–>

<!–[if lt IE 7]>
    <style type=“text/css“>@import url(ie5-6.css);</style>
<![endif]–>

Hier eine Auswahl an Werten und Operatoren:

Wert Funktion Beispiel
!IE wenn kein Internet Explorer <!–[if !IE]>
IE wenn Internet Explorer <!–[if IE]>
IE 5 wenn Internet Explorer Version 5.x <!–[if IE 5]>
IE 5.0 wenn Internet Explorer Version 5.0 <!–[if IE 5.0]>
IE 5.5 wenn Internet Explorer Version 5.5 <!–[if IE 5.5]>
IE 6 wenn Internet Explorer Version 6 <!–[if IE 6]>
IE 7 wenn Internet Explorer Version 7 <!–[if IE 7]>

 

Operator Funktion Beispiel
! Nicht-Operator <!–[if !(IE 6)]> (wenn nicht IE 6)
lt Kleiner-als-Operator <!–[if lt IE 6]> (wenn kleiner als IE 6)
lte Kleiner-gleich-Operator <!–[if lte IE 6]> (wenn kleiner als oder gleich IE 6)
gt Größer-als-Operator <!–[if gt IE 6]> (wenn größer IE 6)
gte Größer-gleich-Operator <!–[if gte IE 6]> (wenn größer als oder gleich IE 6)

 

lt = less-than = kleiner als
lte = less-than or equal = kleiner oder gleich
gt = greater-than = größer als
gte = greater-than or equal = größer oder gleich

Browserweichen mittels CSS-Hack

Im Gegensatz zu den Conditional Comments sind die CSS-Hacks eigentlich Fehler im System. Unterschiedliche Schreibweisen von Selektoren werden in verschiedenen Browser anders interpretiert oder sogar völlig ignoriert. So kann man über CSS direkt bestimmte Browser ansprechen, um eventuelle Problemstellen zu umschreiben. Hier ein Beispiel, der so genannte Star-HTML-Hack:

#id {  
   /* für alle Browser */  
   width: 800px;  
}  

* html #id {  
   /* Star-HTML-Hack für IE6 und kleiner */  
   width: 750px;  
}

Diese Eigenschaft wird zum Beispiel nur vom Internet Explorer bis einschließlich Version 6 interpretiert, alle anderen ignorieren diese Anweisung.

Möchte man genau das Gegenteil erreichen, alle Explorer bis Version 6 ausschliessen, verwendet man den Kind-Selektor:

html>body #ID {
  eigenschaft:wert;
}

Ein weiterer brauchbarer Hack ist der Tan-Hack oder Modified Simplified Box Model Hack:

#id {  
  /* für alle Browser */  
  width: 800px;
}

* html #id {  
  width: 745px;    /* Internet Explorer 5.x */  
  w\idth: 750px;   /* Internet Explorer 6 */  
}  

Achtung: Verwenden Sie das Escape-(/)-Zeichen nicht vor den Buchstaben A-F, da die Anweisung sonst nicht interpretiert wird.

Min-Height 

Bei der Gelegenheit sei noch der CSS Min-Height Fehler im IE6 genannt. Im IE6 wird min-height nicht interpretiert, dafür wird bei height die Größe automatisch dem Inhalt angepasst. Also lässt sich für moderne Browser dieser Wert einstellen, und für den IE6 nach oben genannter Methode umschreiben:

#content { min-height: 400px; }
* html #content { height:400px; } 

Eine weitere Methode steht unter: http://www.dustindiaz.com/min-height-fast-hack/

#content { min-height:400px; height:auto !important; height:400px; }

Min-Width & Max-Width

Und hier die Variante Min-Width kombiniert mit Max-Width:

#main {
   zoom:1; 
   width:expression((document.compatMode&& document.compatMode == ‚CSS1Compat‘) ? (document.documentElement.clientWidth< 950 ? „950px“ : (document.documentElement.clientWidth ]] 1280 ? „1280px“ : ‚auto‘)) : (document.body.clientWidth< 950 ? „950px“ : (document.body.clientWidth ]] 1280 ? „1280px“ : ‚auto‘)));
}

Geht und sieht gut aus! Am Besten in Verbindung mit IE6 Hack um andere Browser auszuschliessen – hier jetzt nur min-width:

/***** max-width für IE *****/
* html #main { 
   zoom:1;
   width:expression((document.compatMode && document.compatMode == ‚CSS1Compat‘) ? (document.documentElement.clientWidth < 840 ? „840px“ : ‚auto‘) : (document.body.clientWidth < 840 ? „840px“ : ‚auto‘));
}

Soweit so gut. Es gibt noch einige weitere Hacks die unter den weiter unten aufgeführten Links nachzulesen sind. Grundsätzlich sei noch angeraten wenn möglich auf Hacks zu verzichten, es sind Fehler die ausgenutzt werden, Fehler die auch mal behoben werden könnten. 

Weiterführende Links:

http://de.selfhtml.org/css/layouts/browserweichen.htm
http://de.selfhtml.org/css/formate/box_modell.htm
http://centricle.com/ref/css/filters/
http://www.tantek.com/CSS/Examples/

Schreibe einen Kommentar

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

vierzehn − 6 =