CSS-Weichen 2009

Mit einem Ausschluss der alten Browser vom Stylesheet können CSS-Weichen im CSS-Code für die Browser IE 5 und 5.5 unnötig werden, siehe auch Browser richtig auschließen. Mit steigender Qualität der genutzten Browser, besonders der “Internet Explorer”, mag es sowieso nahe liegen, auch bei nur einem Stylesheet mit wenigen CSS-Weichen im Style-Code auszukommen.

Risiko Hacks?

Solche CSS-Filter sind dann riskant, wenn sie Parsing-Fehler verursachen können. CSS-Weichen sollten also möglichst valide sein, oder sonst notfalls am Code-Ende stehen, sodass nachfolgend keine wichtigen Anweisungen mehr stehen. Abgesehen von der Valdidität sollten sie auch noch zukunftssicher sein. Das gelingt mit hoher Wahrscheinlichkeit dann, wenn Fehler der jeweiligen Browser genutzt werden, die in nachfolgenden Versionen behoben sind.

Filter für IE 6 und IE 7

Das einfachste sind im externen Stylesheet, welches den alten Browser nicht angeboten wird, dann die Korrekturen für den IE 6. Nun müssen die einfachen Filter nicht mehr gegen andere alte Browser, ob NC 4 oder IE 5x, abgesichert werden.

/* nur für den IE 6: */
* html body #foo {}
 
/* Ausschluss nur des IE 6 */
html > body #foo {}
 
/* für den IE 7: */
*:first-child+html body #foo {}
 
/* ... oder: */
* + html>body #foo {}

In vielen Fällen reichen wenige Korrekturen für den IE 7, und natürlich etwas mehr für den IE 6, aus. Somit sind die wichtigsten CSS-Filter für grundlegende Korrekturen aufgeführt. Falls der IE 8 unbefriedigende Ergebnisse abliefert, kann er angewiesen werden, sich wie der IE 7 zu verhalten:

< meta http-equiv="X-UA-Compatible" content="IE=7">

Dann regaiert er auch auf die oben aufgeführten Filter für den IE 7.

Weitere CSS-Filter

Darüberhinaus gibt es noch ein paar Möglichkeiten für andere Browser. Grundsätzlich sind solche CSS-Hacks aber eher zu vermeiden, zumal bei der sehr geringen Verbreitung mancher Browserversionen. Mehr unter ↗ Filter und Browserweichen per CSS. Kurz noch die wichtigsten Beispiele für Nicht-IEs hier, wenn es mal Probleme gibt und ein alter Browser doch wichtig sein sollte:

/* safari 3, Chrome: */
@media not tty {  *body #foo[id]{}}
 
/*  Opera 8: */
@media not tty and (min-width: 0px) { html:first-child>b\ody #foo {} }
 
/* Firefox 1-2: */
  body  #foo[id=FOO] {}

Das Beispiel für den Opera 8 ist ein Kandidat für Parsingfehler, sollte also möglichst nicht zum Einsatz kommen oder am Ende des Stylesheet stehen.
Mehr zur FF-1-2 Weiche: ↗ Gecko 1.8 / FireFox 1 - 2 CSS crossover.

IE6 Style nachladen

Schließlich noch eine -nicht validierbare- Möglichkeit ein IE-Stylesheet aus einem anderen nachzuladen. Die alten Internet-Explorer scheinen die einzigen Browser zu sein, die eine import-Anweisung auch noch am Ende eines Stylesheets ausführen. Vorsorglich empfiehlt es sich hier im Gegensatz zur Einbindung per conditional comments, das IE-Stylesheet doch noch mit entsprechenden CSS-Weichen abzusichern, falls ein anderer Browser sich doch an der Ausführung versuchen sollte.

html , body {
/*  css-anweisungen, erst danach import */
}
@import url(alte-ie.css);

• 6. März 2009
  Webdesign, CSS