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]-->
Attention : interdire le mode de compatibilité ne dispense pas pour autant de tester le rendu sur diverses versions d'Internet Explorer !