Compatibilité Internet Explorer : pour le meilleur et pour le pire!
•
0 gefällt mir•2,475 views
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)
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Ähnlich wie Compatibilité Internet Explorer : pour le meilleur et pour le pire! (20)
Mehr von Microsoft
Mehr von Microsoft (20)
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
- 2. 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
- 3. 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
- 4. 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
- 5. Les grandes catégories d’applications Web • “Modernes/Publiques”: – HTML5 – CSS3 • “Legacy/Métier”: – Modules complémentaires • Editeurs – Siebel, SAP, … #mstechdays Décideurs informatiques
- 7. 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
- 8. Exemple de graphs #mstechdays Décideurs informatiques
- 9. Mode de navigateur Compat View Button Developer Tools
- 10. Mode de document • Standards mode • Legacy document mode
- 11. Mode de compatibilité Compatibility Button Meta Tags Compatibility List User Developer Administrator Browsing Development OS Patching
- 12. 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
- 13. 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
- 15. 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
- 16. 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: »
- 17. 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
- 20. 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
- 21. OUTILS DE DÉVELOPPEMENT http://ie.microsoft.com/testdrive/Browser/F12Adventur e/ #mstechdays Décideurs informatiques
- 23. 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*
- 24. 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
- 25. 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
- 26. 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
- 27. 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
Hinweis der Redaktion
- 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'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:<meta http-equiv=“X-UA-Compatible” content=“IE=7” />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's markup instructs the browser (via an "X-UA-Compatible" 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'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 "About URL Security Zones" 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 "Understanding the Compatibility View List" 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 "Compatibility View list." The user can manage the list in the Compatibility View Settings dialog box. The "Display all websites in Compatibility View" feature is not available in Internet Explorer 11.Impact on ConditionalComments -> 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 <!DOCTYPE> declarationispresent)Quirks mode (otherwise)IE=EmulateIE8IE8 mode (if a valid <!DOCTYPE> declarationispresent)Quirks mode (otherwise)IE=EmulateIE9IE9 mode (if a valid <!DOCTYPE> declarationispresent)Quirks mode (otherwise)IE=EmulateIE10IE10 mode (if a valid <!DOCTYPE> declarationispresent)Quirks mode (otherwise)IE=EmulateIE11IE11 mode (if a valid <!DOCTYPE> 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 <canvas>, <audio>, and <video> remain available. Most importantly this aligns IE10'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 -> 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 -> 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