[Résolu] Sélectionner une classe CSS selon le navigateur ?

Sélectionner une classe CSS selon le navigateur ? [Résolu] - HTML/CSS - Programmation

Marsh Posté le 31-03-2011 à 10:20:14    

Bonjour,
 
Je sais qu'il est possible via ce qu'on appelle apparemment un hack CSS de sélectionner une feuille de style CSS spécifique selon le navigateur.
Ce que je voudrais savoir, c'est est-ce qu'il est possible de sélectionner un élément particulier d'une CSS selon le navigateur ?
 
Exemple :  
 

Code :
  1. [Si IE alors]
  2. .class1 {...}
  4. [sinon]
  5. .class2 {...}


 
Ma question concerne class, id ou autre
 
Le mieux serait de toucher à la CSS vu qu'elle est incluse partout.
Au pire, ce serait dans le HTML ou alors via un script JS ou PHP ?
 
exemple :
 

Code :
  1. <p [si IE alors] class="class1" [sinon] class="class2">element</p>


 
Voilà... merci =)


Message édité par LightBen le 31-03-2011 à 16:38:59
Reply

Marsh Posté le 31-03-2011 à 10:20:14   

Reply

Marsh Posté le 31-03-2011 à 10:37:15    

Bonjour, de ce que je connais des hacks CSS, c'est su style :
 

Code :
  1. <head>
  2. <!--[if IE]>
  3. .taclass{
  4. }
  5. <![endif]-->
  7. <!--[if !IE]>
  8. .taclass{
  9. }
  10. <![endif]-->
  11. </head>


 
Tu peux ensuite spécifier quelle version d'IE, (ie : gt6 pour "greater than version 6" ) etc...
A confirmer


Message édité par Antoine T le 31-03-2011 à 10:37:54
Reply

Marsh Posté le 31-03-2011 à 10:39:06    

OK je vais continuer à chercher, si quelqu'un trouve, il peut mettre sa réponse, si je trouve je la mettrai =)

Reply

Marsh Posté le 31-03-2011 à 10:39:27    

Oups, je suis tellement pressé j'ai dit "OK" mais pas "merci" ^^

Reply

Marsh Posté le 31-03-2011 à 11:46:32    

Pour le moment j'ai trouvé une fonction php :
 

Code :
  1. <?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE')) echo "<div style=\"margin-top:21px;\">"?>


 
Mais si j'utilise ça, je vais devoir le faire partout...
 
Est-ce qu'il y aurait un meilleur moyen ?
 
Merci =)
 
NB : le top aurait été ce genre d'algorithme dans la CSS :
 

Code :
  1. si IE alors utiliser la classe1 sinon utiliser la classe2


Reply

Marsh Posté le 31-03-2011 à 14:03:52    

Le code que je t'ai donné est un début de piste justement. C'est de mémoire, mais vérifie sur Google.
 
Dans le head de ta page, tu places ce code. La balise <!--[if IE]> détecte si le navigateur est IE, et exécute le code jusqu'à la balise <![endif]-->. L'autre balise <!--[if !IE] (avec le point d'exclamation) détecte tous les navigateurs non-IE. Le code à placer est donc ta class CSS (ou div, id, etc...) pour les navigateurs non-IE.

Reply

Marsh Posté le 31-03-2011 à 14:28:46    

Alors, il faut que je fasse un récapitulatif pour bien cerner les choses :
 
J'ai un fichier index.php avec mon code, et un fichier style.css qui lui applique toute la charte graphique.
 
Dans index.php j'ai :
 

Code :
  1. <div class="class1">contenu</div>


 
Mais sous IE ça marche mal donc je voudrais à la place :
 

Code :
  1. <div class="class2">contenu</div>


 
Donc pour cela il faudrait remplacer la class1 par class2 pour IE.
 
Tu me dis :
Dans le head de index.php je mettrais
 

Code :
  1. <!--[if !IE]>
  2. .class1{
  3. }
  4. <![endif]-->
  6. <!--[if IE]>
  7. .class2{
  8. }
  9. <![endif]-->


 
Mes questions :
 
1) Je peux mettre ça dans la CSS au lieu de le mettre dans le head ?
2) Sinon, je dois le mettre entre les balises style du head je suppose ?
3) Au niveau du code, comment je fais ? (la div où la classe doit être appliquée)
 
Merci =)

Reply

Marsh Posté le 31-03-2011 à 14:43:52    

Voici un code qui doit marcher (toujours de mémoire, à adapter, ou reprendre). Je ne suis pas un pro du CSS ^^
 
Fichier index.php :

Code :
  1. <html>
  2. <head>
  3. <!--[if !IE]>
  4. div.class{
  5. color : red;
  6. }
  7. <![endif]-->
  9. <!--[if IE]>
  10. div.class{
  11. color : blue;
  12. }
  13. <![endif]-->
  14. </head>
  15. <body>
  16. <div class="class">
  17. Texte en rouge si Firefox, en bleu si IE
  18. </div>
  19. </body
  20. </html>


 
Essaye ceci :)


Message édité par Antoine T le 31-03-2011 à 14:44:15
Reply

Marsh Posté le 31-03-2011 à 15:30:44    

Enfin, j'ai réussi ^^ Merci beaucoup Antoine =)
 
Donc dans mon cas, la condition "if IE" marche, mais "if !IE" ne marche pas. Du coup, j'ai mis le code normal dans le fichier css, et j'ai mis le code pour IE dans le head, car ce code est prioritaire au code CSS.
 
Ma solution personnelle :
 
index.php :
 

Code :
  1. <head>
  2. <!--[if IE]>
  3. <style type="text/css">
  4. class1 {
  5.   border:0px;
  6. }
  7. </style>
  8. </head
  9. <![endif]-->
  11. <body>
  12.   <div class="class1">contenu</div>
  13. </body>


 
style.css :

Code :
  1. class1 {
  2.   border:12px;
  3. }


 
Je sens que je vais m'amuser moi ^^ avec IE9 le décalage d'interprétation est pire :/

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed