Internet Explorer 8 Application Compatibility - IE8 Firestarter

Internet Explorer 8 Application Compatibility Firestarter 1

Session Objective(s): Understand IE7 Compatibility Understand IE6 Migration Learn how to employ compatibility Know where to go for migration assistance 2

3

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

1. Identify browser 2. Serve right page Page Built To Standards I’m Chrome I’m Firefox I’m IE8 8 5

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

Quirks mode works the same Internet Internet Explorer 6 Explorer 7 Update for IE8 Update for IE8 Standards Standards or Compatibility mode 7

8

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

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

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

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

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

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

16

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

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

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

Compatibility Mode Options On a per-site basis, add the custom HTTP Header: X-UA-Compatible: IE=EmulateIE7 Web.Config File <?xml version=\"1.0\" encoding=\"utf-8\"?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name=\"X-UA-Compatible\" value=\"IE=EmulateIE7\"> </customHeaders> </httpProtocol> <system.webServer> </configuration> 20

Add a tag right after <head> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\" /> <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Strict//EN\"> <html> <head> <!– Tell IE8 to display in IE7 Compatibility mode --> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\" /> <title>My Web Page</title> </head> <body> <p>Content goes here.</p> </body> </html> 21

22

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

Top level domain needs to authorize removal IE looks for IEStandards.xml Located at server root of the top level domain Contains <IE8StandardsMode> 24

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) [HKCU\\Software\\Microsoft\\Internet Explorer\\BrowserEmulation] IgnoreExpiryPeriod=1 25

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

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

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

Browser’s identity Reported to web server in HTTP header Available client-side via script javascript:alert(navigator.userAgent) 30

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

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

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

What’s different from IE6 Standards approach Well known bug fixes What it means for application compatibility Rendering issues CSS and HTML JScript 35

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

Important to understand for migration Can seriously effect page layouts when migrating between browser versions as you will see. 37

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 document. e.g. <?xml version=\"1.0\"?> 39

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

<?xml version=\"1.0\"?> <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd\"> IE6 renders quirks, IE7 renders strict Result is significantly different layout behaviour 41

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=\"1.0\"?>  <!DOCTYPE ... 42

Understand the issue – Strict vs. Quirks Weigh up the pros and cons of a chosen solution Migrate layout in appropriate manor 43

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

46

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

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

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

* html .myDiv { background-color:blue; } <div class=\"myDiv\">Test Content</div> 50

51

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

If migrating forward create standards-based, cross-browser designs. For compatibility look at using conditional comments to isolate IE6 workarounds 53

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

IE Compat Test Tool Part of ACT New guidance in latest version Definition Example Remediation Covers much of the application compatibility space 55

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

© 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.

Internet Explorer 8 Application Compatibility - IE8 Firestarter

0 comments

Notes on slide 1

Favorites, Groups & Events