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

Publicités