15nov

Sélectionner un code CSS en fonction du navigateur

Un des plus gros soucis pour un développeur est de rendre sa page web identique sur tous les navigateurs. La méthode décrite ci-dessous permet de détecter 14 navigateurs et 3 OS.

Liste des navigateurs compatibles:

  • ie – Internet Explorer (toutes versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (toutes versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • chrome – Google Chrome

Liste des OS compatibles:

  • win – Microsoft Windows
  • linux – Linux (x11 and linux)
  • mac – Mac OS

Pour bénéficier de cette fonction, il suffit de télécharger ce fichier javascript (moins de 1Ko):

Placer ce fichier entre les balises <head> et </head> à l’aide du code suivant:

<script src=”css_browser_selector.js” type=”text/javascript”></script>

Une fois ces opération effectué, il ne vous reste plus qu’à compléter votre code CSS comme indiquer dans l’exemple qui suit:

  1. .ie .example {
  2. background-color: yellow
  3. }
  4. .ie7 .example {
  5. background-color: orange
  6. }
  7. .gecko .example {
  8. background-color: gray
  9. }
  10. .win.gecko .example {
  11. background-color: red
  12. }
  13. .linux.gecko .example {
  14. background-color: pink
  15. }
  16. .opera .example {
  17. background-color: green
  18. }
  19. .konqueror .example {
  20. background-color: blue
  21. }
  22. .webkit .example {
  23. background-color: black
  24. }
  25. .example {
  26. width: 100px;
  27. height: 100px;
  28. }
  29.  
  30. html.gecko div#header {
  31. margin: 1em;
  32. }
  33.  
  34. .opera #header {
  35. margin: 1.2em;
  36. }
  37.  
  38. .ie .mylink {
  39. font-weight: bold;
  40. }
  41.  
  42. .mac.ie .mylink {
  43. font-weight: bold;
  44. }
  45.  
  46. .[os].[browser] .mylink {
  47. font-weight: bold;
  48. }
  49.  
  50. -> pas d'espace entre .[os] et .[browser]

Source: Rafael Lima
Tags: ,

Ecrire un commentaire