CSS - Browserabhängig

[isuella]

Habe versucht mit folgendem Javascript

<script language="JavaScript">
if((navigator.appName.indexOf("Explorer") >= 0)
 && (navigator.appVersion.indexOf('4.0')>=0 ))
 document.writeln('<link href="msie.css" rel="stylesheet" type="text/css">');
if((navigator.appName.indexOf("Netscape") >= 0)
 && (navigator.appVersion.indexOf('4.0')>=0 ))
 document.writeln('<link href="netscape.css" rel="stylesheet" type="text/css">');
</script>

je nach Browser auf die jeweiligen Style-Sheets zu verlinken.
Im IE 6.0 funktioniert es super, im Netscape 7.0 jedoch greift er nicht auf die css-Datei zu - warum?

[CarstenP]

Hallo,

Im IE 6.0 funktioniert es super, im Netscape 7.0 jedoch greift er nicht auf die css-Datei zu - warum?

Du verläßt Dich auf eine unzuverlässige Technik. Mal abgesehen davon, daß Du auch andere Browser ausschließt, die mit CSS besser umgehen können als der IE. Benutze lieber http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/index.htm

Viele Grüße
Carsten

[isuella]

Vielen Dank erstmal für die Hilfe...
Ich hab wirklich nicht viel Ahnung von javascript ;) sonst wär mir das wohl auch aufgefallen - sorry!

habe es jetzt folgendermaßen in meine Datei eingebaut...

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

</head>

zum testen habe ich einfach mal die norm.css ganz ohne style-sheets gelassen und in der further.css alle meine styles drin.
rufe ich jetzt die seite im ie auf, wirds prächtig formatiert, im netscape 4.6 wirds nicht formatiert (was ja auch richtig ist), im Netscape 7.0 hingegen wird es wieder mit den style-sheets angezeigt?!
kann es sein, dass ns7.0 dieses @import... mittlerweile interpretierten kann?!

[Ingo]

Hi,

kann es sein, dass ns7.0 dieses @import... mittlerweile interpretierten kann?!

aber sicher. diese "browserweiche" zielt nur auf deie ganz alten browser, zu denen der nn4 gehört.
übrigens kannst du die kommentare im css heute auch getrost weglassen. die stammen noch aus den zeiten vor nn4, wo einige browser mit css-anweisungen im allgemeinen nichts anfangen konnten.
freundliche Grüße
Ingo

[at]

Hallo.

übrigens kannst du die kommentare im css heute auch getrost weglassen. die stammen noch aus den zeiten vor nn4, wo einige browser mit css-anweisungen im allgemeinen nichts anfangen konnten.

Kommentare _im_ CSS können sehr sinnvoll sein, Kommentare _um_ das CSS -- also direkt innerhalb des <style>-Bereiches -- sind hingegen nicht notwendig.
Und ja, ich weiß, dass es so gemeint war. Ich wollte nur jedes Missverständnis ausschließen.
MfG, at

[Ingo]

Hi,
erwischt..;-)

Kommentare _um_ das CSS -- also direkt innerhalb des <style>-Bereiches -- sind hingegen nicht notwendig.

allerdings wären
<style type="text/css">
  /* Beginn der allgemeinen Style-Definitionen */
...
  /* Ende der allgemeinen Style-Definitionen */
</style>
ja auch solche Kommentare.
Vielleicht sollten wir uns auf 'HTML-Kommentare innerhalb des Style-Bereiches' einigen?

freundliche Grüße
Ingo

[at]

Hallo.

Kommentare _um_ das CSS -- also direkt innerhalb des <style>-Bereiches -- sind hingegen nicht notwendig.

allerdings wären
<style type="text/css">
  /* Beginn der allgemeinen Style-Definitionen */
...
  /* Ende der allgemeinen Style-Definitionen */
</style>
ja auch solche Kommentare.

Genau. Und die sind sicher nicht notwendig.

Vielleicht sollten wir uns auf 'HTML-Kommentare innerhalb des Style-Bereiches' einigen?

Dein eigenes Beispiel zeigt, wie unsinnig diese Kommentare sind:
<style [...]>
/* Beginn [...] Style[...] */
/* Ende [...] Style[...] */
</style>
enthält nun wirklich keinen Mehrwert.
Aber vielleicht findest du ja noch ein überzeugenderes Beispiel ;-)
Dann einige ich mich auch gern.
MfG, at

[CarstenP]

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

[CarstenP]

Hallo,

Kommen in beiden Stylesheets unterschiedliche Angaben vor, so überschreiben die Angaben aus dem ersten die Angaben aus dem zweiten.

So ein Quark. Ich meine natürlich genau anders herum. Die zweiten Angaben überschreiben die ersten.

Viele Grüße
Carsten

[MudGuard]

Hi,

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.

Doch, kann man. Ein kleines Beispiel:

body { font-size:20px; }

p { font-size:13px; } /* versteckt vor Mozilla */

p[id] { font-size:inherit; } /* und schon gibt es für den Mozilla obige Angabe nicht mehr (zumindest für Absätze mit id-Attribut - ggf. durch class oder anderes Attribut, je nach Element, ersetzen...) */

cu,
Andreas

[CarstenP]

Hallo Andreas,

gut, alles eine Frage des Standpunktes... ;-)

Viele Grüße
Carsten

[CarstenP]

Hallo Andreas,

noch ein kleines PS: Ich muß Dir danken!

Ich habe Dein Posting gerade zum Anlaß genommen, mir ein Stylesheet, an dem ich mir gestern und heute die Zähne ausgebissen habe, noch einmal genauer anzusehen. Es lag zwar nicht am "inherit", sondern an einem falschen Attributselektor, aber ohne Dein Posting hätte ich den Fehler in nächster Zeit wahrscheinlich nicht gefunden... :-)

Viele Grüße
Carsten

[Ingo]

Hi,
abgesehen davon, daß Javascript hierzu unsinnig ist, solltest Du ein Javascript nur verwenden, wenn Du verstehst, was es macht.

if((navigator.appName.indexOf("Netscape") >= 0)

(wenn sich der browser als netscape zu erkennen gibt)

&& (navigator.appVersion.indexOf('4.0')>=0 ))

(und in der die versionsnummer "4.0" vorkommt, also 4.0 bis 4.08?)

dasselbe dann auch für den ie. sag mal... aus welcher mottenkiste hast du das script bloß ausgegraben?

freundliche Grüße
Ingo