Browserweiche per CSS

Das große Übel: CSS im Internet Explorer (IE) und im Mozilla Firefox und anderen “guten” Browsern.

Der Internet Explorer (IE) interpretiert leider Cascading Style Sheets (CSS) und das Boxmodell nicht so wie es korrekt wäre - außerdem können andere Browser wie der Mozilla Firefox auch einfach mehr.

Glücklicherweise lässt sich per CSS eine einfache und schnelle Browserweiche bauen.

Browserweiche für größere Blöcke die unterschiedlich sind:

#meineid {

color: #666666;

margin: 0 10px 0 10px;

}

#meineid[id] {

margin: 0 12px 0 12px;

}

Durch die Angabe von [id] wird der Selektor [id] angesprochen, den der IE nicht versteht.
Dadurch werden nur für “gute” Browser wie den Mozilla Firefox Tags überschrieben - in diesem Fall durch Änderung des “margin” Parameters.
Übrigens funktioniert das auch mit [class].

Browserweiche für kleinere Änderungen:

Ein weiteres Übel ist die Darstellung von transparenten PNG-Dateien (Portable Network Graphics).
Der Mozilla Firefox kann diese korrekt darstellen - der Internet Explorer leider nicht.

Also bleibt nichts anderes übrig, als im IE nicht so schöne GIF-Dateien zu verwenden, und in den “guten” Browsern wie auch Opera können transparente PNG-Dateien verwendet werden.

Dies könnte auf diese Weise bewerkstelligt werden:

#meineid {

background: url(”../images/meinbild.png”) bottom right no-repeat !important;
background: url(”../images/meinbild.gif”) bottom right no-repeat;
}

Durch die Angabe von !important weiß der Mozilla Firefox, dass diese Angabe höhere Priorität hat und verwendet stattdessen diese Parameter. Der Internet Explorer kennt den !important-Befehl nicht und liest erst die Zeile mit dem PNG-Bild, überschreibt dann aber den background-Parameter in der nächsten Zeile.
Also ist die Reihenfolge wichtig - sonst klappt’s nicht.

Also auf in den Kampf mit den Browsern!

Kommentarfunktion ist deaktiviert