2010-12-03 16 views
1

Je sais qu'il existe une détection de navigateur dans mootools. Par conséquent, je veux savoir comment changer le style CSS dépend du navigateur? -V-Comment modifier le style CSS dépend du navigateur

+1

avait une question similaire: http://stackoverflow.com/questions/4323186/browser-os-as-body-class – meo

+0

La détection du navigateur ne devrait pas être faite parce qu'il n'y a aucune garantie que vous obtenez la bonne réponse et certains navigateurs peuvent usurper l'agent utilisateur. Au lieu de cela, utilisez la détection de fonctionnalité. Cependant, la plupart des navigateurs modernes n'ont pas besoin de CSS spécial. Seul IE nécessite de tels hacks mais c'est pourquoi ils ont créé des "commentaires conditionnels". – Rob

Répondre

0

2 façons:

côté serveur

Detect chaîne de l'agent utilisateur et servent la feuille de style associée lors de la génération de la page.

feuilles de style conditionnel

Ce n'est servi à IE (toutes versions)

<!--[if IE]> 
     <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> 
<!--<![endif]--> 

Jetez un oeil à:

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Pour les conditions relatives aux versions différentes précisément.

Remarques

mieux pour tenter probablement de résoudre le problème sous-jacent plutôt que de recourir à hacks car il sera beaucoup plus facile à entretenir. Sachez également que de nouvelles versions sont publiées en permanence, que les versions des navigateurs peuvent être usurpées, etc. Il ne devrait être utilisé que pour des corrections spécifiques et isolées lorsque vous ne trouvez pas une autre solution.

+0

Que diriez-vous de chrome? –

0

La détection du navigateur n'est nécessaire que pour les anciennes versions d'IE, s'il y a des problèmes dans d'autres navigateurs modernes, il s'agit probablement d'une erreur de développeur.

Une façon est de vérifier côté serveur:

// returns true on at least a minimal version of IE, or if is not IE 
function checkIEVersion(minimal) { 
    var ver = true; 
    if (navigator.appName == 'Microsoft Internet Explorer') { 
     var ua = navigator.userAgent; 
     var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 
     if (re.exec(ua) != null) ver = parseFloat(RegExp.$1) >= minimal; 
    } 
    return ver; 
}; 

Une autre façon est à l'aide conditional comments en html:

<!--[if lt IE 9]><html class="ie"><![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--><html><!--<![endif]-->  

<!--[if lt IE 9]> 
<script src="js/html5.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="css/ie.css"> 
<![endif]--> 

Puis le style css régulière ressemblera à ceci:

.somestyle {} 

Et le style de repli dans ie.css ressemblera à:

.ie .somestyle {} 
0

question Nice, d'abord, vous pouvez ajouter différentes classes CSS comme:

.color-safari{} 
.color-chrome{} 

Ensuite, faire élément avec classe mais vide, comme:

<input id="myID" type="text" name="hi" class=""> 

Puis dans script par t, vous pouvez ajouter ce qui suit pour vérifier le navigateur:

 var userAgent = navigator.userAgent.toLowerCase(); 
    if (userAgent .indexOf('safari')!=-1){ 
     if(userAgent .indexOf('chrome') > -1){ 
     //browser is chrome 
      $("#myID").addClass("color-chrome"); 
     }else{ 
     //browser is safari, add css   
      $("#myID").addClass("color-safari"); 
     } 
     } 

J'ai essayé et ça marche, bravo!