Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
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