CarstenP: CSS - Browserabhängig

Beitrag lesen

Hallo isuella,

<link href="norm.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
@import url("further.css");
-->
</style>

Auf diese Weise versteckst Du, wie du selbst gesehen hast, das CSS vor Netscape 4. Aber Du mußt den Artikel schon zu Ende lesen... ;-)

Netscape 6 und 7 basieren auf Mozilla. Mozilla ist (zusammen mit Opera) in Punkto CSS der fähigste Browser. Vor ihm wirst Du nichts verstecken können. Aber vor dem IE kannst Du CSS-Angaben verstecken (siehe den zweiten Teil in dem Link).

Beispiel:

<p id="content">Absatz, der in IE anders formatiert werden soll, als in Mozilla/Netscape7</p>

Du schreibst zuerst den CSS-Code für den IE:

p { /*irgendwelche CSS-Formatierungen*/ }

Anschließend schreibst Du direkt darunter den CSS-Code für Mozilla und andere Browser, die Attribut-Selektoren verstehen. Aufgrund der Regeln für CSS ergänzt bzw. überschreibt dieser Code die vorher gemachten Angaben:

p[id] { /*andere CSS-Formatierungen, die der IE nicht sehen kann, dafür aber Mozilla und Co.*/ }

Diese Variante ist sinnvoll, wenn die Unterschiede im CSS-Code überschaubar sind. Wenn Du tatsächlich komplett unterschiedliche Stylesheets einbinden möchtest, dann gibt es noch eine weitere Methode, die in dem Artikel nicht genannt wird. Der IE versteht die @import-Regel nicht mehr, wenn Angaben zum Ausgabemedium (all, screen, print, etc.) gemacht werden:

<style type="text/css">
<!--
@import url('style1.css');
/* diese Import-Regel verstehen IE, Mozilla, Opera,... */

@import url('style2.css') all;
/* IE versteht diese Import-Regel nicht */
-->
</style>

Achtung: Mozilla und Opera werden natürlich beide Style-Sheets laden. Kommen in beiden Stylesheets unterschiedliche Angaben vor, so überschreiben die Angaben aus dem ersten die Angaben aus dem zweiten. Kommen Angaben nur in einem Stylesheet vor, so ergänzen sich die Angaben.

Weitere "CSS-Hacks" zum Verstecken von CSS vor den diversen Browser findest Du z.B. hier:
http://w3development.de/css/hide_css_from_browsers/

Viele Grüße
Carsten