Compatibilité Internet
Explorer: pour le meilleur
et pour le pire!
Pierre-Louis COLL
Daouda NDIAYE
Ingénieurs Support
Micr...
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!...
Un peu d’histoire …
• Fin des années 90 : IE et Netscape.
– Solution -> DOCTYPE

• Milieu des années 2000: Firefox / Chrom...
Les grandes catégories d’applications
Web
• “Modernes/Publiques”:
– HTML5
– CSS3

• “Legacy/Métier”:
– Modules complémenta...
Inventaire

#mstechdays

Décideurs informatiques
Les principaux type d’incompatibilité
• Rendu des pages /CSS
• Composants tierces
– ActiveX
– Toolbars
– Browser Helper Ob...
Exemple de graphs

#mstechdays

Décideurs informatiques
Mode de navigateur
Compat View Button

Developer Tools
Mode de document
• Standards
mode

• Legacy document
mode
Mode de compatibilité
Compatibility
Button

Meta Tags

Compatibility
List

User

Developer

Administrator

Browsing

Devel...
Gestion du tag X-UA-Compatible
<meta http-equiv=“X-UA-Compatible” content=“IE=X” />

5

EmulateIE-X

N

Version X

Emulate...
Liste d’affichage de compatibilité

•

<domain featureSwitch="overrideXUACompatible:false" uaString="10"
versionVector="10...
BOOKMARKLETS
http://techdays.linqto.me/

#mstechdays

Décideurs informatiques
Mode Quirks Interopérable
• Modification du comportement par défaut du mode Quirks
(HTML5 Quirks)
• Amélioration de la pri...
Importance de l’User-Agent
Une des causes fréquentes relative aux problèmes de
compatibilité est une mauvaise détection pa...
Un outil: Compat Inspector
• Outil d’analyse basé sur Javascript
 <script src="http://ie.microsoft.com/testdrive/HTML5/
C...
COMPAT INSPECTOR
http://ie.microsoft.com/testdrive/HTML5/CompatInspecto
r/
#mstechdays

Décideurs informatiques
MODERN.IE
http://loc.modern.ie/fr-fr/

#mstechdays

Décideurs informatiques
Outils de développement
• Intégrés à Internet Explorer
• Debug / inspection ponctuelle
–
–
–
–
–
–
#mstechdays

Inspecter ...
OUTILS DE DÉVELOPPEMENT
http://ie.microsoft.com/testdrive/Browser/F12Adventur
e/
#mstechdays

Décideurs informatiques
QUESTIONS

#mstechdays

Décideurs informatiques
Appendix: Historique
Une version majeure livrée dans chaque version de Windows*

IE6

IE7

IE8

IE9

IE10

IE11

• Win XP
...
Appendix: Changements de IE7 à
IE11
Changes from IE7 to IE8

Versioning

•
•
•
•

Standards

•
•
•

•

Security
•
•

Archi...
Liens
Compatibility
http://msdn.microsoft.com/en-us/library/hh772379(v=vs.85).aspx
Defining document compatibility
http://...
Liens
Compatibility changes in IE11
http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx
Compatibility change...
Liens
Mode Quirks interoperable
http://msdn.microsoft.com/en-us/library/ie/hh673550(v=vs.85).aspx
User-agent string
http:/...
Digital is
business
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Prochain SlideShare
Chargement dans…5
×

Compatibilité Internet Explorer : pour le meilleur et pour le pire!

2 189 vues

Publié le

Internet Explorer n'échappe pas à la tendance du cycle de vie accéléré des produits et de sa conséquence au niveau maintenance et évolution des applications au sein de l'entreprise. Cette session va tenter d'apporter les réponses aux questions liées à la compatibilité entre les différentes versions d'Internet Explorer et aux différents mode de documentset de compatibilité  au sein d'une même version. Cette exercice nous permettra d'effectuer une revue de divers outils intégrés à Internet Explorer (Outils de développement/F12) ou proposés sur les différents sites Web Microsoft. Cette session n'est pas orientée développement mais nécessite des connaissances intermédiares au niveau HTML et javascript.

Speakers : Daouda Ndiaye (Microsoft France), Pierre-Louis Coll (Microsoft France)

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 189
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • In summary, developers can use IE’s Developer Tool’s Browser Mode menu to test how their site will run in different versions of IE. The Document Mode menu is what developers use to determine the best rendering mode for their site in an IE8 and IE9 browserBrowser Mode sets how IE will identify itself to web servers and how websites will be handled by default. An important detail to remember is that Browser Mode is chosen before IE requests web content. This means that sites cannot choose a Browser Mode. Instead site developers choose a Document Mode for their site, which overrides IE’s defaults and declares how a website is rendered. If a site does not specify a document mode then IE assumes the default document mode, which is IE9’s standards mode in IE9• Developers can change Browser Mode through the “Browser Mode” menu in IE’s F12 Developer Tools. This setting only applies to the developer’s local machine. For example, developers can have IE9 emulate an IE7 browser, IE8 browser or IE9 in Compatibility View. IE9&apos;s F12 Developer Tools Browser Mode menu • Users can change Browser Mode by clicking on the Compatibility View (CV) button, which causes IE8 and IE9 to emulate the IE7 browser. This is why it’s important for site developers to test their site in the Compatibility View Browser Mode. • IE’s Compat View List can also change the Browser Mode for specific sites. The Browser Mode determines • User-Agent (UA) string that IE sends to servers • Document Mode IE defaults to • Conditional Comments that IE evaluates IE9IE9 reports a UA string, version vector, and document mode to match the default browser behavior, which is the most standards-compliant mode in IE9. Use this mode to test how IE9 users experience your site.IE9 Compatibility ViewIE9 reports a UA string, version vector, and document mode, as if it is IE7; however, the UA string also includes the Trident/5.0 token indicating that the browser is really IE9. Use this mode to test how IE9 users experience your site if they click on the Compatibility View button. Note that the Developer Tools in the second IE9 Platform Preview has two Compatibility View options, which is a known issue. IE8IE9 reports a UA string, version vector, and document mode as if it is IE8. Use this mode to test how IE8 users experience your site.IE7IE9 reports a UA string, version vector, and document mode as if it is IE7. Use this mode to test how IE7 users experience your site
  • Document compatibility defines how Windows Internet Explorer renders your webpages. Like other popular browsers, Windows Internet Explorer supports document compatibility modes that affect the way webpages are interpreted and displayed. These modes, also called document modes, allow you to choose between support for the latest standard or support for certain behaviors popularized by older browsersInternet Explorer 8 determines the rendering mode based on the two main factors, value of compatibility mode and value of the !DOCTYPE switch. Webpage can specify compatibility mode either by using a Meta tag or by sending a http header. Meta tag takes precedence over http header when both are present. 1) META Tag - You can place the following HTML tag in the HEAD element of your web page:&lt;meta http-equiv=“X-UA-Compatible” content=“IE=7” /&gt;2) HTTP Header - You can configure your server so that the following HTTP Header is sent with each pageX-UA-Compatible: IE=7Note:The meta tag should be placed in the head section before any script or CSS. By default, pages are rendered in Internet Explorer 10 using the latest rendering engine. However, if the page&apos;s markup instructs the browser (via an &quot;X-UA-Compatible&quot; meta tag, a custom HTTP header from the web server, a !DOCTYPE declaration, or a combination of the three) to display it in an older document compatibility mode (for instance, IE9 Standards mode, EmulateIE7 mode, IE5 (Quirks) mode, and so on), Internet Explorer 10 displays the page in that compatibility modeThe Document Mode declares what mode IE’s Trident engine will render the markup in such as IE9’s Standards Mode. Changing the Document Mode through IE’s Developer Tools refreshes the page, but does not resend the UA string or retrieve new markup from the server.If there&apos;s a strong business reason why you cannot use the latest standards mode supported by Windows Internet Explorer, you can use the X-UA-Compatible header to direct Internet Explorer to display a webpage as if it were being viewed by an older version of the browser.
  • Compatibility View settings can also impact the document mode selection: If a webpage is retrieved from a website in the Local intranet zone (see &quot;About URL Security Zones&quot; at [MSDN-SECZONES]), IE7 mode is used.If the webpage is retrieved from a site in a domain on the Compatibility View list (and the list is active), IE7 mode is used (see &quot;Understanding the Compatibility View List&quot; at [MSDN-UnderstandingCompViewList]).Compatibility View is controlled by browser settings. When a user clicks the Compatibility View button next to the Address bar in Windows Internet Explorer, the website is added to a local list of exceptions called the &quot;Compatibility View list.&quot; The user can manage the list in the Compatibility View Settings dialog box. The &quot;Display all websites in Compatibility View&quot; feature is not available in Internet Explorer 11.Impact on ConditionalComments -&gt; http://localhost/TechDays/ConditionalComments.html
  • X-UA-Compatible valueDocument modesIE=5Quirks modeIE=7IE7 modeIE=8IE8 modeIE=9IE9 modeIE=10IE10 modeIE=11IE11 modeIE=edgeThe highestsupported document mode of the browserIE=EmulateIE7IE7 mode (if a valid &lt;!DOCTYPE&gt; declarationispresent)Quirks mode (otherwise)IE=EmulateIE8IE8 mode (if a valid &lt;!DOCTYPE&gt; declarationispresent)Quirks mode (otherwise)IE=EmulateIE9IE9 mode (if a valid &lt;!DOCTYPE&gt; declarationispresent)Quirks mode (otherwise)IE=EmulateIE10IE10 mode (if a valid &lt;!DOCTYPE&gt; declarationispresent)Quirks mode (otherwise)IE=EmulateIE11IE11 mode (if a valid &lt;!DOCTYPE&gt; declarationispresent)Quirks mode (otherwise)
  • If a domain element does not contain additional attributes, webpages on the affected site are displayed in IE7 mode if they contain standards-based doctype directives or IE5 (Quirks) mode otherwise.The docMode attribute, when specified, corresponds to a document mode value specified by an X-UA-Compatible header.The featureSwitch specifies a unique and specific change applied to a very specific set of circumstances. The details of each circumstance vary according to the value of the featureSwitch attribute. For example, the createElementWithMarkup value indicates that the site relies on non-standard behavior of the createElement method.The versionVector and uaString attributes control the way Internet Explorer identifies itself to the website; the attributes are generally necessary when a site attempts to serve specific content to Internet Explorer.The Compatibility View List can also contain other elements, such as the gpu element, that identify drivers known to cause problems with Internet Explorer 9. C:\Users\jondiaye\AppData\Local\Microsoft\Internet Explorer\IECompatData
  • IE10’s HTML5 quirks mode is used for pages without a DOCTYPE or with a legacy DOCTYPE as defined in HTML5. Like HTML5 and other browsers, the behavior of IE10’s quirks mode is the same as standards mode with select quirks applied. This means features like &lt;canvas&gt;, &lt;audio&gt;, and &lt;video&gt; remain available. Most importantly this aligns IE10&apos;s quirks mode with the behavior of other browsers, so pages missing a DOCTYPE run consistently across implementations.Internet Explorer 10 provides an interoperable quirks mode that supports many features of standards mode. This enables Windows Internet Explorer to match the behavior of other leading browsers while retaining the compatibility support expected by many customers.Document Type DeclarationsLike many browsers, Internet Explorer uses the document type declaration of a webpage to determine how to display the page. If the webpage contains a standards-based declaration, such as the HTML5 document type, the page is displayed in Standards mode. If the webpage does not contain a document declaration, the page is displayed in Quirks mode.Earlier versions of Internet Explorer would use the presence of the document type directive to determine the features available to a webpage. In order to use the latest features supported by Internet Explorer 10, you would need to add a standards-based document type, such as the HTML5 !DOCTYPE declaration shown in the following example.Detecting Features, Not BrowsersBecause the HTML5 standard requires the use of a document type directive in order to validate a webpage, it is assumed that modern websites include the HTML5 document type declaration.In practice, this has not turned out to be the case. Many websites do not include document type directives and yet expect support for the latest features, in part because other browsers enable those features in Quirks mode. As a result, Internet Explorer 10 provides in interoperable Quirks mode for webpages that do not specify a document type.Because many existing websites are designed to detect specific versions of Internet Explorer, Internet Explorer 10 continues to support earlier document and browser modes. Web developers are encouraged to develop standards-enabled websites that detect features, not browsers
  • Demo User-Agent for Intranet website -&gt; http://localhost/TechDays/DetectUA.htmlAddlocalhost to CV SitesCheck Network tab and User-agentCheck alsoShowCompatInfo
  • Go to http://localhost/ContosoLearning/Default.aspxCheck that left panel is not set correctlyConfirm that in IE6 it’s displayed correctlyLaunch Dev Tools and check width for fieldset middleChange width from 550 to 500pxGo to http://localhost/ContosoLearning/Events.aspxFieldset in the middle are not displayed correctlyConfirm that in IE6 it’s displayed correctlySelect table near to filedsetand check style -&gt; no style with EdgeTable has style class=“block” when running the site with IE6 UASearch for “block” on debuggers pane and identify the setAttributeclassName no more supported and replaced by class
  • Compatibilité Internet Explorer : pour le meilleur et pour le pire!

    1. 1. Compatibilité Internet Explorer: pour le meilleur et pour le pire! Pierre-Louis COLL Daouda NDIAYE Ingénieurs Support Microsoft France pierrelc@microsoft.com jondiaye@microsoft.com Décideurs Informatiques
    2. 2. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toute les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays Décideurs informatiques
    3. 3. Un peu d’histoire … • Fin des années 90 : IE et Netscape. – Solution -> DOCTYPE • Milieu des années 2000: Firefox / Chrome – IE8 -> Document Mode – Mode de compatibilité – X-UA-Compatible #mstechdays Décideurs informatiques
    4. 4. Les grandes catégories d’applications Web • “Modernes/Publiques”: – HTML5 – CSS3 • “Legacy/Métier”: – Modules complémentaires • Editeurs – Siebel, SAP, … #mstechdays Décideurs informatiques
    5. 5. Inventaire #mstechdays Décideurs informatiques
    6. 6. Les principaux type d’incompatibilité • Rendu des pages /CSS • Composants tierces – ActiveX – Toolbars – Browser Helper Objects • Applications hébergeant le Web Browser Control #mstechdays Décideurs informatiques
    7. 7. Exemple de graphs #mstechdays Décideurs informatiques
    8. 8. Mode de navigateur Compat View Button Developer Tools
    9. 9. Mode de document • Standards mode • Legacy document mode
    10. 10. Mode de compatibilité Compatibility Button Meta Tags Compatibility List User Developer Administrator Browsing Development OS Patching
    11. 11. Gestion du tag X-UA-Compatible <meta http-equiv=“X-UA-Compatible” content=“IE=X” /> 5 EmulateIE-X N Version X EmulateIE11 11 Edge DOCTYPE? O N DOCTYPE? O Mode IE5 Quirks Mode IE X Standard Mode IE11 Standard Mode IE Next
    12. 12. Liste d’affichage de compatibilité • <domain featureSwitch="overrideXUACompatible:false" uaString="10" versionVector="10" docMode="EmulateIE10">partner.microsoft.com</domain> • Exemple d’URL pour la liste (dynamique): https://iecvlist.microsoft.com/IE11/1379465767093/iecom patviewlist.xml • Un souci avec votre site dans la liste ? iepo@microsoft.com #mstechdays Décideurs informatiques
    13. 13. BOOKMARKLETS http://techdays.linqto.me/ #mstechdays Décideurs informatiques
    14. 14. Mode Quirks Interopérable • Modification du comportement par défaut du mode Quirks (HTML5 Quirks) • Amélioration de la prise en charge des normes de l’industrie (HTML5 notamment) et d’accroître l’interopérabilité avec d’autres navigateurs • HTML5 quirks mode sera utilisé pour les pages sans DOCTYPE ou avec un DOCTYPE legacy tel que défini en HTML5
    15. 15. Importance de l’User-Agent Une des causes fréquentes relative aux problèmes de compatibilité est une mauvaise détection par l'application Web de la chaine User-Agent. Plus de « compatibles » et de « MSIE » Ajout du « like Gecko » Version spécifiée dans « rv: »
    16. 16. Un outil: Compat Inspector • Outil d’analyse basé sur Javascript  <script src="http://ie.microsoft.com/testdrive/HTML5/ CompatInspector/inspector.js"></script>  Automatisable avec Fiddler  Basé sur les getters/setters de ECMA Script 5  Scénario de vérification ou de debug #mstechdays Décideurs informatiques
    17. 17. COMPAT INSPECTOR http://ie.microsoft.com/testdrive/HTML5/CompatInspecto r/ #mstechdays Décideurs informatiques
    18. 18. MODERN.IE http://loc.modern.ie/fr-fr/ #mstechdays Décideurs informatiques
    19. 19. Outils de développement • Intégrés à Internet Explorer • Debug / inspection ponctuelle – – – – – – #mstechdays Inspecter le HTML/script/CSS Editer le source Debugger javascript Profiler Javascript / réseau Outil de validation HTLM/ CSS Utilisation mémoire Décideurs informatiques
    20. 20. OUTILS DE DÉVELOPPEMENT http://ie.microsoft.com/testdrive/Browser/F12Adventur e/ #mstechdays Décideurs informatiques
    21. 21. QUESTIONS #mstechdays Décideurs informatiques
    22. 22. Appendix: Historique Une version majeure livrée dans chaque version de Windows* IE6 IE7 IE8 IE9 IE10 IE11 • Win XP 2001 • Vista 2006 • Win 7 2009 • 2011 • Win 8 2012 • Win 8.1 2013 Versions d’Internet Explorer supportées Version de Windows ( dernier Service Pack) Windows XP 6*, 7, 8 Windows Vista 7*, 8, 9 Windows 7 8*, 9, 10,11 Windows 8 10* Windows 8.1 11*
    23. 23. Appendix: Changements de IE7 à IE11 Changes from IE7 to IE8 Versioning • • • • Standards • • • • Security • • Architecture • Changes from IE8 to IE9 Version Vectors User Agent String Detection Conditional Comments • • Additional HTML 4.01 improvements Full CSS 2.1 compliance Some HTML 5.0 support ECMAScript third edition (ES3) support and some ECMAScript fifth edition (ES5) support (including native JSON) • • Better protection from malware • DEP/NX & XSS filter on by default • HTTP/HTTPS mixed mode AJAX more secure SmartScreen Filter Loosely Coupled Internet Explorer • • • • • • Changes from IE9 to IE10 Version Vectors User Agent String Detection Conditional Comments • • • Version Vectors User Agent String Detection Conditional Comments removed for Standards Mode Additional HTML5 support Some ES3 improvements, additional ES5 support CSS3 support Additional DOM L3 support, some nonstandard or older DOM events are deprecated Native SVG support • • • • • • Better CSS3 support Additional HTML5 support IndexedDB SVG filter Effects ECMAScript 5 strict Mode Typed Arrays Changes from IE10 to IE11 MIME-handling improvements SmartScreen Application Reputation • • Enhanced Protected Mode HTML5 Sandbox • • • • • • • • WebGL Canvas 2D L2 extensions Full screen API Encrypted media extensions Media source extensions CSS flexible box layout module Mutation observers like DOM4 and 5.3 New F12 Developer tools • • • • Web Cryptography API Third-party cookie blocking Do Not Track (DNT) exceptions Enhanced Protected Mode (EPM) on IE for the desktop
    24. 24. Liens Compatibility http://msdn.microsoft.com/en-us/library/hh772379(v=vs.85).aspx Defining document compatibility http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx Windows Internet Explorer Application Compatibility http://msdn.microsoft.com/en-us/library/dd565632(v=vs.85).aspx Internet Explorer Compatibility Test Tool Technical Reference http://technet.microsoft.com/library/cc749257.aspx How to Detect Features Instead of Browsers http://msdn.microsoft.com/en-us/library/hh273397(v=vs.85).aspx
    25. 25. Liens Compatibility changes in IE11 http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx Compatibility changes in IE10 http://msdn.microsoft.com/en-us/library/ie/hh673527(v=vs.85).aspx Internet Explorer 9 Guide for Developers http://msdn.microsoft.com/en-us/ie/ff468705 Understanding the Compatibility View List http://msdn.microsoft.com/en-us/library/gg699485(v=vs.85).aspx Using the F12 developer tools http://msdn.microsoft.com/en-us/library/ie/bg182326(v=vs.85).aspx
    26. 26. Liens Mode Quirks interoperable http://msdn.microsoft.com/en-us/library/ie/hh673550(v=vs.85).aspx User-agent string http://msdn.microsoft.com/en-us/library/ie/hh920767(v=vs.85).aspx Understanding Compatibility Modes in Internet Explorer 8 http://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-ininternet-explorer-8.aspx How to Enable Standards Support http://msdn.microsoft.com/en-us/library/gg699338(v=vs.85).aspx
    27. 27. Digital is business

    ×