Comment interdire le mode de compatibilité sur IE ?

Astuceweb

Publié par le , mis à jour le (136895 lectures)

standards ie explorer

Des fois, il vous arrive qu'un client vous appelle en disant « mon site est tout cassé » ou vous signalant qu'une fonctionnalité que vous avez testée sur des navigateurs raisonnablement récents ne marche pas. Après un rapide diagnostic, vous constatez que ledit client utilise Internet Explorer, mais avec, sans aucune raison tangible, le mode de compatibilité activé (la petite page cassée dans la barre d'adresse).

À la base, le mode de compatibilité est prévu pour pouvoir faire fonctionner les vieux sites qui ont été conçus à la mode du tag soup et des tableaux de présentation. Ces derniers se fichaient bien du respect des standards (triste époque du « optimisé pour IE  »).

Idéalement, la possibilité d'utiliser ce mode devrait être laissée, toutefois, il est parfois pénible de chercher pendant une heure ce qui peut ne pas fonctionner chez un utilisateur alors que le site a été conçu dans les règles de l'art (comprenez en respectant les standards, testé sur des versions d'Internet Explorer raisonnablement récentes).

Toutefois, il est possible d'interdire cette possibilité, et de plusieurs manières :

  • via un méta-tag : <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  • via un entête PHP : header('x-ua-compatible: ie=edge');
  • ou soit directement dans un fichier .htaccess via : header set X-UA-Compatible "IE=Edge"

Si vous utilisez la dernière version, et sans avoir restreint cet en-tête aux fichiers uniquement, il pourra être utile de le désactiver pour les types de fichiers n'en ayant pas besoin :

<FilesMatch ".(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico)$">
Header unset X-UA-Compatible
</FilesMatch>

Comme il est difficile d'avoir une liste exhaustive de tous les types de fichiers, autant préférer appliquer cet entête aux fichiers en ayant besoin (php, html, etc.). En utilisant l'une de ces trois méthodes, vous verrez qu'IE ne propose plus ce mode de compatibilité sur votre site, il sera forcé d'utiliser le plus haut mode de rendu.

De plus, si vous utilisez la balise meta, elle ne passe pas au validateur HTML5, il faudra donc dans ce cas l'entourer de commentaires conditionnels :

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->

Ou encore : 

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<![endif]-->

Attention : interdire le mode de compatibilité ne dispense pas pour autant de tester le rendu sur diverses versions d'Internet Explorer !

Ressources

Commentaires

Un rappel surtout utile pour les Intranets et les pages destinées à être affichées en local (serveur localhost ou ouverture directe du fichier HTML), deux cas où, en effet, IE utilise par défaut le mode de compatibilité IE 7 (sauf à décocher une case spécifique dans le panneau de configuration du mode de compatibilité, dont on peut remarquer une illustration sous IE 8 sur cet article de Håkon Wium Lie http://www.theregister.co.uk/2008/08/29/hakon... ).

On peut même forcer l'utilisation de Chrome Frame si installé sur le poste client en faisant content="IE=edge,chrome=1".

Cette astuce est utilisée dans html5boilerplate (https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L11). D'ailleurs ils recommandent d'utiliser le fichier htaccess pour configurer cet élément (cf. h5bp.com/i/378).

Un exemple de fichier htaccess avec cette config https://github.com/h5bp/html5-boilerplate/blob/v3.0.2/.htaccess#L20
De plus on pourrait rajouter l'utilisation de
"BrowserMatch MSIE ie" pour n'envoyer le header que pour les visiteurs sous IE.

Article bien intéressent merci.

Par contre j'ai une question, elle est peut être bête mais je tente quand même, tu dis que :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

doit se trouver dans un commentaire conditionnelle pour passer le validateur. Mais cette déclaration ne devrait-elle pas toujours être dans un commentaire conditionne étant donné qu'elle n'est destiné qu'à IE (si j 'ai bien compris ?)

Merci d'avance.

Oui mais elle n'est destinée qu'à IE si j'ai bien compris ? donc inutile de la servir aux autres navigateurs ?

@Gili effectivement il est inutile de la servir aux autres navigateurs. Dans tous les cas, la balise est présente dans la page HTML, donc elle est servie à tout le monde, et est ignorée par les navigateurs ne la comprenant pas (tous sauf IE donc). Donc je ne pense pas que cela soit gênant si elle n'est pas présente dans des commentaires conditionnels, mis à part pour faire valider sa page au validateur. De plus les commentaires conditionnels vont rajouter (un peu) du poids à la page.
Pour faire "plus simple" et pas être embêté, je pense que la solution par le htaccess est la meilleure. Elle n'augmente pas le poids de la page HTML (enfin pas directement car l'en-tête HTTP est quand même envoyé) et elle permet de cibler IE spécifiquement (cf. mon commentaire ci-dessus) =)

Vraiment merci pour l'astuce. J'ai un ami qui n'arrivait pas à comprendre pourquoi son site était différent, et pour lui expliquer le système de compatibilité... Une ligne de code, ça ira très bien !

Le mode de compatibilité correspond-il à la totale incompétence des équipes en charge du développement d'IE, ou cela fait-il partie d'une stratégie subtile et mécréante de microsoft ?

[serious troll : OFF]

@marc.suisse : oui, c'est cela. Enfin, à ma connaissance.

@Melli : non c'est bassement pragmatique : c'est juste pour éviter que des milliers de sites/intranets codés à la truelle soient tous démolis.

Il y aurait pas une sorte de documentation exhaustive expliquant ce qui se passe en mode quirks ? J'ai aussi appris qu'il y a d'autres navigateurs qui utilisent ce mode qu'IE.