Learning To Love IE6

LEARNING TO LOVE IE6 Bruno Abrantes bruno@brunoabrantes.com Monday, March 30, 2009

View the whole table at: http://www.w3schools.com/browsers/browsers_stats.asp OK, “LEARNING TO LIVE WITH IE6” Monday, March 30, 2009

TARGET AUDIENCE can assume we’re dealing with an average of 20% of IE6 • We users. • This ﬁgure can go up or down, depending on your speciﬁc target audience. you start developing, get to know your audience! • So, before Monday, March 30, 2009

Imagem retirada de http://alistapart.com PROGRESSIVE ENHANCEMENT Monday, March 30, 2009

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

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

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

STRICT DOCTYPES • To minimize the impact of IE6’s rendering problems, you should always use Strict Doctypes: <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/ • strict.dtd\"> <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/ • xhtml1/DTD/xhtml1-strict.dtd\"> ensures pages are rendered in Standards-Compliant • This Mode, instead of the buggy Quirks Mode. Monday, March 30, 2009

More information at: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx CONDITIONAL COMMENTS Monday, March 30, 2009

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 ﬁx IE-speciﬁc bugs. Monday, March 30, 2009

TEST EARLY, TEST OFTEN! • Never leave browser testing to the ﬁnal stages of your project. should be iterative and complemented by a • Development testing stage at the end of each iteration. Monday, March 30, 2009

IE BUGS Which drive us absolutely bonkers! Monday, March 30, 2009

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

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

DOUBLE-MARGIN BUG an element is ﬂoated 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

DOUBLE-MARGIN BUG common solution is to add display: inline to the element, but •A this is impractical (for instance, you can’t deﬁne 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

MIN-WIDTH / MIN-HEIGHT bluntly, IE6 does not support min-height and min-width (!) • Put • However, if an element has a ﬁxed height value and it’s content grows out of bounds, IE6 stretches the container (!!) Monday, March 30, 2009

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

STEPDOWN happens when several elements are ﬂoated in the • Stepdown same direction. adds a line-break effect after each block-level element, • IE6 wrecking vertical alignment. Monday, March 30, 2009

STEPDOWN • One possible solution is to make sure the ﬂoated 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

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

TRANSPARENT PNG SUPPORT does not support 24-bit PNGs, that is, PNGs with a • IE6 transparent background. Monday, March 30, 2009

SUPORTE PARA PNG TRANSPARENTES • There are two good solutions: a .htc ﬁle (Twin Helix: IE PNG Fix) • Using by using Javascript (24 Ways: Superslight e PNGHack on • Or Google Code) Monday, March 30, 2009

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 speciﬁed height) or by setting it position to relative. Monday, March 30, 2009

THE END! Monday, March 30, 2009

Learning To Love IE6

0 comments

Notes on slide 1

2 Favorites