Detecter la version d’IE en Javascript

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.

No related posts.

flattr this!

10 comments

  1. Profitons en pour appliquer la taxe IE… :)
    cf cet article

  2. Maxime

    Dommage que cet article soit si amateur (fautes d’orthographe, utilisation de balises non escapées dans le texte de l’article, qui du coup sont invisible à la lecture)

    Et surtout dommage de ne pas lister des solutions bien plus simples pour récupérer la version d’IE. Sans classes conditionnelles et sans jQuery!

    La plus courte que je connaisse est:

    var ie = navigator.appVersion.match(/MSIE ([\d.]+)/);
    ie = ie ? $ie[1] : 0;

    la variable ie contient la version de IE sue IE ou 0 ailleurs.

  3. foxmask

    @maxime : Bonjour, c’est dommage de vouloir donner une leçon de français quand on se vautre aussi dans son propre commentaire… “qui du coup sont invisible à la lecture” celle là tout le monde l’aura bien vu . aussi la politesse se perd dans cet exercice.
    Pour JS je laisse juge les autres ;)

  4. @Maxime: Bonjour. cette version ne permet pas de connaître la version d’IE avec certitude (notamment, IE 8 peut tourner en mode compatible IE7 mais c’est toujours IE8 http://msmvps.com/blogs/paulomorgado/archive/2010/04/05/defining-document-compatibility-in-internet-explorer-8.aspx).

    Gloabalement Mozilla ne le recommande pas car il peut contenir historiquement des fausses valeurs:

    The window.navigator.appVersion, window.navigator.appName and window.navigator.userAgent properties have been used in “browser sniffing” code: scripts that attempt to find out what kind of browser you are using and adjust pages accordingly. This lead to the current situation, where browsers had to return fake values from these properties in order not to be locked out of some websites.

  5. (toute ressemblAnce avec un événement réel n’est que purement accidentelLE)

    Tiens je vais me mettre un peu au js

  6. Etienne

    Moi, un jour, je me suis pris un caca de pigeon sur le pied. J’te jure. En marchant… Tombé sur mon pied…

  7. … Mais j’ai dormis dans la chambre du bas parce que j’avais preté mon pull.

  8. @Etienne. Chez moi, y’avait un pigeon qui chiait tous les jours au même endroit. Un jour j’en ai eu marre, je lui ai collé un plomb.
    Et ben sa femelle (ou son mâle), m’a chié une merde d’un mètre carré sur la bagnole..
    Je ne sais pas si ça a un rapport avec IE..Faut voir…

  9. Remram

    Pour le coup vos histoires sont très intéressantes mais on voit toujours pas les balises. Loin de moi l’idée d’aller dans le sens de Maxime, mais il y a bien un problème quelque part ;-)

  10. ^^ Très juste. Et corrigé.

Flux RSS des commentaires

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Jouer à mario en attendant que les autres répondent