Sam & Max » browser sniffing http://sametmax.com Du code, du cul Sat, 07 Nov 2015 10:56:13 +0000 en-US hourly 1 http://wordpress.org/?v=4.1 Detecter la version d’IE en Javascript 10 http://sametmax.com/detecter-la-version-die-en-javascript/ http://sametmax.com/detecter-la-version-die-en-javascript/#comments Tue, 19 Mar 2013 09:19:00 +0000 http://sametmax.com/?p=5436 Sniffer le browser, c’est maaaaal. Mais comme toute technique diabolique, il existe quelques corner cases dans lesquels on peut la justifier. Par exemple, vous utilisez un plugin jQuery qui plante mystérieusement sous IE (toute ressemblance avec un événement réel n’est que purement accidentel), et vous ne comprenez pas pourquoi. Vous ne pouvez donc pas détecter la fonctionnalité qu’il manque avec modernizr ou autre, seulement que ça plante sous IE. En attendant que votre ticket de bug soit pris en compte, il faut bien que votre site en prod marche. Donc, détection du browser, et mise en place de mesures de contournement.

Il y a d’autres cas utiles :

  • Faire des statistiques sur les versions d’IE sur votre site sans taper dans votre code backend.
  • Charger dynamiquement des feuilles de styles et scripts pour IE (en opposition aux commentaires conditionnels qui les chargent avec la page).
  • Afficher dynamiquement plus de pub aux utilisateurs d’IE car vous savez qu’ils sont moins tech saavy que les autres et cliquent plus facilement dessus.

Bref, la méthode la plus propre (pour un truc sale :-)) est d’utiliser des commentaires conditionnels pour mettre une classe au tag .

<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
<head>

Ainsi votre page va commencer avec :

<html>

si ce n’est pas IE ou si c’est IE10 (qui est presqu’un navigateur décent).

<html class="ie6">

si c’est IE6 ou moins.

<html class="ie7 ou ie8 ou ie9">

respectivement pour ie7, ie8 et ie 8

Et derrière, pour cibler une version d’IE dans le code JS, jQuery fait des merveilles avec la fonction is():

var browserDeMerde = $('html').is('.ie6, .ie7, .ie8, .ie9');

Rappelez-vous qu’avec de grands pouvoirs viennent de grandes responsabilités, alors n’abusez pas de cette techique, c’est aussi chiant que les mecs qui font des sites Webkit only.

]]> http://sametmax.com/detecter-la-version-die-en-javascript/feed/ 10