NGW042NGW042

Making Your Site Look Making Your Site Look Great In IE7Great In IE7

Markus MielkeMarkus MielkeProgram Manager Internet Explorer Program Manager Internet Explorer PlatformPlatform

Making Your Site Look Making Your Site Look Great in IE7Great in IE7

Real focus of this talk: standards based Real focus of this talk: standards based design with IEdesign with IE

Will show you:Will show you:How we prioritized IE7 workHow we prioritized IE7 workFixes and featuresFixes and featuresHow you can prepare for IE7How you can prepare for IE7

Leave plenty of room for questionsLeave plenty of room for questions

How Did We Prioritize How Did We Prioritize IE’s Work?IE’s Work?

We listened to your feedbackWe listened to your feedbackYour issuesYour issues

MeyerWeb, PositionIsEverything, Quirksmode, WASPMeyerWeb, PositionIsEverything, Quirksmode, WASP

Your requestsYour requestsIEBlog, newsgroups, conferencesIEBlog, newsgroups, conferences

Our focus: Folks who need to make a livingOur focus: Folks who need to make a livingFixed top pain points/consistency issuesFixed top pain points/consistency issues

Added most-requested standards featuresAdded most-requested standards features

Will Show YouWill Show You

How we prioritized IE7 workHow we prioritized IE7 work

Fixes and featuresFixes and features

How you can prepare for IE7How you can prepare for IE7

Position Is Everything Position Is Everything

PIE collects IE6 PIE collects IE6 issuesissues

One of the sources One of the sources we usedwe used

Focus on making Focus on making your life easieryour life easier

And A Bunch Of Other And A Bunch Of Other Bugs TooBugs Too

Parser bugs: * html, _property or /**/ comment bug Parser bugs: * html, _property or /**/ comment bug

Memory leaks in jscript engine Memory leaks in jscript engine

Select control: style-able and not always on topSelect control: style-able and not always on top

Auto-sizing of absolute positioned element with right and leftAuto-sizing of absolute positioned element with right and leftgreat for 3 column layouts great for 3 column layouts

Relative positioning issuesRelative positioning issues

% calculations for height/width for abs positioned elements% calculations for height/width for abs positioned elements

hover effect working not just over text hover effect working not just over text

<?xml> prolog no longer causes quirks mode <?xml> prolog no longer causes quirks mode

HTML element truly independent of the Body HTML element truly independent of the Body

1 px dotted borders no longer render as dashed1 px dotted borders no longer render as dashed

Bottom margin bug on hover does not collapse margins Bottom margin bug on hover does not collapse margins

Overflow Behavior Now Fixed!Overflow Behavior Now Fixed!

IE6 used to grow the boxes (even if not asked)IE6 used to grow the boxes (even if not asked)

<style type="text/css"> div { width : 100px; height: 100px; border: thin solid red;} blockquote { width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black} cite { display: block; text-align: right; border: none} p { margin: 0;} </style>

<div> <blockquote> <p>some text long enough to make it interesting.</p> <cite>- anonymous </cite> </blockquote> </div>

IE6 IE7 (and all other modern browsers)

We Also Added Most-We Also Added Most-Requested FeaturesRequested Features

Extended existing implementation to be consistent with the Extended existing implementation to be consistent with the W3C specW3C spec

Enable :hover on all elements not just on <a> tag Enable :hover on all elements not just on <a> tag

Background-attachment: fixed on all elements not just body Background-attachment: fixed on all elements not just body

Improved <object> fallbackImproved <object> fallback

Added additional standards features (CSS 2.1 and HTML 4.01)Added additional standards features (CSS 2.1 and HTML 4.01)Enhanced Selector support: first-child, adjacent, attribute, and child Enhanced Selector support: first-child, adjacent, attribute, and child selectors selectors

CSS 3 attribute selectors: prefix, suffix and substringCSS 3 attribute selectors: prefix, suffix and substring

Min/Max Width/Height now in MIX buildMin/Max Width/Height now in MIX build

Fixed positioning supportFixed positioning support

Alpha channel PNG supportAlpha channel PNG support

New Standards Features New Standards Features In ActionIn Action

Fixed positioning Fixed positioning

Transparent PNGsTransparent PNGs

Background-attachment: fixed on all Background-attachment: fixed on all elements not just body elements not just body

Hover on all elements to build Hover on all elements to build richer menusricher menus

Other Ways To Make Your Other Ways To Make Your Site GreatSite Great

Native XMLHTTPNative XMLHTTP

High Assurance SSL CertificatesHigh Assurance SSL Certificates

IE7 integration with Windows RSS IE7 integration with Windows RSS PlatformPlatform

Open SearchOpen Search

Will Show YouWill Show You

How we prioritized IE7 workHow we prioritized IE7 work

Fixes and featuresFixes and features

How you can prepare for IE7How you can prepare for IE7

How Does It Affect You?How Does It Affect You?

Behavior changes for better standard Behavior changes for better standard support mean some pages breaksupport mean some pages break

Need to balance standard compliance with Need to balance standard compliance with app-compatapp-compat

IE6 introduced quirks mode and strict modeIE6 introduced quirks mode and strict mode

All fixes are under strict mode All fixes are under strict mode

We are here to help you We are here to help you Compatibility lab at MIXCompatibility lab at MIX

Most common breaks and mitigationMost common breaks and mitigation

Tools to identify and fix breaksTools to identify and fix breaks

Documentation up on MSDN Documentation up on MSDN

Common Breaks And How Common Breaks And How You Can Easily Fix ThemYou Can Easily Fix Them

User Agent Strings and Browser Detection User Agent Strings and Browser Detection If you need a switch, base it on “greater equal” If you need a switch, base it on “greater equal” rather than “equal” rather than “equal”

OverflowOverflowUse min-height/width or correct box sizeUse min-height/width or correct box size

XML Prolog Bug affecting the CSS Box ModelXML Prolog Bug affecting the CSS Box Model<?xml version="1.0"?> <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">"DTD/xhtml1-strict.dtd">

CSS HacksCSS Hacks

Community workaround: CSS hacksCommunity workaround: CSS hacksRely on parser bugs and/or not yet implemented featuresRely on parser bugs and/or not yet implemented features

Likely to break from release to releaseLikely to break from release to release

Examples of hacks that broke:Examples of hacks that broke:* html (Target: IE only)* html (Target: IE only)

_height:50px; (Target: IE only)_height:50px; (Target: IE only)

height/**/: 300px; (Target: Everyone but IE)height/**/: 300px; (Target: Everyone but IE)

html > body (Target: Everyone but IE)html > body (Target: Everyone but IE)

Ideally no CSS hacks are needed – but they areIdeally no CSS hacks are needed – but they areAlternative: Conditional Comments to target browser versionsAlternative: Conditional Comments to target browser versions

Maintainable and available since IE5Maintainable and available since IE5<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="iestyles.css" /> <![endif]-->

The Holly Hack and Has The Holly Hack and Has LayoutLayout

Most famous CSS Filter break: the Holly hack Most famous CSS Filter break: the Holly hack * html {height:1%;} * html {height:1%;}

Used to force “Has Layout”Used to force “Has Layout”IE internal data structure – still exists in IE7IE internal data structure – still exists in IE7

Responsible for sizing and positioning itselfResponsible for sizing and positioning itself

Article produced in cooperation with WASP Article produced in cooperation with WASP http://msdn.microsoft.com/library/default.asp?url=/library/en-http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ietechcol/cols/dnexpie/expie20050831.aspus/ietechcol/cols/dnexpie/expie20050831.asp

What can you do?What can you do?IE6 and below: Use of Holly hack is okIE6 and below: Use of Holly hack is ok

IE7 (if needed): conditional comments + zoom:1;IE7 (if needed): conditional comments + zoom:1;

How Do We Analyze How Do We Analyze Breaks?Breaks?

What’s Next For IEWhat’s Next For IE

With the release of the MIX build we are With the release of the MIX build we are locking down layout changeslocking down layout changes

Please test your pages! Please test your pages!

We know we are not done yet We know we are not done yet Committed to full CSS2.1 support in Committed to full CSS2.1 support in the futurethe future

Working on public bug database where Working on public bug database where you can report and track your issuesyou can report and track your issues

Call To ActionCall To Action

Dev community and MicrosoftDev community and Microsoftare dependent on each otherare dependent on each other

Improvements in standards support Improvements in standards support mean that behavior will changemean that behavior will change

End users do not like broken pagesEnd users do not like broken pages

So we need your help!So we need your help!

Please prepare your pages to be ready for IE7Please prepare your pages to be ready for IE7

Please send us feedback - Please send us feedback - ietell@microsoft.comietell@microsoft.com

We have great documentation that will help you: We have great documentation that will help you: www.msdn.com/iewww.msdn.com/ie

Community ResourcesCommunity Resources

At MIXAt MIXMIX Chat – We’re heading over there after MIX Chat – We’re heading over there after this talk!this talk!

IE Compatibility labIE Compatibility lab

After MIXAfter MIXIE Dev Center: IE Dev Center: http://http://msdn.microsoft.com/iemsdn.microsoft.com/ie//

IE Blog: IE Blog: http://blogs.msdn.com/ie/http://blogs.msdn.com/ie/

IE feedback alias: IE feedback alias: ietell@microsoft.comietell@microsoft.com

Session EvaluationsSession Evaluations

We value your feedback, so please submit an We value your feedback, so please submit an online evaluation for each session you attend!online evaluation for each session you attend!

To make it worth your while, To make it worth your while, we pick one evaluation from we pick one evaluation from each of the ten session each of the ten session timeslots. If we pick your timeslots. If we pick your eval, you will be eligible to eval, you will be eligible to win a Creative win a Creative Zen MicroPhotoZen MicroPhoto

AppendixAppendix

3 Pixel Text Jog3 Pixel Text JogBefore (IE6) and After (IE7)Before (IE6) and After (IE7)

IE7:IE7:

BeforBefore:e:

Notice the gap?

A Word about HasLayoutA Word about HasLayout

Are there side effects?Are there side effects?

Content of the element cannot flow around other Content of the element cannot flow around other boxesboxes

bad for float based layouts bad for float based layouts

An element with layout cannot "shrink to fit" its An element with layout cannot "shrink to fit" its children children

Can I still force layout in IE7?Can I still force layout in IE7?

Yes, {zoom:1;} still worksYes, {zoom:1;} still works

HTML element independent of HTML element independent of BodyBody

Viewport of Scrollbar is now outside of the Viewport of Scrollbar is now outside of the HTML element HTML element

Accordance with section 11.1.1 in CSS2.1 Accordance with section 11.1.1 in CSS2.1 specspec

Viewport has 2px window border that can Viewport has 2px window border that can not be influenced not be influenced Benefit:Benefit:

Set margins on HTML elementSet margins on HTML elementSize the HTML elementSize the HTML elementSet borders etc. Set borders etc. Allows absolute/fixed positioned elements on Allows absolute/fixed positioned elements on the right viewport edgethe right viewport edge

auto alignment for building auto alignment for building flexible 3-column layoutsflexible 3-column layouts<style><style>body {body { margin: 0px; background:#333; margin: 0px; background:#333; }} #left {#left {

position: absolute;position: absolute; top: 20px;top: 20px; left: 20px;left: 20px;border: 5px solid #ccc; background: #666;border: 5px solid #ccc; background: #666;width: 120px;width: 120px;}}

#middle {#middle {position: absolute;position: absolute;border: 5px solid #ccc; background: #666;border: 5px solid #ccc; background: #666;top: 20px; bottom: 100px; top: 20px; bottom: 100px;

left: 170px; right: 170pxleft: 170px; right: 170px;;}}

#right {#right {position: absolute;position: absolute; top: 20px; right: 20px; top: 20px; right: 20px; border: 5px solid #ccc; background: #666;border: 5px solid #ccc; background: #666;width: 120px;width: 120px;}}

</style></style>

Conditional commentsConditional comments

An easy way to target specific browser An easy way to target specific browser versionsversions

Maintainable and available since IE5Maintainable and available since IE5

Rich expressions (lt, lte, gt, gte etc.)Rich expressions (lt, lte, gt, gte etc.)

Based on HTML comment syntaxBased on HTML comment syntax

Use to provide special style sheet:Use to provide special style sheet:

<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="iestyles.css" /> <![endif]-->

Why shouldn’t we use filters?Why shouldn’t we use filters?

We would not recommend to use CSS We would not recommend to use CSS filters since they are not supportedfilters since they are not supported

Neither by standard body nor Neither by standard body nor implementers implementers

Are there inherently bad?Are there inherently bad?No, if they are used with caution No, if they are used with caution

Target ONLY "older than current" (frozen Target ONLY "older than current" (frozen or abandoned) versions of browsers or abandoned) versions of browsers

Be aware that they are filters (Mark them Be aware that they are filters (Mark them for maintainability)for maintainability)

Overflow (1of 2)Overflow (1of 2)

Overflow allows to specify whether content of a Overflow allows to specify whether content of a block-level element is clipped when it overflows the block-level element is clipped when it overflows the boxbox

IE6 used to grow the boxes (min-height)IE6 used to grow the boxes (min-height)Prevented us from implementing min/max-width/heightPrevented us from implementing min/max-width/height

Look at code:Look at code:<style type="text/css"> div { width : 100px; height: 100px; border: thin solid red;} blockquote { width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black} cite { display: block; text-align: right; border: none} p { margin: 0;} </style>

<div> <blockquote> <p>some text long enough to make it interesting.</p> <cite>- Foo </cite> </blockquote> </div>

Overflow (2 of 2)Overflow (2 of 2)

The CSS2.1 default is overflow: visibleThe CSS2.1 default is overflow: visible

All sites that tended to enlarge boxes will now All sites that tended to enlarge boxes will now overflowoverflow

We only implemented this for non-replaced block We only implemented this for non-replaced block level elements and inline-block elementslevel elements and inline-block elements

Not supporting table-cells Not supporting table-cells

pages will still be printed using the old behaviorpages will still be printed using the old behavior

BeforeBefore IE7IE7

Native XMLHTTPNative XMLHTTP

In IE7, XMLHTTP is In IE7, XMLHTTP is now also exposed now also exposed as a native script as a native script object object

Can be instantiated Can be instantiated using the same using the same syntax across syntax across different browsersdifferent browsers

Decouples AJAX Decouples AJAX functionality from functionality from an ActiveX enabled an ActiveX enabled environmentenvironment

SyntaxSyntax

if (window.XMLHttpRequest){if (window.XMLHttpRequest){                    // If IE7, Mozilla, Safari, etc: Use // If IE7, Mozilla, Safari, etc: Use

native objectnative object

                    var xmlHttp = new XMLHttpRequest()var xmlHttp = new XMLHttpRequest()}}

else else {{if (window.ActiveXObject){if (window.ActiveXObject){

                    // ...otherwise, use the ActiveX control // ...otherwise, use the ActiveX control for IE5.x and IE6for IE5.x and IE6          var xmlHttp = new           var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); ActiveXObject("Microsoft.XMLHTTP");

          }          }}}

© 2006 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.