Que fait <meta http-equiv="X-UA-Compatible&quot ; content="IE=edge"> ?

Quelle est la différence si une page web commence par

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

et si une page commence par

<!DOCTYPE html> 
<html> 
  <head> 
     <!-- without X-UA-Compatible meta -->

S'il n'y a pas de différence, je suppose que je peux simplement ignorer le méta-en-tête X-UA-Compatible, puisque je veux simplement qu'elle soit rendue dans le mode le plus standard dans toutes les versions d'IE.

Solution

October 2015 Update

Cette réponse a été postée il y a plusieurs années et maintenant la question devrait vraiment être devriez-vous même envisager d'utiliser la balise X-UA-Compatible sur votre site? avec les changements que Microsoft a fait à ses navigateurs (plus sur ceux-ci ci-dessous). Selon les navigateurs Microsoft que vous prenez en charge, vous n'avez peut-être pas besoin de continuer à utiliser la balise X-UA-Compatible. Si vous devez prendre en charge IE9 ou IE8, je vous recommande d'utiliser la balise. Si vous ne prenez en charge que les derniers navigateurs (IE11 et/ou Edge), j'envisagerais de laisser tomber cette balise. Si vous utilisez Twitter Bootstrap et devez éliminer les avertissements de validation, cette balise doit apparaître dans l'ordre indiqué. Informations complémentaires ci-dessous :

La balise méta X-UA-Compatible permet aux auteurs de sites Web de choisir la version d'Internet Explorer dans laquelle la page doit être rendue. IE11 a apporté des modifications à ces modes ; voir la note IE11 ci-dessous. [Microsoft Edge][1], le navigateur qui a remplacé IE11, n'honore la métabalise X-UA-Compatible que dans certaines circonstances. Voir la note de Microsoft Edge ci-dessous. Selon Microsoft, lorsque vous utilisez la balise X-UA-Compatible, elle doit être placée le plus haut possible dans le head de votre document :

Si vous utilisez la balise META X-UA-Compatible, vous devez la placer aussi près que possible du haut du HEAD de la page. Internet Explorer commence à interpréter le balisage en utilisant la dernière version. Lorsqu'Internet Explorer rencontre la balise META X-UA-Compatible, il recommence à utiliser le moteur de la version désignée. Cela nuit aux performances car le navigateur doit s'arrêter et recommencer à analyser le contenu. Voici vos options :

  • "IE=edge&quot ;
  • "IE=11&quot ;
  • "IE=EmulateIE11&quot ;
  • "IE=10&quot ;
  • "IE=EmulateIE10&quot ;
  • "IE=9&quot ;
  • "IE=EmulateIE9
  • "IE=8&quot ;
  • "IE=EmulateIE8&quot ;
  • "IE=7&quot ;
  • "IE=EmulateIE7&quot ;
  • "IE=5&quot ; Pour tenter de comprendre ce que chacun signifie, voici les définitions fournies par Microsoft : Internet Explorer prend en charge un certain nombre de modes de compatibilité des documents qui activent différentes fonctionnalités et peuvent affecter la façon dont le contenu est affiché :
  • Le mode Edge indique à Internet Explorer d'afficher le contenu dans le mode le plus élevé disponible. Avec Internet Explorer 9, cela équivaut au mode IE9. Si une version ultérieure d'Internet Explorer prenait en charge un mode de compatibilité supérieur, les pages définies en mode Bordure s'afficheraient dans le mode le plus élevé pris en charge par cette version. Ces mêmes pages apparaîtraient toujours en mode IE9 lorsqu'elles seraient visualisées avec Internet Explorer 9. Internet Explorer prend en charge un certain nombre de modes de compatibilité des documents qui activent différentes fonctionnalités et peuvent affecter la manière dont le contenu est affiché :
  • Le mode IE11 offre la meilleure prise en charge possible des normes industrielles établies et émergentes, y compris les normes HTML5, CSS3 et autres. Le mode IE10 offre la meilleure prise en charge possible des normes industrielles établies et émergentes, y compris les normes HTML5, CSS3 et autres. Le mode IE9 offre la meilleure prise en charge possible des normes industrielles établies et émergentes, notamment le HTML5 (Working Draft), la spécification W3C Cascading Style Sheets Level 3 (Working Draft), la spécification Scalable Vector Graphics (SVG) 1.0, etc. [Note de l'éditeur : IE 9 ne prend pas en charge les animations CSS3]. Le mode IE8 prend en charge de nombreuses normes établies, notamment la spécification W3C Cascading Style Sheets Level 2.1 et l'API W3C Selectors ; il offre également une prise en charge limitée de la spécification W3C Cascading Style Sheets Level 3 (Working Draft) et d'autres normes émergentes. Le mode IE7 rend le contenu comme s'il était affiché en mode standard par Internet Explorer 7, que la page contienne ou non une directive . Le mode Emulate IE9 indique à Internet Explorer d'utiliser la directive pour déterminer comment rendre le contenu. Les directives en mode Standards sont affichées en mode IE9 et les directives en mode Quirks sont affichées en mode IE5. Contrairement au mode IE9, le mode Emulate IE9 respecte la directive . Le mode Emulate IE8 indique à Internet Explorer d'utiliser la directive pour déterminer comment rendre le contenu. Les directives en mode Standards sont affichées en mode IE8 et les directives en mode Quirks sont affichées en mode IE5. Contrairement au mode IE8, le mode Emulate IE8 respecte la directive . Le mode Emulate IE7 indique à Internet Explorer d'utiliser la directive pour déterminer comment rendre le contenu. Les directives en mode standard sont affichées en mode standard d'Internet Explorer 7 et les directives en mode quirks sont affichées en mode IE5. Contrairement au mode IE7, le mode Emulate IE7 respecte la directive . Pour de nombreux sites Web, il s'agit du mode de compatibilité préféré. < - Le mode IE5 rend le contenu comme s'il était affiché en mode quirks par Internet Explorer 7, ce qui est très similaire à la façon dont le contenu était affiché dans Microsoft Internet Explorer 5. IE10 NOTE: À partir d'IE10, le mode bizarrerie se comporte différemment des versions précédentes du navigateur. Dans IE9 et les versions antérieures, le mode quirks limitait la page Web aux fonctionnalités prises en charge par IE5.5. Dans IE10, le mode quirks se conforme aux différences spécifiées dans la spécification HTML5. Personnellement, je choisis toujours la métabalise http-equiv="X-UA-Compatible&quot ; content="IE=edge", car les anciennes versions comportent de nombreux bogues, et je ne veux pas qu'IE décide de passer en "mode Compatibilité&quot ; et affiche mon site comme étant IE7 contre IE8 ou 9. Je préfère toujours la dernière version d'IE. IE11 De [Microsoft][2] : À partir d'IE11, le mode Bordure est le mode document préféré ; il représente la meilleure prise en charge des normes modernes dont dispose le navigateur. Utilisez la déclaration de type de document HTML5 pour activer le mode Bordure : Le mode Bordure a été introduit dans Internet Explorer 8 et a été disponible dans chaque version ultérieure. Notez que les fonctionnalités prises en charge par le mode Bordure sont limitées à celles prises en charge par la version spécifique du navigateur qui rend le contenu. À partir d'IE11, les modes document sont dépréciés et ne doivent plus être utilisés, sauf à titre temporaire. Veillez à mettre à jour les sites qui s'appuient sur des fonctions et des modes documentaires hérités du passé afin de refléter les normes modernes. Si vous devez cibler un mode de document spécifique pour que votre site fonctionne pendant que vous le retravaillez pour qu'il prenne en charge les normes et fonctionnalités modernes, sachez que vous utilisez une fonctionnalité transitoire, qui pourrait ne pas être disponible dans les versions futures. Si vous utilisez actuellement l'en-tête x-ua-compatible pour cibler un mode document ancien, il est possible que votre site ne reflète pas la meilleure expérience disponible avec IE11. ***[Microsoft Edge][3] (Remplacement d'Internet Explorer fourni avec Windows 10)*** Informations sur la balise méta `X-UA-Compatible` pour la version "Edge&quot ; d'IE. [De Microsoft][4] : **Introduction du mode document Edge "vivant "**. Comme nous l'avons annoncé en août 2013, nous déprécions les modes document à partir d'IE11. Avec nos dernières mises à jour de la plateforme, le besoin de modes document hérités est principalement limité aux applications web héritées des entreprises. Grâce à de nouveaux changements architecturaux, ces modes documentaires hérités seront isolés des changements apportés au mode Edge "vivant", ce qui contribuera à garantir un niveau de compatibilité beaucoup plus élevé pour les clients qui dépendent de ces modes et nous aidera à avancer encore plus vite dans les améliorations apportées à Edge. IE continuera d'honorer les modes de document servis par les sites intranet, les sites figurant sur la liste d'affichage de compatibilité et lorsqu'ils sont utilisés avec le mode Entreprise uniquement. Les sites Internet publics seront rendus avec la nouvelle plateforme de mode Edge (en ignorant X-UA-Compatible). Notre objectif est que le mode Edge soit le mode de document " vivant " à partir de maintenant et qu'aucun autre mode de document ne soit introduit à l'avenir. Avec les changements apportés à Microsoft Edge, qui ne prend plus en charge les modes document dans la plupart des cas, Microsoft propose un [outil][5] permettant d'analyser votre site pour vérifier s'il contient du code non compatible avec Edge. ***Chrome=1 Info pour IE*** Il y a aussi `chrome=1` que vous pouvez utiliser ou utiliser avec l'une des options ci-dessus comme : `<meta http-equiv="X-UA-Compatible&quot ; content="IE=Edge,chrome=1">`. `chrome=1` est pour Google's Chrome Frame qui est défini comme : Google Chrome Frame est un plug-in de navigateur open source. Les utilisateurs qui ont installé ce plug-in ont accès aux technologies Web ouvertes et au moteur JavaScript rapide de Google Chrome lorsqu'ils ouvrent des pages dans le navigateur. Google Chrome Frame améliore de façon transparente votre expérience de navigation dans Internet Explorer. Il affiche les sites compatibles avec Google Chrome Frame à l'aide de la technologie de rendu de Google Chrome, vous donnant ainsi accès aux dernières fonctionnalités HTML5 ainsi qu'aux performances et aux fonctions de sécurité de Google Chrome, sans interrompre en aucune façon l'utilisation habituelle de votre navigateur. Lorsque Google Chrome Frame est installé, le Web s'améliore sans que vous ayez à y penser. Mais pour que ce plug-in fonctionne, vous devez utiliser `chrome=1` dans la balise méta `X-UA-Compatible`. Vous trouverez plus d'informations sur Chrome Frame [ici] [6]. **Remarque : Google Chrome Frame ne fonctionne que pour [IE6 à IE9][13], et a été retiré le 25 février 2014. Plus d'informations sont disponibles [ici][7]. Merci à @mck pour le lien. ***Validation:*** **HTML5** : La page sera validée par le [W3 Validator][8] uniquement si elle utilise `<meta http-equiv="X-UA-Compatible&quot ; content="IE=Edge">`. Pour d'autres valeurs, l'erreur suivante sera générée : "Un élément méta avec un attribut http-equiv dont la valeur est X-UA-Compatible doit avoir un attribut content avec la valeur IE=edge." En d'autres termes, si vous avez "IE=edge,chrome=1", il ne sera pas validé. J'ignore complètement cette erreur car les navigateurs modernes ignorent tout simplement cette ligne de code. Si vous devez avoir un code totalement valide, envisagez de le faire au niveau du serveur en définissant l'en-tête HTTP. Microsoft précise : "Si ces deux instructions sont envoyées (meta et HTTP), la préférence du développeur (élément meta) est prioritaire sur le paramètre du serveur Web (en-tête HTTP)". Voir la réponse de [olibre][9] ou la réponse de [bitinn][10] pour plus de détails sur la manière de définir un en-tête HTTP. **XHTML** Il n'y a pas de problème de validation lors de l'utilisation de `<meta http-equiv="X-UA-Compatible&quot ; content="IE=Edge&quot ; /> tant que la balise est correctement fermée (c'est-à-dire /> vs >). Twitter Bootstrap Cette balise est fortement recommandée par l'équipe Bootstrap depuis au moins 2014, et [Bootlint][15], le linter rédigé par l'équipe twbs continue de lancer un [warning][14] lorsque la balise est omise. Le linter fait la distinction entre les avertissements et les erreurs, et à ce titre, la gravité de l'omission de cette balise peut être considérée comme mineure.

    Pour plus d'informations sur la compatibilité X-UA, voir le site Web de Microsoft [Defining Document Compatibility][11]. Pour plus d'informations sur ce que prend en charge IE, voir [caniuse.com][12]. Pour plus d'informations sur les exigences de Twitter Bootstrap, consultez le projet bootlint [page wiki][16]. [1] : https://www.microsoft.com/windows/browser-for-doing [2] : https://msdn.microsoft.com/library/ie/bg182625 [3] : https://www.microsoft.com/windows/browser-for-doing [4] : https://blogs.msdn.com/b/ie/archive/2014/11/11/living-on-the-edge-our-next-step-in-interoperability.aspx [5] : https://www.modern.ie/compat-scan [6] : https://www.chromium.org/developers/how-tos/chrome-frame-getting-started [7] : https://blog.chromium.org/2013/06/retiring-chrome-frame.html [8] : https://validator.w3.org/ [11] : https://msdn.microsoft.com/library/cc288325 [12] : https://caniuse.com/ [13] : https://www.chromium.org/developers/how-tos/chrome-frame-getting-started [14] : https://github.com/twbs/bootlint/wiki/W002 [15] : https://github.com/twbs/bootlint [16] : https://github.com/twbs/bootlint/wiki/

Commentaires (31)

Utilisez content="IE=edge,chrome=1"` &emsp ; Ignorez les autres modes X-UA-Compatible.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                                   -------------------------- 
  • Aucune icône de compatibilité**
    La barre d'adresse d'IE9 n'affiche pas le [bouton d'affichage de compatibilité][MSICON]
    et la page n'affiche pas non plus un fouillis de menus, d'images et de zones de texte déplacés.
  • Caractéristiques**
    Cette balise méta est nécessaire pour activer javascript::JSON.parse() sur IE8
    (même lorsque `` est présent)
  • Correctness
    Le rendu/exécution du HTML/CSS/JavaScript moderne est plus valide (plus agréable).
  • Performances*
    Le [moteur de rendu Trident][] devrait fonctionner plus rapidement dans son mode
    bord*. [Moteur de rendu Trident] : https://en.wikipedia.org/wiki/Internet_Explorer

    Utilisation

    Dans votre HTML




    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Microsoft recommande le mode Edge depuis IE11

Comme l'a remarqué Lynda (voir les commentaires), la Compatibility changes in IE11 recommande le mode Bordure :

A partir d'IE11, le mode bord est le mode de document préféré ; Il représente la meilleure prise en charge des normes modernes dont dispose le navigateur.

Mais la position de Microsoft n'était pas claire. Une autre [page MSDN ne recommandait pas le mode Edge] [noEdge] :

Parce que le mode Edge force toutes les pages à être ouvertes en mode standard, quelle que soit la version d'Internet Explorer, vous pourriez être tenté d'utiliser ce mode pour toutes les pages affichées avec Internet Explorer. Ne faites pas cela, car l'en-tête X-UA-Compatible n'est pris en charge qu'à partir de avec Windows Internet Explorer 8. Microsoft recommande plutôt d'utiliser `` : Si vous voulez que toutes les versions prises en charge d'Internet Explorer ouvrent vos pages en mode standard. vos pages en mode standard, utilisez la déclaration de type de document HTML5 [...]. Comme l'explique Ricardo (dans les commentaires ci-dessous), n'importe quel DOCTYPE (HTML4, XHTML1...) peut être utilisé pour déclencher le mode standard, et pas seulement le DOCTYPE de HTML5. L'important est de toujours avoir un DOCTYPE dans la page. Clara Onager a même remarqué dans une ancienne version de Specifying legacy document modes : Le mode Edge est destiné à des fins de test uniquement ; ne l'utilisez pas dans un environnement de production. La confusion est telle que Usman Y a cru que Clara Onager parlait de : L'exemple [...] est fourni à titre d'illustration uniquement ; Ne l&#8217utilisez pas dans un environnement de production.

<meta http-equiv="X-UA-Compatible&quot ; content="IE=7,9,10&quot ; > Bien... Dans la suite de cette réponse, je donne plus d'explications sur les raisons pour lesquelles l'utilisation de content="IE=edge,chrome=1" est une bonne pratique en production.

Historique

Pendant de nombreuses années (2000 à 2008), [la part de marché d'IE était supérieure à 80%][IEMS]. Et IE v6 était considéré comme un standard de facto (80% à 97% de part de marché en [2003][OneStat], [2004, 2005 et 2006][IE6] pour IE6 uniquement, plus de part de marché avec toutes les versions d'IE). Comme IE6 ne respectait pas les [standards du Web] (http://en.wikipedia.org/wiki/Web_standards), les développeurs devaient tester leur site web en utilisant IE6. Cette situation était idéale pour Microsoft (MS), car les développeurs Web devaient acheter des produits MS (par exemple, IE ne peut être utilisé sans acheter Windows), et il était plus rentable de rester non conforme (c'est-à-dire que Microsoft voulait devenir la norme, à l'exclusion des autres entreprises). Par conséquent, de nombreux sites n'étaient compatibles qu'avec IE6, et comme IE n'était pas conforme aux normes Web, tous ces sites Web n'étaient pas bien rendus sur les navigateurs conformes aux normes. Pire encore, [de nombreux sites ne nécessitaient que IE] (http://hintsforums.macworld.com/showthread.php?t=111479). Cependant, à cette époque, Mozilla a commencé le développement de Firefox en respectant autant que possible tous les standards du web (d'autres navigateurs ont été implémentés pour rendre les pages comme le faisait IE6). Comme de plus en plus de développeurs web voulaient utiliser les nouvelles fonctionnalités des standards web, de plus en plus de sites web étaient mieux supportés par Firefox que par IE. Lorsque la part de marché d'IE a diminué, MS a réalisé que rester incompatible avec les normes n'était pas une bonne idée. MS a donc commencé à publier de nouvelles versions d'IE (IE8/IE9/IE10) respectant de plus en plus les normes Web.

La question de l'incompatibilité avec le web

Mais le problème concerne tous les sites web conçus pour IE6 : Microsoft ne pouvait pas publier de nouvelles versions d'IE incompatibles avec ces anciens sites web conçus pour IE6. Au lieu de déduire la version IE d'un site web, MS a demandé aux développeurs d'ajouter des données supplémentaires (X-UA-Compatible) dans leurs pages. IE6 est toujours utilisé en 2016

De nos jours, IE6 est toujours utilisé [(0,7 % en 2016)] [IE62014] (4,5 % en janvier 2014), et certains sites internet sont toujours conformes à IE6 uniquement. Certains sites web/applications intranet sont testés en utilisant IE6. Certains sites intranet ne fonctionnent à 100% qu'avec IE6. Ces entreprises/départements préfèrent reporter le coût de la migration : autres priorités, personne ne sait plus comment le site web/l'application a été mis en œuvre, le propriétaire de l'ancien site web/de l'ancienne application a fait faillite... La Chine représente 50% de l'utilisation d'IE6 en 2013, mais cela pourrait changer dans les prochaines années car la distribution chinoise de Linux est diffusée. Soyez confiant dans vos compétences web

Si vous (essayez de) respecter les standards du web, vous pouvez simplement toujours utiliser http-equiv="X-UA-Compatible&quot ; content="IE=edge,chrome=1". Pour garder la compatibilité avec les anciens navigateurs, il suffit d'éviter d'utiliser les dernières fonctionnalités web : utilisez le sous-ensemble supporté par le plus ancien navigateur que vous voulez supporter. Si vous voulez aller plus loin, vous pouvez adopter des concepts tels que [Graceful degradation], [Progressive enhancement] et [Unobtrusive JavaScript]. (Vous serez peut-être également heureux de lire Que doit prendre en compte un développeur web ?). Ne vous préoccupez pas du meilleur rendu de la version IE : ce n'est pas votre travail, car les navigateurs doivent être conformes aux normes Web. Si votre site est conforme aux normes et utilise des fonctionnalités relativement récentes, les navigateurs doivent donc être conformes à votre site Web. De plus, comme il existe de nombreuses campagnes visant à tuer IE6 (IE6 no more, campagne MS), vous pouvez aujourd'hui éviter de perdre du temps à tester IE ! Expérience personnelle d'IE6

En 2009-2012, j'ai travaillé pour une entreprise utilisant IE6 comme navigateur unique officiel autorisé. Je devais mettre en place un site intranet pour IE6 uniquement. J'ai décidé de respecter les standards du web mais en utilisant le sous-ensemble compatible avec IE6 (HTML/CSS/JS). C'était difficile, mais lorsque l'entreprise est passée à IE8, le site était toujours bien rendu car j'avais utilisé Firefox et [firebug][FB] pour vérifier la compatibilité avec le standard web ;) [Clara] : https://stackoverflow.com/users/1400368 [noEdge] : http://msdn.microsoft.com/library/jj676915.aspx#DCModes [MSICON] : http://windows.microsoft.com/en-US/internet-explorer/products/ie-9/features/compatibility-view [IEMS] : http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg [IE6] : http://en.wikipedia.org/wiki/Internet_Explorer#Desktop_Market_share_by_year_and_version [OneStat] : http://www.onestat.com/html/aboutus_pressbox23.html [IE62014] : http://marketshare.hitslink.com/report.aspx?qprid=3&qpaf=&qpcustom=Microsoft+Internet+Explorer+6.0&qpcustomb=0 [FB] : http://en.wikipedia.org/wiki/Firebug_%28software%29 [Dégradation progressive] : http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement [Amélioration progressive] : http://en.wikipedia.org/wiki/Progressive_enhancement [JavaScript discret] : http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Commentaires (20)

Utilisez cette option pour forcer IE à masquer le bouton de compatibilité du navigateur dans la barre d'adresse :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Commentaires (8)