X UA Compatible - noelno/dovelei GitHub Wiki

Définition

Son rôle : spécifier pour quelle version d'IE est faite la page web à afficher. Permet donc d'imposer un certain niveau de compatibilité à l'affichage.

IE intègre en effet depuis IE8 les modes de compatibilité (ou "emulation") : en fonction du DOCTYPE ou de X-UA-Compatible, les pages s'affichent comme dans l'une des anciennes versions d'IE et ce même en ayant la dernière version d'IE d'installée. Le but est de pouvoir continuer à afficher de manière convenable les très nombreux sites non standards.

Certains développeurs se servent de X-UA-Compatible pour bloquer le mode Quirks sous IE en imposant au navigateur d'afficher la page conformément à la dernière version d'IE existante ("IE=edge"). Ils s'assurent ainsi que leur page s'affichera toujours en mode "dernière version qui vient de sortir" au fur et à mesure des évolutions de IE. D'autres considèrent qu'il s'agit d'une mauvaise pratique : si l'on veut un site toujours à la pointe (qui s'affiche conformément aux nouveaux standards au fur et à mesure de leur mise en application) il faudrait tester le site à chaque nouvelle version et l'adapter si besoin est aux nouvelles spécifications pour qu'IE détecte tout seul que le site doit être rendu en mode standard.

A la limite on peut utiliser "IE=edge" durant la phase de développement. Ainsi si pendant le développement des nouvelles spécifications sont mises en place l'affichage sera mis à jour automatiquement et le développeur travaillera toujours en fonction de la dernière version.

Le mode compatibilité ayant été introduit dans IE8, http-equiv="X-UA-Compatible" n'est pas supporté dans les versions antérieures.

Où déclarer X-UA-Compatible ?

<meta http-equiv="X-UA-Compatible" content="IE=10" /> - dans le header de la page
header('x-ua-compatible: ie=edge'); - en PHP
header set X-UA-Compatible "IE=Edge" - dans .htaccess

Pour cette dernière solution la compatibilité portera sur tous les fichiers hébergés, alors que les deux précédentes doivent être incluses dans chacune des pages en question. On peut alors spécifier le type de fichier sur lequel on veut que la compatibilité soit assurée ou pas : <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 Certains préfèrent cette solution car le code n'est pas dans la page et celle-ci n'est donc pas alourdie, et ce code n'est fourni qu'aux utilisateurs d'IE.

La solution la plus répandue reste celle de la balise meta dans le header. Pour qu'elle passe au validateur HTML5 il faut la placer entre balises de commentaires conditionnels : Le commentaire conditionnel ne sert qu'à la validation car les autres navigateurs qu'IE ignorent simplement cette balise.

Valeurs possibles

(remplacer x par le numéro de la version de IE désirée)
IE=edge - utiliser le mode le plus avancé disponible
IE=x - utiliser le mode IEx
IE=EmulateIEx - utiliser le mode IEx si le document comporte un DOCTYPE, ou le mode IE5 dans le cas contraire
D'autres valeurs sont acceptées même si fausses dans le contexte. Par exemple IE=7.5 est interprété comme IE=7, IE=100 équivaut à IE=Edge (100 étant une valeur plus élevé que le numéro de la dernière version existante)

Exemples de déclaration

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9" />

Affiche la page en mode compatibilité IE7 (qui correspond au mode standard sous IE7) au minimum et IE9 au maximum. Si l'utilisateur utilise IE8 il voit la page en IE7. Si l'utilisateur utilise IE10 ou + il voit la page en IE9.

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

Affiche la page comme si le navigateur était un IE8, c'est à dire soit en mode standard IE8 soit en mode compatibilité en fonction du DOCTYPE de la page à afficher. (alors que "IE=IE8" affiche toujours le mode standard d'IE8).

Sources

⚠️ **GitHub.com Fallback** ⚠️