Internet Explorer 8 Application
    Compatibility
    Firestarter

1
Session Objective(s):
      Understand IE7 Compatibility
      Understand IE6 Migration
    Learn how to employ compatibil...
3
Page Built For Internet                    Page1. IdentifyInternet
                                                       ...
1. Identify browser
                              2. Serve right page


    Page Built To Standards




             I’m C...
Previous versions of IE offered two
    alternatives
      Quirks – Roughly compatibility IE 5.5
      Standards – Latest ...
Quirks mode works the same



             Internet      Internet
            Explorer 6    Explorer 7


    Update for IE...
8
Positive User Experience                    Undefined User Experience
     More Effort From Site                         L...
CSS 2.1 compliance
          DOM Improvements
          HTML Improvements
CSS 2.1
          Acid2 Test compliance

       ...
Site developers can tell IE8 what version of
      IE it was designed for on a per-site bases or
      a per-page basis by...
By default, IE8 displays
     “Intranet” sites in IE7
     mode
     Eases transition for
     Enterprises who have
     L...
If a site is a top
                          worldwide sites AND a
                          compatibility problem
       ...
If site not covered elsewhere, user can push
     the compat button
     Placed next to refresh button
     More discovera...
15
16
1.   Short term: Use IE=EmulateIE7 tag
     2.   Test sites against IE8
     3.   Code to IE8 Standards
     4.   Long Ter...
Specifying IE version support
     Content Value           Meaning
     IE=5                    Display in Quirks mode
   ...
Quirks
     <!DOCTYPE HTML PUBLIC ―-//W3C//DTD
       HTML 4.01 Frameset//EN>
     • (or no DOCTYPE)
     Standards
     <...
Compatibility Mode Options
       On a per-site basis, add the custom HTTP
       Header:
       X-UA-Compatible: IE=Emula...
Add a tag right after <head>
         <meta http-equiv=quot;X-UA-Compatiblequot;
           content=quot;IE=EmulateIE7quot...
22
It’s not as simple as using EmulateIE8…
         …and it shouldn’t be
                                   1. User clicks co...
Top level domain needs to authorize
     removal
     IE looks for IEStandards.xml
       Located at server root of the to...
If file exists and contains tag
        Remove the domain from compat list
     Else
        Leave the domain in the compa...
Compatibility mode by default for Intranet
       Line of business applications
     Implement Metatag for Internet sites…...
27
Used to process conditional comments
     Opportunity to emit markup based on the
     browser version
     <!—[if gte IE ...
Commonly used to emit version-specific
     style sheets
     <!—[if IE 6]
     <linkrel=―stylesheet‖ type=―text/css‖
    ...
Browser’s identity
       Reported to web server in HTTP header
       Available client-side via script
     javascript:al...
User Agent String can be used on any
     browser
       Conditional comments are specific to IE
     Version vector used ...
Conditional comments
       Honored by compat mode
       May need to be changed for standards mode
         Use GTE opera...
JSON
        Built-in implementation
        May conflict with custom implementation
     LCIE
        COM Marshaling
    ...
34
What’s different from IE6
       Standards approach
       Well known bug fixes
     What it means for application compati...
Rendering modes crucial to how a page
     renders
     2 rendering modes
     Quirks
        Focus on backwards compatibi...
Important to understand for migration
     Can seriously effect page layouts when
     migrating between browser versions ...
XML Declaration
     Quirks Box Model
     CSS Filters




38
Is intended to specify XML version
     Usually used in XHTML documents
     Required to be placed at the start of the
   ...
DTD = Document Type Definition
     In IE6 the DTD sets the mode (quirks/strict)
     Has to be at the start of the docume...
<?xml version=quot;1.0quot;?>
     <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0
       Transitional//ENquot;
       qu...
Remove XML declaration
     Use a DTD that will put IE7 into quirks mode
     <!DOCTYPE html PUBLIC>
     Insert a comment...
Understand the issue – Strict vs. Quirks
     Weigh up the pros and cons of a chosen
     solution
     Migrate layout in ...
This is a bug in the implementation of
     Cascading Style Sheets
     Appears when in “quirks” mode
     W3C standards s...
45
46
Total width/height includes border + padding
     A working layout in “quirks” will render
     differently in “strict” du...
Used to work around browser differences
     Workarounds making use of bugs or
     unimplemented CSS
     Used to:
      ...
Used to apply CSS rules in IE, while hiding
     them from other browsers.
     Commonly used to address box model
     pr...
* html .myDiv {
        background-color:blue;
     }

     <div class=quot;myDivquot;>Test Content</div>




50
51
Obviously not designed for this purpose
     Bug fixes in IE7 now prevent certain filters
     from being used
     Can be...
If migrating forward create standards-based,
     cross-browser designs.
     For compatibility look at using conditional
...
This is about migration, not compatibility
     Manual rather than programmatic strategy
     Compatibility to IE6 isn’t a...
IE Compat Test Tool
       Part of ACT
     New guidance in latest
     version
       Definition
       Example
       Re...
Feature Overview - www.microsoft.com/ie8
     Engineering Blog - http://blogs.msdn.com/ie
     Safety & Privacy Features
 ...
© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in …5
×

Internet Explorer 8 Application Compatibility - IE8 Firestarter

5,954 views

Published on

Video recordings of this session can be found here:
1. http://channel9.msdn.com/tags/IE%208%20Firestarter - (Developer)
2. http://edge.technet.com/Tags/IE+8+Firestarter/ - (IT Pro's)

If you need to download this file, or need more infomation contact Mithun Dhar via http://blogs.msdn.com/mithund

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,954
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Internet Explorer 8 Application Compatibility - IE8 Firestarter

  1. 1. Internet Explorer 8 Application Compatibility Firestarter 1
  2. 2. Session Objective(s): Understand IE7 Compatibility Understand IE6 Migration Learn how to employ compatibility Know where to go for migration assistance 2
  3. 3. 3
  4. 4. Page Built For Internet Page1. IdentifyInternet Built For browser Explorer 6 Explorer 7 2. Serve right page Page Built To Standards I’m Chrome I’m Firefox I’m IE6 I’m IE7 7 6 4
  5. 5. 1. Identify browser 2. Serve right page Page Built To Standards I’m Chrome I’m Firefox I’m IE8 8 5
  6. 6. Previous versions of IE offered two alternatives Quirks – Roughly compatibility IE 5.5 Standards – Latest standards for current browser The problem is that meaning of “standards” changes New options in Internet Explorer 8 6
  7. 7. Quirks mode works the same Internet Internet Explorer 6 Explorer 7 Update for IE8 Update for IE8 Standards Standards or Compatibility mode 7
  8. 8. 8
  9. 9. Positive User Experience Undefined User Experience More Effort From Site Less Effort From Site 3. Display Intranet Sites in Compatibility 2. Implement Mode 1. Code to IE8 the X-UA- Standards Compatible Tag 5. Rely on User 4. Rely on the Pressing Compat List Compat Button 9
  10. 10. CSS 2.1 compliance DOM Improvements HTML Improvements CSS 2.1 Acid2 Test compliance This means HTML Data URI Support Improved Namespace Support And more ACID 2
  11. 11. Site developers can tell IE8 what version of IE it was designed for on a per-site bases or a per-page basis by including a simple tag Content Value Meaning “Quirks” mode IE=5 Always use IE7 mode IE=7 Display in IE7 mode unless site has IE=EmulateIE7 recommended “Quirks” DOCTYPE Always use IE8 mode IE=8 Use this tag to override compatibility IE=EmulateIE8 view on client machines and force IE8 mode Display in latest mode; In the IE8 IE=Edge release, this is equivalent to IE=8 11
  12. 12. By default, IE8 displays “Intranet” sites in IE7 mode Eases transition for Enterprises who have LOB applications in “Intranet” This feature is on by default User can turn off IT Pro Can use Group Policy to display intranet sites in IE8 mode instead 12
  13. 13. If a site is a top worldwide sites AND a compatibility problem has been reported to Microsoft IE8 will automatically show the site in compatibility mode Opt-out using X-UA- Compatible tag or web form res://iecompat.dll/iecompatdata.xml 13
  14. 14. If site not covered elsewhere, user can push the compat button Placed next to refresh button More discoverable in IE8 RC1 Similar to X-UA-Compatible tag (IE=EmulateIE7), but User-Agent String also shows browser is IE7 14
  15. 15. 15
  16. 16. 16
  17. 17. 1. Short term: Use IE=EmulateIE7 tag 2. Test sites against IE8 3. Code to IE8 Standards 4. Long Term: Use IE=EmulateIE8 tag 17
  18. 18. Specifying IE version support Content Value Meaning IE=5 Display in Quirks mode IE=7 Display in IE7 Standards mode IE=EmulateIE7 Display standards DOCTYPEs in IE7 Standards mode; Display quirks DOCTYPEs in Quirks mode IE=8 Display in IE8 Standards mode IE=EmulateIE8 Display Standards DOCTYPEs in IE8 Standards mode; Display Quirks DOCTYPEs in Quirks mode. Use this tag to override compatibility view on client machines and force Standards to IE8 Standards. IE=Edge Display in latest mode; In the IE8 release, this is equivalent to IE=8 Declared <META> overrides <!DOCTYPE> 18
  19. 19. Quirks <!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.01 Frameset//EN> • (or no DOCTYPE) Standards <!DOCTYPE HTML PUBLIC ―-//W3C//DTD HTML 4.0 Strict//EN> 19
  20. 20. Compatibility Mode Options On a per-site basis, add the custom HTTP Header: X-UA-Compatible: IE=EmulateIE7 Web.Config File <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name=quot;X-UA-Compatiblequot; value=quot;IE=EmulateIE7quot;> </customHeaders> </httpProtocol> <system.webServer> </configuration> 20
  21. 21. Add a tag right after <head> <meta http-equiv=quot;X-UA-Compatiblequot; content=quot;IE=EmulateIE7quot; /> <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Strict//ENquot;> <html> <head> <!– Tell IE8 to display in IE7 Compatibility mode --> <meta http-equiv=quot;X-UA-Compatiblequot; content=quot;IE=EmulateIE7quot; /> <title>My Web Page</title> </head> <body> <p>Content goes here.</p> </body> </html> 21
  22. 22. 22
  23. 23. It’s not as simple as using EmulateIE8… …and it shouldn’t be 1. User clicks compat button for foo.com 2. Sales.foo.com Foo.com updates their site, sets EMULATEIE8 metatag Sales.foo.com 3. Now what happens to Dev.foo.com other domains- Foo.com, Dev.foo.com? 23
  24. 24. Top level domain needs to authorize removal IE looks for IEStandards.xml Located at server root of the top level domain Contains <IE8StandardsMode> 24
  25. 25. If file exists and contains tag Remove the domain from compat list Else Leave the domain in the compat list Wait 30 days to check again Ignore expiration (for testing purposes) [HKCUSoftwareMicrosoftInternet ExplorerBrowserEmulation] IgnoreExpiryPeriod=1 25
  26. 26. Compatibility mode by default for Intranet Line of business applications Implement Metatag for Internet sites… …and Intranet sites that don’t run in Intranet zone Excellent feedback from RDP Customers Easy to implement Good compatibility for IE7 sites Remember this is a temporary solution Move to standards mode as soon as possible 26
  27. 27. 27
  28. 28. Used to process conditional comments Opportunity to emit markup based on the browser version <!—[if gte IE 5.5] <p>you are using IE 5 or higher</p> <![endif]--> 28
  29. 29. Commonly used to emit version-specific style sheets <!—[if IE 6] <linkrel=―stylesheet‖ type=―text/css‖ href=―/stylesheets/ie6.css‖/> <![endif]--> <!—[if IE 7] <linkrel=―stylesheet‖ type=―text/css‖ Future href=―/stylesheets/ie7.css‖/> proof with <![endif]--> gte <!—[if gte IE 8] operator <linkrel=―stylesheet‖ type=―text/css‖ href=―/stylesheets/standards.css‖/> <![endif]--> 29
  30. 30. Browser’s identity Reported to web server in HTTP header Available client-side via script javascript:alert(navigator.userAgent) 30
  31. 31. User Agent String can be used on any browser Conditional comments are specific to IE Version vector used to conditionally emit markup User Agent String used for branching in program logic Commonly used to block new versions of a browser 31
  32. 32. Conditional comments Honored by compat mode May need to be changed for standards mode Use GTE operator as best practice User Agent String Beware logic that relies on version checking Especially blocking IE8 can be detected even in compat mode Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 3.5.21022) 32
  33. 33. JSON Built-in implementation May conflict with custom implementation LCIE COM Marshaling Components may no longer run in the same apartment (or process) 3rd Party Plug-ins Sun JVM 33
  34. 34. 34
  35. 35. What’s different from IE6 Standards approach Well known bug fixes What it means for application compatibility Rendering issues CSS and HTML JScript 35
  36. 36. Rendering modes crucial to how a page renders 2 rendering modes Quirks Focus on backwards compatibility Not standards based Strict Based on W3C standards. Less focus on backwards compatibility. 36
  37. 37. Important to understand for migration Can seriously effect page layouts when migrating between browser versions as you will see. 37
  38. 38. XML Declaration Quirks Box Model CSS Filters 38
  39. 39. Is intended to specify XML version Usually used in XHTML documents Required to be placed at the start of the document. e.g. <?xml version=quot;1.0quot;?> 39
  40. 40. DTD = Document Type Definition In IE6 the DTD sets the mode (quirks/strict) Has to be at the start of the document In IE6 if DTD is not the first element it renders “quirks” mode Hence a XML declaration sets page into “quirks” mode in IE6 even if the author intended the page to use “strict” This order bug is fixed in IE7 40
  41. 41. <?xml version=quot;1.0quot;?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtdquot;> IE6 renders quirks, IE7 renders strict Result is significantly different layout behaviour 41
  42. 42. Remove XML declaration Use a DTD that will put IE7 into quirks mode <!DOCTYPE html PUBLIC> Insert a comment before the DTD to set IE7 into quirks mode <?xml version=quot;1.0quot;?> <!-- ... and keep IE7 in quirks mode --> <!DOCTYPE ... 42
  43. 43. Understand the issue – Strict vs. Quirks Weigh up the pros and cons of a chosen solution Migrate layout in appropriate manor 43
  44. 44. This is a bug in the implementation of Cascading Style Sheets Appears when in “quirks” mode W3C standards state border and padding should be added to width and height In IE6 quirks mode border and padding is included in width and height size 44
  45. 45. 45
  46. 46. 46
  47. 47. Total width/height includes border + padding A working layout in “quirks” will render differently in “strict” due to box model differences Common solution usually include re- designing webpage to use “strict” mode which uses W3C box model 47
  48. 48. Used to work around browser differences Workarounds making use of bugs or unimplemented CSS Used to: Render on other browsers and hide from IE Render on IE and hide from other browsers 48
  49. 49. Used to apply CSS rules in IE, while hiding them from other browsers. Commonly used to address box model problems Exploits a bug in the way that the older versions of IE interpret the “star” - or “universal selector” 49
  50. 50. * html .myDiv { background-color:blue; } <div class=quot;myDivquot;>Test Content</div> 50
  51. 51. 51
  52. 52. Obviously not designed for this purpose Bug fixes in IE7 now prevent certain filters from being used Can be a major source of rendering issues when migrating from IE6 52
  53. 53. If migrating forward create standards-based, cross-browser designs. For compatibility look at using conditional comments to isolate IE6 workarounds 53
  54. 54. This is about migration, not compatibility Manual rather than programmatic strategy Compatibility to IE6 isn’t available, so migrate Except for Quirks mode Refer to existing guidance today http://www.msdn.com/iecompat More assistance on the way... 54
  55. 55. IE Compat Test Tool Part of ACT New guidance in latest version Definition Example Remediation Covers much of the application compatibility space 55
  56. 56. Feature Overview - www.microsoft.com/ie8 Engineering Blog - http://blogs.msdn.com/ie Safety & Privacy Features www.microsoft.com/windows/internet-explorer/features/browse-privately.aspx Business Value of IE 8 & EV SSL Certificates www.microsoft.com/ie/ev User Control & Privacy Feature Guide www.microsoft.com/ie/privacy Internet Explorer Administration Kit (IEAK) http://technet.microsoft.com/en-us/ie/bb219517.aspx IE Compatibility Center - http://msdn.com/iecompat 56
  57. 57. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

×