Kristof Lipfert Browserweiche für externe Stylesheets CSS-Crossover

Externe Stylesheets exklusiv nur von bestimmten Browsern ausführen und laden zu lassen erlaubt die stärkste Trennung verschiedener Anpassungen für die jeweiligen Browser

Beispiel CSS-Filter / Crossover zu „CSS für alle Browser”

http://www.lipfert-malik.de/webdesign/tutorial/css.html#BrowserweicheNeueBrowser

CSS-Browserweiche Test

Wenn eine Browserbezeichnung in grüner Schrift angezeigt wird, ist die CSS-Weiche aktiv:

<!--  Autor, Entwicklung 2002-2004 Kristof Lipfert Dueseldorf -->

<!--[if IE 6]>
  <link type='text/css' rel='stylesheet' href='NBIE6.css'> 
<![endif]-->

<!--[if IE 5.5000]>
  <link type='text/css' rel='stylesheet' href='NBI55.css'> 
<![endif]-->

<!--[if lt IE 5.5]>
  <link type='text/css' rel='stylesheet' href='NBIE5.css'> 
<![endif]-->

<!--[if !IE]> 
-->

<style type="text/css">
 /*/*/
  @import (" '\'") screen;
  @import url(NBMoz.c\ss) screen;
 /* */
</style>
<style type="text\/css">
 /*/*/
  @import (" '\'") screen;
  @import url(NBKo.css) screen;
 /* */
</style>

<style type="text\/css">
 /*/*/ 
    @import url(NBOpn.c\ss) screen;
 /* */
</style>  

<style type="text/css">
  @media screen { @import url(NBOpera5.css) screen; }
</style>

<style type="text/css">
  @import("NBIEMac.css");
</style>

<style type="text/css">
@media handheld {
            #dummy{left:0px}
          @import url("NBIE4.css");
                }
</style>

<link type="&{'text/css'};" rel="&{'stylesheet'};"
  href="\&{'NBnetscape4.css'};" disabled>

<!--
<![endif]-->

Nicht alle angewandten Techniken stellen validen Code dar, aber im Tutorial CSS für alle Browser sind noch einige anwendbare Methoden beschrieben. Die Weiche für Netscape 4 funktioniert auch ohne das disabled Attribut, und für Opera 5 hatte ich bei ersten Tests auch mit folgenden Varianten Erfolg:

<!-- Autor 2002-2004 Kristof Lipfert -->
<link type='text/jsss' rel='stylesheet' href='NBOpera5.css'>
<link type='text/css' rel='stylesheet' href='NBOpera5.css""'>
<link type='text/css' rel='stylesheet' href='\NBOpera5.css\'>

Um ggf. beim Internet Explorer unnötige Serveranfragen zu vermeiden wenn aus Validitätsgründen das disabled-Attribut entfällt, weiter unten noch eine sehr einfache Lösung.

Natürlich lassen sich die CSS-Weichen wieder reduzieren, so sieht zum Besipiel die Weiche für Opera 6-7 und Mozilla aus:

<!-- Autor 2002 Kristof Lipfert -->
<style type="text/css">
 /*/*/
  @import url(NBOperaMozilla.css) screen;
 /* */
</style> 

Die Filter vor und nach der @import Anweisung (vgl. Caio) halten Opera 5 fern, Netscape 4 wird von Import so nicht angesprochen, und die Internet Explorer werden, wie schon in "CSS für alle Browser" dargelegt, vom screen ausgefiltert, eine Alternative:

<!-- Autor 2002 Kristof Lipfert -->
<!--[if !IE]> 
-->
<link type="text/css" rel="stylesheet" href="nichtIE.css">
<!--
<![endif]-->

Auch so lassen sich die Conditional Comments der IE 5 bis 6 einsetzen, um alle Internet Explorer 5 bis 6, oder auch gezielt eine einzelne Version von einem Stylesheet fernzuhalten.

Zum Thema Netscape 4 habe ich noch weitere Methoden, teils extra entwickelt, unter Externes CSS bei Netscape 4 einbinden beschrieben.

Valides HTML 4.01

Autor, Entwicklung

Copyright © Dipl.-Des.FH Kristof Lipfert Webdesign GbR Düsseldorf 2002-2004 All Rights Reserved