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

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

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

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=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

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

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)
[HKCUSoftwareMicrosoftInternet
ExplorerBrowserEmulation]
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

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

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=quot;1.0quot;?>

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=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

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;?>

<!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

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=quot;myDivquot;>Test Content</div>

50

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

Recommandé

Recommandé

Contenu connexe

Similaire à Internet Explorer 8 Application Compatibility - IE8 Firestarter

Similaire à Internet Explorer 8 Application Compatibility - IE8 Firestarter (20)

Plus de Mithun T. Dhar

Plus de Mithun T. Dhar (20)

Dernier

Dernier (20)

Internet Explorer 8 Application Compatibility - IE8 Firestarter