Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 18
Zur Übersicht

18. Browser-spezifisches CSS laden (17.12.1999)

Bedingt durch die Unterschiede zwischen dem Internet Explorer und dem Netscape Navigator bei der CSS-Unterstützung, kann es erforderlich sein, beiden Browsern separate CSS-Anweisungen zur Verfügung zu stellen.

Das Prinzip ist relativ einfach:
Man erstelle zwei (oder bei Bedarf mehrere) CSS-Dateien (z. B. mit dem StyleAssistant ;-). Mittels eines JavaScripts wird der jeweilige Browsername und die Browserversion abgefragt. Danach wird per document.write-Anweisung der entsprechende LINK-Aufruf in das HTML-Dokument geschrieben. 
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      var Zeile, CSSFile;

      if ((navigator.appName=="Microsoft Internet Explorer")
        &&(parseInt(navigator.appVersion.charAt(0))>=4))
      {
      CSSFile="ie4plus.css";
      }

      if ((navigator.appName=="Netscape")
        &&(parseInt(navigator.appVersion.charAt(0))>=4))
      {
      CSSFile="nn4plus.css";
      }

      Zeile="<LINK REL=\"STYLESHEET\" HREF=\""+CSSFile+"\" TYPE=\"text/css\">";
      document.write(Zeile);

      //-->
      </SCRIPT>
Im Beispiel 18 werden den Browsern mit der Versionsnummer >=4 CSS-Dateien mit unterschiedlichen Farben im BODY zugeordnet. 

      /* ie4plus.css für Internet Explorer */

      BODY
      {
      Color: #F3FB9B;
      Background-Color: #201DA3;
      Font-Family: Arial, Helvetica;
      Font-Size: 11pt;
      Text-Align: justify;
      }


      /* nn4plus.css für Netscape Navigator */

      BODY
      {
      Color: #FFFFFF;
      Background-Color: #000000;
      Font-Family: Arial, Helvetica;
      Font-Size: 11pt;
      Text-Align: justify;
      }
Falls zusätzlich noch andere Plattformen wie der Apple Macintosh zu berücksichtigen sind – auf MACs hat man z. B. Probleme mit zu klein dargestellten Schriftgrössen – kann das Script entsprechend erweitert werden (hier nur mit der Abfrage nach der Browserversion >=4 gekoppelt): 
      if
      ((navigator.appVersion.indexOf("Mac")!=-1)
       &&(parseInt(navigator.appVersion.charAt(0))>=4))
      {
      // Evtl. weitere Browser-Abfragen einbauen.
      // CSS-Datei festlegen und in die <LINK ...>-Zeile schreiben.
      }