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
2. Session Objective(s):
Understand IE7 Compatibility
Understand IE6 Migration
Learn how to employ compatibility
Know where to go for migration assistance
2
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. 1. Identify browser
2. Serve right page
Page Built To Standards
I’m Chrome
I’m Firefox
I’m IE8
8
5
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. Quirks mode works the same
Internet Internet
Explorer 6 Explorer 7
Update for IE8 Update for IE8
Standards Standards
or
Compatibility mode
7
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. 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. 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. 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. 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. 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
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. 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. 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
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
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. 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. 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. 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
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
30. Browser’s identity
Reported to web server in HTTP header
Available client-side via script
javascript:alert(navigator.userAgent)
30
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. 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. 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
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. 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. Important to understand for migration
Can seriously effect page layouts when
migrating between browser versions as you
will see.
37
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. 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. <?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. 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. Understand the issue – Strict vs. Quirks
Weigh up the pros and cons of a chosen
solution
Migrate layout in appropriate manor
43
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
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. 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. 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
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. If migrating forward create standards-based,
cross-browser designs.
For compatibility look at using conditional
comments to isolate IE6 workarounds
53
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. IE Compat Test Tool
Part of ACT
New guidance in latest
version
Definition
Example
Remediation
Covers much of the
application compatibility
space
55
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