Making Your Site Look Great in IE7

959 views

Published on

In this session, learn how to build and maintain standards-based sites that work great in IE7. Learn how to take advantage of new capabilties such as better HTML and CSS standards support, RSS and Search integration, and new security features.

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

  • Be the first to like this

No Downloads
Views
Total views
959
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Making Your Site Look Great in IE7

  1. 1. Making Your Site Look Great In IE7 Markus Mielke Program Manager Internet Explorer Platform NGW042
  2. 2. Making Your Site Look Great in IE7 <ul><li>Real focus of this talk: standards based design with IE </li></ul><ul><li>Will show you: </li></ul><ul><li>How we prioritized IE7 work </li></ul><ul><li>Fixes and features </li></ul><ul><li>How you can prepare for IE7 </li></ul><ul><li>Leave plenty of room for questions </li></ul>
  3. 4. How Did We Prioritize IE’s Work? <ul><li>We listened to your feedback </li></ul><ul><ul><li>Your issues </li></ul></ul><ul><ul><ul><li>MeyerWeb, PositionIsEverything, Quirksmode, WASP </li></ul></ul></ul><ul><ul><li>Your requests </li></ul></ul><ul><ul><ul><li>IEBlog, newsgroups, conferences </li></ul></ul></ul><ul><li>Our focus: Folks who need to make a living </li></ul><ul><ul><li>Fixed top pain points/consistency issues </li></ul></ul><ul><ul><li>Added most-requested standards features </li></ul></ul>
  4. 5. Will Show You <ul><li>How we prioritized IE7 work </li></ul><ul><li>Fixes and features </li></ul><ul><li>How you can prepare for IE7 </li></ul>
  5. 6. Position Is Everything <ul><li>PIE collects IE6 issues </li></ul><ul><li>One of the sources we used </li></ul><ul><li>Focus on making your life easier </li></ul>
  6. 7. And A Bunch Of Other Bugs Too <ul><li>Parser bugs: * html, _property or /**/ comment bug </li></ul><ul><li>Memory leaks in jscript engine </li></ul><ul><li>Select control: style-able and not always on top </li></ul><ul><li>Auto-sizing of absolute positioned element with right and left </li></ul><ul><ul><li>great for 3 column layouts </li></ul></ul><ul><li>Relative positioning issues </li></ul><ul><li>% calculations for height/width for abs positioned elements </li></ul><ul><li>hover effect working not just over text </li></ul><ul><li><?xml> prolog no longer causes quirks mode </li></ul><ul><li>HTML element truly independent of the Body </li></ul><ul><li>1 px dotted borders no longer render as dashed </li></ul><ul><li>Bottom margin bug on hover does not collapse margins </li></ul>
  7. 8. Overflow Behavior Now Fixed! <ul><li>IE6 used to grow the boxes (even if not asked) </li></ul><style type=&quot;text/css&quot;> 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> <ul><ul><li>IE6 </li></ul></ul><ul><ul><li>IE7 (and all other modern browsers) </li></ul></ul>
  8. 9. We Also Added Most-Requested Features <ul><li>Extended existing implementation to be consistent with the W3C spec </li></ul><ul><ul><li>Enable :hover on all elements not just on <a> tag </li></ul></ul><ul><ul><li>Background-attachment: fixed on all elements not just body </li></ul></ul><ul><ul><li>Improved <object> fallback </li></ul></ul><ul><li>Added additional standards features (CSS 2.1 and HTML 4.01) </li></ul><ul><ul><li>Enhanced Selector support: first-child, adjacent, attribute, and child selectors </li></ul></ul><ul><ul><ul><li>CSS 3 attribute selectors: prefix, suffix and substring </li></ul></ul></ul><ul><ul><li>Min/Max Width/Height now in MIX build </li></ul></ul><ul><ul><li>Fixed positioning support </li></ul></ul><ul><li>Alpha channel PNG support </li></ul>
  9. 10. New Standards Features In Action <ul><li>Fixed positioning </li></ul><ul><li>Transparent PNGs </li></ul><ul><li>Background-attachment: fixed on all elements not just body </li></ul><ul><li>Hover on all elements to build richer menus </li></ul>
  10. 11. Other Ways To Make Your Site Great <ul><li>Native XMLHTTP </li></ul><ul><li>High Assurance SSL Certificates </li></ul><ul><li>IE7 integration with Windows RSS Platform </li></ul><ul><li>Open Search </li></ul>
  11. 12. Will Show You <ul><li>How we prioritized IE7 work </li></ul><ul><li>Fixes and features </li></ul><ul><li>How you can prepare for IE7 </li></ul>
  12. 13. How Does It Affect You? <ul><li>Behavior changes for better standard support mean some pages break </li></ul><ul><ul><li>Need to balance standard compliance with app-compat </li></ul></ul><ul><ul><li>IE6 introduced quirks mode and strict mode </li></ul></ul><ul><ul><li>All fixes are under strict mode </li></ul></ul><ul><li>We are here to help you </li></ul><ul><ul><li>Compatibility lab at MIX </li></ul></ul><ul><ul><li>Most common breaks and mitigation </li></ul></ul><ul><ul><li>Tools to identify and fix breaks </li></ul></ul><ul><ul><li>Documentation up on MSDN </li></ul></ul>
  13. 14. Common Breaks And How You Can Easily Fix Them <ul><li>User Agent Strings and Browser Detection </li></ul><ul><ul><li>If you need a switch, base it on “greater equal” rather than “equal” </li></ul></ul><ul><li>Overflow </li></ul><ul><ul><li>Use min-height/width or correct box size </li></ul></ul><ul><li>XML Prolog Bug affecting the CSS Box Model </li></ul><?xml version=&quot;1.0&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;DTD/xhtml1-strict.dtd&quot;>
  14. 15. CSS Hacks <ul><li>Community workaround: CSS hacks </li></ul><ul><ul><li>Rely on parser bugs and/or not yet implemented features </li></ul></ul><ul><ul><li>Likely to break from release to release </li></ul></ul><ul><li>Examples of hacks that broke: </li></ul><ul><ul><li>* html (Target: IE only) </li></ul></ul><ul><ul><li>_height:50px; (Target: IE only) </li></ul></ul><ul><ul><li>height/**/: 300px; (Target: Everyone but IE) </li></ul></ul><ul><ul><li>html > body (Target: Everyone but IE) </li></ul></ul><ul><li>Ideally no CSS hacks are needed – but they are </li></ul><ul><ul><li>Alternative: Conditional Comments to target browser versions </li></ul></ul><ul><ul><li>Maintainable and available since IE5 </li></ul></ul><!--[if lte IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iestyles.css&quot; /> <![endif]-->
  15. 16. The Holly Hack and Has Layout <ul><li>Most famous CSS Filter break: the Holly hack </li></ul><ul><ul><li>* html {height:1%;} </li></ul></ul><ul><li>Used to force “Has Layout” </li></ul><ul><ul><li>IE internal data structure – still exists in IE7 </li></ul></ul><ul><ul><li>Responsible for sizing and positioning itself </li></ul></ul><ul><ul><li>Article produced in cooperation with WASP http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ietechcol/cols/dnexpie/expie20050831.asp </li></ul></ul><ul><li>What can you do? </li></ul><ul><ul><li>IE6 and below: Use of Holly hack is ok </li></ul></ul><ul><ul><li>IE7 (if needed): conditional comments + zoom:1; </li></ul></ul>
  16. 17. How Do We Analyze Breaks?
  17. 18. What’s Next For IE <ul><li>With the release of the MIX build we are locking down layout changes </li></ul><ul><ul><li>Please test your pages! </li></ul></ul><ul><li>We know we are not done yet </li></ul><ul><ul><li>Committed to full CSS2.1 support in the future </li></ul></ul><ul><li>Working on public bug database where you can report and track your issues </li></ul>
  18. 19. Call To Action <ul><li>Dev community and Microsoft are dependent on each other </li></ul><ul><ul><li>Improvements in standards support mean that behavior will change </li></ul></ul><ul><ul><li>End users do not like broken pages </li></ul></ul><ul><ul><li>So we need your help! </li></ul></ul><ul><li>Please prepare your pages to be ready for IE7 </li></ul><ul><li>Please send us feedback - [email_address] </li></ul><ul><li>We have great documentation that will help you: www.msdn.com/ie </li></ul>
  19. 20. Community Resources <ul><li>At MIX </li></ul><ul><ul><li>MIX Chat – We’re heading over there after this talk! </li></ul></ul><ul><ul><li>IE Compatibility lab </li></ul></ul><ul><li>After MIX </li></ul><ul><ul><li>IE Dev Center: http:// msdn.microsoft.com/ie / </li></ul></ul><ul><ul><li>IE Blog: http://blogs.msdn.com/ie/ </li></ul></ul><ul><ul><li>IE feedback alias: [email_address] </li></ul></ul>
  20. 21. Session Evaluations We value your feedback, so please submit an online evaluation for each session you attend! To make it worth your while, we pick one evaluation from each of the ten session timeslots. If we pick your eval, you will be eligible to win a Creative Zen MicroPhoto
  21. 22. Appendix
  22. 23. 3 Pixel Text Jog Before (IE6) and After (IE7) <ul><li>IE7: </li></ul><ul><li>Before: </li></ul>Notice the gap?
  23. 24. A Word about HasLayout <ul><li>Are there side effects? </li></ul><ul><li>Content of the element cannot flow around other boxes </li></ul><ul><ul><li>bad for float based layouts </li></ul></ul><ul><li>An element with layout cannot &quot;shrink to fit&quot; its children </li></ul><ul><li>Can I still force layout in IE7? </li></ul><ul><li>Yes, {zoom:1;} still works </li></ul>
  24. 25. HTML element independent of Body <ul><li>Viewport of Scrollbar is now outside of the HTML element </li></ul><ul><ul><li>Accordance with section 11.1.1 in CSS2.1 spec </li></ul></ul><ul><li>Viewport has 2px window border that can not be influenced </li></ul><ul><li>Benefit: </li></ul><ul><ul><li>Set margins on HTML element </li></ul></ul><ul><ul><li>Size the HTML element </li></ul></ul><ul><ul><li>Set borders etc. </li></ul></ul><ul><ul><li>Allows absolute/fixed positioned elements on the right viewport edge </li></ul></ul>
  25. 26. auto alignment for building flexible 3-column layouts <ul><li><style> </li></ul><ul><li>body { </li></ul><ul><li>margin: 0px; background:#333; </li></ul><ul><li>} </li></ul><ul><li>#left { </li></ul><ul><li>position: absolute; top: 20px; left: 20px; </li></ul><ul><li>border: 5px solid #ccc; background: #666; </li></ul><ul><li>width: 120px; </li></ul><ul><li>} </li></ul><ul><li>#middle { </li></ul><ul><li>position: absolute; </li></ul><ul><li>border: 5px solid #ccc; background: #666; </li></ul><ul><li>top: 20px; bottom: 100px; </li></ul><ul><li>left: 170px; right: 170px ; </li></ul><ul><li>} </li></ul><ul><li>#right { </li></ul><ul><li>position: absolute; top: 20px; right: 20px; </li></ul><ul><li>border: 5px solid #ccc; background: #666; </li></ul><ul><li>width: 120px; </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul>
  26. 27. Conditional comments <ul><li>An easy way to target specific browser versions </li></ul><ul><ul><li>Maintainable and available since IE5 </li></ul></ul><ul><ul><li>Rich expressions (lt, lte, gt, gte etc.) </li></ul></ul><ul><ul><li>Based on HTML comment syntax </li></ul></ul><ul><li>Use to provide special style sheet: </li></ul><!--[if lte IE 6]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iestyles.css&quot; /> <![endif]-->
  27. 28. Why shouldn’t we use filters? <ul><li>We would not recommend to use CSS filters since they are not supported </li></ul><ul><ul><li>Neither by standard body nor implementers </li></ul></ul><ul><li>Are there inherently bad? </li></ul><ul><ul><li>No, if they are used with caution </li></ul></ul><ul><ul><li>Target ONLY &quot;older than current&quot; (frozen or abandoned) versions of browsers </li></ul></ul><ul><ul><li>Be aware that they are filters (Mark them for maintainability) </li></ul></ul>
  28. 29. Overflow (1of 2) <ul><li>Overflow allows to specify whether content of a block-level element is clipped when it overflows the box </li></ul><ul><li>IE6 used to grow the boxes (min-height) </li></ul><ul><ul><li>Prevented us from implementing min/max-width/height </li></ul></ul><ul><li>Look at code: </li></ul><style type=&quot;text/css&quot;> 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>
  29. 30. Overflow (2 of 2) <ul><li>The CSS2.1 default is overflow: visible </li></ul><ul><li>All sites that tended to enlarge boxes will now overflow </li></ul><ul><li>We only implemented this for non-replaced block level elements and inline-block elements </li></ul><ul><ul><li>Not supporting table-cells </li></ul></ul><ul><ul><li>pages will still be printed using the old behavior </li></ul></ul>Before IE7
  30. 31. Native XMLHTTP <ul><li>In IE7, XMLHTTP is now also exposed as a native script object </li></ul><ul><li>Can be instantiated using the same syntax across different browsers </li></ul><ul><li>Decouples AJAX functionality from an ActiveX enabled environment </li></ul>Syntax if (window.XMLHttpRequest){            // If IE7, Mozilla, Safari, etc: Use native object            var xmlHttp = new XMLHttpRequest() } else { if (window.ActiveXObject){            // ...otherwise, use the ActiveX control for IE5.x and IE6           var xmlHttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);           } }
  31. 32. © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

×