Steffen Hollstein

Als Web Entwickler möchte man beim umsetzen einfacher und komplexer Layouts mit CSS möglichst viele Browsertypen unterstützen. Dazu gibt es die möglichkeit Browserspezifische CSS Dateien per Javascript einzubinden, Conditional Comments (die nur Internert Explorer interpretiert) zu verwenden oder CSS Filter (die eigentlich schönere Variante) einzusetzen.

Beispiel Conditional Comments (nur IE):

• lte == lower than equal
• gte == greater than equal

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

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

Beispiel CSS-Filter:

input {/* global definition for all browsers */
    padding: 1px 18px 4px 30px;
}
input, x:-moz-any-link {/* Firefox 2 and older */
    height: 18px;
}
input, x:-moz-any-link, x:default {/* Firefox 3 and newer */
    height: 20px;
}
* html input {/* IE6 Fix */
    padding-top: 3px;
}
*+html input {/* IE7 Fix */
    padding-top: 3px;
}
@media screen and (min-width: 0px){ /* for opera9, safari3 */
    input {
        padding-top: 3px;
        padding-bottom: 5px;
    }
}

Webhilfen zum Thema:

• http://de.wikipedia.org/wiki/Conditional_Comments (Conditional Comments)
• http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html (CSS Filter)
• http://pornel.net/firefoxhack (CSS Filter)
• http://www.thestyleworks.de/tut-art/ie7.shtml (CSS Filter)