Browserabhängig
    
WWW.WEB-TOOLBOX.NET
ScriptCode ZURÜCK SITEMAP  

 Externe CSS-Datei browserabhängig

Sie möchten abhängig vom verwendeten Browser des Besuchers, eine entsprechende, auf den Browser zugeschnittene CSS-Datei laden.

  Demo als Textmeldung:  



   Sehen sie eine Notwendigkeit?

für den Einsatz unterschiedlicher CSS-Dateien? Ohne CSS-Angaben stellen die verschiedenen Browser Texte für <h1> z.B. immer noch unterschiedlich groß dar. Das ist nicht unbedingt von großer Bedeutung. Andere Anweisungen, auch innerhalb der CSS-Definitionen werden nicht oder nur teilweise richtig und einheitlich umgesetzt. Das trifft vor allem bei spezifischeren Anweisungen zu.
  • margin, padding, spacing
  • display-Anweisungen
  • child-Anweisungen
Entweder sie können mit den Unterschieden leben, sie verzichten auf solche Anweisungen oder sie sehen für jeden Browser eine spezifische CSS-Datei vor, die mittels JavaScript aufgerufen wird.

Browserspezifische CSS-Angaben sind allerdings nicht ohne Tücken. Schließlich müssen sie die Unterschiede in den Nachfolgeversionen im Auge behalten. Dazu gibt es außerdem noch Unterschiede innerhalb der Browserfamilien die Versionsabhängig sind. Eine deutliche Grenze zieht beim IE die Browserversion ab 5.5 .


   JavaScript schreibt Link auf die externe CSS-Datei

Wenn sie eine Unterscheidung treffen möchten, kann JavaScript unterschiedliche CSS-Dateien für die Browser aufrufen. Der übliche Verweis auf die externe CSS-Datei im Head einer HTML-Datei: 
<link rel="stylesheet" href="styles.css" type="text/css">
... wird durch ein Script ersetzt, das abhängig vom Browser den entsprechenden HTML-Code in den Head-Bereich schreibt. Der rot angezeige Dateiname der CSS-Datei wird dann für jeden Browser passend eingetragen.


Dazu sind hier 5 CSS-Dateien erforderlich (Endung: css):
 für den Explorer: ie.css
 für den Netscape 4: nc4.css
 für den Netscape 6 / FireFox: nc6.css
 für den Opera: opera.css
   andere: standard.css




Beispiele für CSS-Dateien:

nc4.css     nc6.css     ie.css


Das Script im Head 

<script type="text/javascript" language="JavaScript">
<!--

1. ermittelt den Browser
2. schreibt den CSS-Dateinamen in eine Variable
3. schreibt die Anweisung zum Aufruf mit:


document.write("<link rel='stylesheet' ... href='dateiname.css'>");


//-->
</script>



Eine Else-Anweisung im JavaScript läd die CSS-Datei "standard.css", falls die 4 vorgegebnen Browser nicht vorgefunden werden.






NACH OBEN