Créer une feuille de style par navigateur

10 octobre 2007

Pour pouvoir changer de feuilles de styles selon les navigateurs, il faut reconnaître à l’aide de javascript le nom du navigateur et la version du navigateur.

appName retourne le nom du navigateur.

appVersion retourne la version du navigateur sous la forme numéro de version ( plateforme (système d’exploitation), nationalité).

Sur une page version.html on peut détecter la version du navigateur de cette manière :

<script language="Javascript">       

<!--
document.write(appVersion.propriete);       

// -->       

</script>

Voici le code permettant de choisir une feuille par navigateur :

<script language="javascript">
      var navig = navigator.appName;
      var version = navigator.appVersion;
 if (version.search("MSIE 7.0") != -1
&& navig.search("Microsoft")!=-1 )
   {
   document.write("<link rel=\"stylesheet\"
type=\"text/css\" media=\"screen\"
href=\"screenie7.css\" />");
   document.write("<link rel=\"stylesheet\"
 type=\"text/css\" media=\"print\"
 href=\"printie7.css\" />");   
   } 
 else if ( version.search("MSIE 6.0")!=-1
&& navig.search("Microsoft")!=-1  )
   {
   document.write("<link rel=\"stylesheet\"
 type=\"text/css\" media=\"screen\"
href=\"screenie6.css\" />");
   document.write("<link rel=\"stylesheet\"
type=\"text/css\" media=\"print\"
 href=\"printie6.css\" />");   
   }
 else if (  navig.search("Netscape")!=-1  )
   {
   document.write("<link rel=\"stylesheet\"
type=\"text/css\" media=\"screen\"
 href=\"../assets/styles/screenfirefox2.css\" />");
   document.write("<link rel=\"stylesheet\"
type=\"text/css\" media=\"print\"
 href=\"printfirefox2.css\" />");   
   }   
 else if ( navig.search("Opera")!=-1  )
   {
   document.write("<link rel=\"stylesheet\"
 type=\"text/css\" media=\"screen\"
 href=\"screenopera9.css\" />");
   document.write("<link rel=\"stylesheet\"
 type=\"text/css\" media=\"print\"
 href=\"printopera9.css\" />");   
   } else 
   {
   document.write("<link rel=\"stylesheet\"
type=\"text/css\" media=\"screen\"
 href=\"firefox2.css\" />");
   document.write("<link rel=\"stylesheet\"
type=\"text/css\" media=\"print\"
 href=\"printfirefox2.css\" />"); }
 
  </script>
  

http://www.commentcamarche.net/javascript/jsnavigator.php3?imprim=1