Einfache CSS Browserweiche für Internet Explorer ohne Hack

Hier mal eine kurze, einfache aber dafür umso genialere Browserweiche für CSS, um zwischen den alten Versionen des Internet Explorers und modernen Browsern zu unterscheiden: Und das ganz ohne Hack!

.klasse {
   background-image: url('img.png') !important; /* Firefox, Chrome etc */
   background-image: url('img.gif'); /* Internet Explorer */
}

In der zweiten Zeile ist eine PNG Hintergrundgraphik eingestellt, in der dritten Zeile eine im GIF Format. Da der Internet Explorer zum Beispiel in der Version 6 keine transparenten PNG Dateien unterstützt, möchten wir hier das GIF Image anzeigen.

In modernen Browsern sorgt das !important dafür, dass diese Eigenschaft nicht mehr überschrieben wird. Im Firefox, Chrome und so weiter wird also die PNG Graphik verwendet. Der Internet Explorer kennt das in alten Versionen noch nicht. Hier überschreibt die dritte Zeile die zweite und es wird wie gewollt das GIF statt dem PNG angezeigt.

Dies ist eine super einfache Art für eine Browserweiche, die sich natürlich auch auf andere CSS Eigenschaften anwenden lässt, zum Beispiel um das fehlerhafte Boxmodell des Internet Explorers auszutricksen.