learning to love ie6
DESCRIPTION
A presentation highlighting a set of good practices and ways around common IE6 problems.TRANSCRIPT
OK, “LEARNING TO LIVE WITH IE6”
View the whole table at: http://www.w3schools.com/browsers/browsers_stats.asp
Monday, March 30, 2009
TARGET AUDIENCE
• We can assume we’re dealing with an average of 20% of IE6 users.
• This figure can go up or down, depending on your specific target audience.
• So, before you start developing, get to know your audience!
Monday, March 30, 2009
PROGRESSIVE ENHANCEMENT
Imagem retirada de http://alistapart.com
Monday, March 30, 2009
PROGRESSIVE ENHANCEMENT
• Originates from the principle of Graceful Degradation;
• However, it goes the opposite direction;
• You should provide a regular experience for users with dated 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 CSShttp://www.alistapart.com/articles/progressiveenhancementwithcss
• Progressive Enhancement with JavaScripthttp://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">
• This ensures pages are rendered in Standards-Compliant Mode, instead of the buggy Quirks Mode.
Monday, March 30, 2009
CONDITIONAL COMMENTS
More information at: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
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 fix IE-specific bugs.
Monday, March 30, 2009
TEST EARLY, TEST OFTEN!
• Never leave browser testing to the final stages of your project.
• Development should be iterative and complemented by a testing stage at the end of each iteration.
Monday, March 30, 2009
IE BUGSWhich drive us absolutely bonkers!
Monday, March 30, 2009
BOX MODEL
• One of the most common bugs present in IE6 and below;
• IE will calculate the width of the box as being 100px;
• All other browsers will calculate a width of 124px;
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
• When an element is floated in a direction, IE doubles the margin value in that direction.
• In this example, the rendered margin would actually be 40px.
Monday, March 30, 2009
DOUBLE-MARGIN BUG
• A common solution is to add display: inline to the element, but this is impractical (for instance, you can’t define a width or height on an inline-level element)
• You can also try adding padding to the parent element to achieve the desired effect.
• Or, instead of using margin-right, use padding-right. Padding is not affected by this bug and may solve your problem.
Monday, March 30, 2009
MIN-WIDTH / MIN-HEIGHT
• Put bluntly, IE6 does not support min-height and min-width (!)
• 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
MIN-WIDTH / MIN-HEIGHT
• This hack leverages the fact that IE6 does not understand neither min-height nor !important;
• It establishes a minimum and auto height for the remaining browsers, while leaving IE6 with a static height.
Monday, March 30, 2009
STEPDOWN
• Stepdown happens when several elements are floated in the same direction.
• IE6 adds a line-break effect after each block-level element, wrecking vertical alignment.
Monday, March 30, 2009
STEPDOWN
• One possible solution is to make sure the floated elements are inline-level (display: inline forces this);
• Another solution is to set the line-height property of the parent element to 0.
Monday, March 30, 2009
HOVER STATES
• IE6 only supports the pseudo-class :hover on anchor elements (<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
• IE6 does not support 24-bit PNGs, that is, PNGs with a transparent background.
Monday, March 30, 2009
SUPORTE PARA PNG TRANSPARENTES
• There are two good solutions:
• Using a .htc file (Twin Helix: IE PNG Fix)
• Or by using Javascript (24 Ways: Superslight e PNGHack on 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 specified height) or by setting it position to relative.
Monday, March 30, 2009
THE END!
Monday, March 30, 2009