CSS, selecteur de navigateur via javascript

29/03/2008
WebDev et Design Allez aux commentaires

Vous savez que le javascript peu parfois vous aider à gagner pas mal de temps lors du développement de vos sites (comme IE7.js par exemple). Et bien ici je vais vous présenter 2 solutions pour détecter le type de navigateur utilisé par vos visiteurs, et ainsi créer une classe CSS différente pour chacun d'eux. A noter que je ne cautionne pas forcement cette utilisation un peu intrusive du javascript, mais pour des application AJAX ça peut se justifier.

Par exemple, si le navigateur utilisé est Opera, cette astuce permettra de rajouter une classe CSS .opera à votre balise body.

1. Sélection via jQuery

Pour ceux qui utilisent jQuery, le système est très simple à mettre en place (évidement incluez la librairie jQuery avant)

/* Une fois la page chargée */
$(document).ready(function(){
        $("body").addClass(jQuery.browser);
});

Voilà, avec ce bout de code vous pourrez cibler vos CSS comme ceci:

body.msie{background-color: red}/*Affiche un fond rouge si IE*/
body.mozilla{background-color: blue}/*Affiche un fond bleu si Mozilla Firefox*/
body.opera{background-color: green}/*Affiche un fond vert si Opera*/
body.safari{background-color: yellow}/*Affiche un fond jaune si Safari*/
body.other{background-color: white}/*Affiche un fond blanc pour tous les autres*/

Vous pouvez aussi jouer sur les versions en utilisant la fonction jQuery.browser.version:

/* Une fois la page chargée */
$(document).ready(function(){
        $("body").addClass(jQuery.browser+jQuery.browser.version.substr(0,1));
});

Dans ce cas on aura:

body.msie7{background-color: red}/*Affiche un fond rouge si IE7*/
body.msie6{background-color: blue}/*Affiche un fond bleu si IE6*/
body.opera9{background-color: green}/*Affiche un fond vert si Opera9*/

Voilà, a vous de moduler selon vos besoins ...

2. Sélection en pure javascript

Dans le cas ou vous ne voudriez pas utiliser jQuery, il existe une solution en pure javascript développée par Rafael Lima. Ici on a une avantage supplémentaire par rapport à le méthode jQuery, c'est qu'en plus on peut faire une sélection par système d'exploitation !

Voici les classes CSS disponible après l'installation du .js:

Classe pour les différents systèmes d'exploitation [os]:
  • win - Microsoft Windows
  • linux - Linux (x11 and linux)
  • mac - Mac OS
Classe pour les différents navigateurs [browser]:
  • ie - Internet Explorer (Toutes versions)
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox, Camino
  • opera - Opera (Toutes versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira
Et voici un exemple:
html.gecko div#header { margin: 1em; }/*Mozilla*/
.opera #header { margin: 1.2em; }/*Mozilla*/
.ie .mylink { font-weight: bold; }/*Internet Explorer*/
.mac.ie .mylink { font-weight: bold; }/*Internet Explorer et Mac*/

Pour le téléchargement du .js et la demo, rendez vous sur la page dédiée du projet.

Via StylizedWeb et modifié par mes soins ...

-----

Articles relatifs

  • Bien la technique avec JQuery, j’connaissais pas 😡

  • artotal

    Bonjour,
    il existe une solution pour inclure des css plutôt que des bout de code, parce qu’en php la fonction ereg est déprécie…
    Merci