Learning To Love IE6
•
3 j'aime•360 vues
A presentation highlighting a set of good practices and ways around common IE6 problems.
Recommandé
Contenu connexe
En vedette
Similaire à Learning To Love IE6
Similaire à Learning To Love IE6 (20)
Plus de Bruno Abrantes
Dernier
Dernier (20)
Learning To Love IE6
- 1. LEARNING TO LOVE IE6 Bruno Abrantes bruno@brunoabrantes.com Monday, March 30, 2009
- 2. View the whole table at: http://www.w3schools.com/browsers/browsers_stats.asp OK, “LEARNING TO LIVE WITH IE6” Monday, March 30, 2009
- 3. TARGET AUDIENCE can assume we’re dealing with an average of 20% of IE6 • We users. • This figure can go up or down, depending on your specific target audience. you start developing, get to know your audience! • So, before Monday, March 30, 2009
- 4. Imagem retirada de http://alistapart.com PROGRESSIVE ENHANCEMENT Monday, March 30, 2009
- 5. PROGRESSIVE ENHANCEMENT • Originates from the principle of Graceful Degradation; goes the opposite direction; • However, it should provide a regular experience for users with dated • You browsers. Monday, March 30, 2009
- 6. PROGRESSIVE ENHANCEMENT • However, for users with current browsers, you should provide an enhanced experience by adding small visual and functional niceties. Monday, March 30, 2009
- 7. PROGRESSIVE ENHANCEMENT • Understanding Progressive Enhancement http://www.alistapart.com/articles/understandingprogressiveenhancement • Progressive Enhancement with CSS http://www.alistapart.com/articles/progressiveenhancementwithcss • Progressive Enhancement with JavaScript http://www.alistapart.com/articles/progressiveenhancementwithjavascript Monday, March 30, 2009
- 8. STRICT DOCTYPES • To minimize the impact of IE6’s rendering problems, you should always use Strict Doctypes: <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ • strict.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/ • xhtml1/DTD/xhtml1-strict.dtdquot;> ensures pages are rendered in Standards-Compliant • This Mode, instead of the buggy Quirks Mode. Monday, March 30, 2009
- 9. More information at: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx CONDITIONAL COMMENTS Monday, March 30, 2009
- 10. CONDITIONAL COMMENTS • These comments only work in the various versions of IE/ Windows, and all other browsers safely ignore them. • They can be leveraged to provide alternate stylesheets or scripts that fix IE-specific bugs. Monday, March 30, 2009
- 11. TEST EARLY, TEST OFTEN! • Never leave browser testing to the final stages of your project. should be iterative and complemented by a • Development testing stage at the end of each iteration. Monday, March 30, 2009
- 12. IE BUGS Which drive us absolutely bonkers! Monday, March 30, 2009
- 13. BOX MODEL • One of the most common bugs present in IE6 and below; will calculate the width of the box as being 100px; • IE other browsers will calculate a width of 124px; • All Monday, March 30, 2009
- 14. BOX MODEL • The best solution to this problem is to ensure rendering is done in Standards-Compliant Mode; • You can, however, avoid using padding in layout boxes and instead use it directly on the elements inside the layout box which need padding. Monday, March 30, 2009
- 15. DOUBLE-MARGIN BUG an element is floated in a direction, IE doubles the • When margin value in that direction. this example, the rendered margin would actually be 40px. • In Monday, March 30, 2009
- 16. DOUBLE-MARGIN BUG common solution is to add display: inline to the element, but •A this is impractical (for instance, you can’t define a width or height on an inline-level element) can also try adding padding to the parent element to • You achieve the desired effect. of using margin-right, use padding-right. Padding is • Or, instead not affected by this bug and may solve your problem. Monday, March 30, 2009
- 17. MIN-WIDTH / MIN-HEIGHT bluntly, IE6 does not support min-height and min-width (!) • Put • However, if an element has a fixed height value and it’s content grows out of bounds, IE6 stretches the container (!!) Monday, March 30, 2009
- 18. MIN-WIDTH / MIN-HEIGHT • This hack leverages the fact that IE6 does not understand neither min-height nor !important; establishes a minimum and auto height for the remaining • It browsers, while leaving IE6 with a static height. Monday, March 30, 2009
- 19. STEPDOWN happens when several elements are floated in the • Stepdown same direction. adds a line-break effect after each block-level element, • IE6 wrecking vertical alignment. Monday, March 30, 2009
- 20. STEPDOWN • One possible solution is to make sure the floated elements are inline-level (display: inline forces this); solution is to set the line-height property of the • Another parent element to 0. Monday, March 30, 2009
- 21. HOVER STATES only supports the pseudo-class :hover on anchor elements • IE6 (<a>) and, even still, only if they have a value for the href attribute; • There is a proprietary solution, but the best course of action is to stick to anchor elements when applying hover effects. Monday, March 30, 2009
- 22. TRANSPARENT PNG SUPPORT does not support 24-bit PNGs, that is, PNGs with a • IE6 transparent background. Monday, March 30, 2009
- 23. SUPORTE PARA PNG TRANSPARENTES • There are two good solutions: a .htc file (Twin Helix: IE PNG Fix) • Using by using Javascript (24 Ways: Superslight e PNGHack on • Or Google Code) Monday, March 30, 2009
- 24. HASLAYOUT • hasLayout is an IE6 internal rule, which determines how elements are positioned in relation to others; • Activating hasLayout usually solves some common positioning problems; • Two of the most common solutions involve either setting the height to 1% (which only works if the parent element has no specified height) or by setting it position to relative. Monday, March 30, 2009
- 25. THE END! Monday, March 30, 2009