Alternate Stylesheets / Eigener Style für alte Browser

[Dominik]

Hallo!

Ich möchte möglichst einfach einen eigenen Stylesheet für ältere Browser (d.h. vor allem NS 4.7) verwenden. Zurzeit verwende ich folgenden Code dazu:

<link rel="stylesheet" type="text/css" href="neu.css" title="Main" media="screen, projection">
<link rel="stylesheet" type="text/css" href="alt.css" title="Netscape">

Klappt auch wunderbar, aber man muss leider höllisch mit den Styles aufpassen. Denn im IE überschreiben die Styles aus "Netscape" die Styles aus "Main". In Opera und Mozilla ist das nicht der Fall. Es klappt also "in eingeschränktem Maße" nur. Man kann in "Netscape" Sachen weglassen, die auch in "Main" vorkommen, aber völlig andere Styles kann man dann nicht benutzen, weil der IE die sonst mischt.

Am liebsten wäre mir eine Möglichkeit ohne Abfrage des "User Agents" und ohne JavaScript bzw. PHP.

Thx,
Dominik

[Dieter Raber]

Hallo Dominik,

Ich gehe folgendermassen vor:

1. Stylesheet mit
<link rel="stylesheet" type="text/css" href="ns4.css">
das nur solche Styles enthaelt, die im NS4x sicher funktionieren.
2. Ein Stylesheet fuer die gaengigen anderen Browser mit
@import url(style.css)
NS4 kann das nicht lesen, den bist du also schon mal los. Evtl. kannst Du hier auch ns4-spezifische Styles ueberschreiben.
3. Ein Extrawurst-Stylesheet fuer IE mit
<!--[if gte IE 5]>
    <style type="text/css">
       @import "ie.css";
    </style>
<![endif]-->
das koennen auch mehrere sein, kommt halt auf die einzelnen Styles an
Falls du irgendwelche Javscripts in diesem Zusammenhang benutzt, kannst Du mit
 <script type="text/javascript">
  <!--
    var ns_old = document.layers;
    var op_old = window.opera && !document.createComment;
    if ((!ns_old) && (!op_old))
    {
      document.writeln('<style type="text/css" media="screen, projection">');
      document.writeln('@import url(js.css);');
      document.writeln('</style>');
    }
  //-->
  </script>
noch einen Style fuer Javascript + DOM-faehige Browser einbinden , im Beispiel sind NS4 und Opera6 ausgeschlossen. Das kann zB. iim Zusammenhang mit Klappmenues interessant sein.
Ich meine auch, es gaebe bei Tipps und Tricks einen Artikel zum Thema.

Dieter

[Dominik]

Danke für die vielen ausführlichen Tipps! Das werde ich jetzt alles erstmal ausprobieren müssen. :)

[Avalon]

Ich möchte möglichst einfach einen eigenen Stylesheet für ältere Browser (d.h. vor allem NS 4.7) verwenden.

Ältere Browser sind MSIE 5.x und Netscape <7.2 oder Opera <7.2. Auch alles was mit Gecko <20030401 arbeitet ist viel zu alt.
Ebenso Firebird 0.6.

Eigentlich ist auch schon die aktuellste Version vom MSIE viel zu alt
(wird eh nur noch von DAU's benutzt - gibt es tatsächlich so viele?).

Netscape4.7 ist ein uralter Browser, also vergiss es!

Ansonsten mach Dir mal Gedanken, mit welche Prioritäten CSS-Angaben (u.a. auch für verschiedene Selektoren - aber auch Reihenfolge) behandelt werden.

MfG
Avalon

[Thomas Luethi]

Hallo,

<link rel="stylesheet" type="text/css" href="neu.css" title="Main" media="screen, projection">
<link rel="stylesheet" type="text/css" href="alt.css" title="Netscape">

Klappt auch wunderbar, aber man muss leider höllisch mit den Styles aufpassen. Denn im IE überschreiben die Styles aus "Netscape" die Styles aus "Main".

Das ist - soweit ich die Spec. verstehe - falsch.
http://www.w3.org/TR/html401/present/styles.html#specifying-external
  "If two or more LINK elements specify a preferred style sheet,
   the first one takes precedence."

Preferred ist ein Stylesheet bei <link rel="stylesheet" ...> _mit_ title-Attribut.

Vermutlich koenntest Du bereits durch eine Umstellung der Reihenfolge
sowie durch Weglassen des title-Attributs fuer neu.css erreichen,
dass die neueren Browser dieses staerker gewichten.

<link rel="stylesheet" type="text/css" href="alt.css" title="Netscape">
<link rel="stylesheet" type="text/css" href="neu.css" media="screen, projection">

Ich hatte vor ein paar Jahren mal ein paar Tests zu dem Thema gemacht.
(Damals hatte ich noch keinen MS IE 6.0, weiss also nicht, was fuer den gilt.)
Das Verhalten der Browser war damals nicht einheitlich und logisch.
Wenn das letzte von mehreren solchen LINK-Tags _kein_ Title-Attribut enthaelt,
dann wird das entsprechende Stylesheet auf jeden Fall beruecksichtigt.
Testseiten mit mehreren CSS:
http://www.tiptom.ch/tests/css_test/css_index.html
Zusammenfassung:
http://www.tiptom.ch/tests/css_test/css_intro.html

---

Ich selbst brauche auch am liebsten den Trick mit media="screen, projection",
um CSS vor Netscape 4 zu verstecken.

Ansonsten siehe:
http://w3development.de/css/hide_css_from_browsers/
http://centricle.com/ref/css/filters/
http://www.tiptom.ch/homepage/faq.html?q=nn4keincss

Am liebsten wäre mir eine Möglichkeit ohne Abfrage des "User Agents" und ohne JavaScript bzw. PHP.

Verstaendlich.
Allerdings kann Netscape 4.x sowieso nur CSS, wenn JavaScript
eingeschaltet ist.
Ein Extrawurst-Stylesheet nur fuer Netscape 4 koennte man so einbauen:
<script type="text/javascript>
 if (document.layers)
    { document.write("<link rel="stylesheet" href="netscape4.css" type="text/css">"); }
</script>

Vermutlich klappts auch so:

if (document.layers)
    { document.write("<link rel='stylesheet' href='netscape4.css type='text/css'>"); }

Gruesse,

Thomas