Learning To Love IE6
-
Upload
bruno-abrantes -
Category
Design
-
view
1.715 -
download
0
description
Transcript of Learning To Love IE6
![Page 2: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/2.jpg)
OK, “LEARNING TO LIVE WITH IE6”
View the whole table at: http://www.w3schools.com/browsers/browsers_stats.asp
Monday, March 30, 2009
![Page 3: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/3.jpg)
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
![Page 4: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/4.jpg)
PROGRESSIVE ENHANCEMENT
Imagem retirada de http://alistapart.com
Monday, March 30, 2009
![Page 5: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/5.jpg)
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
![Page 6: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/6.jpg)
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
![Page 7: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/7.jpg)
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
![Page 8: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/8.jpg)
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
![Page 9: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/9.jpg)
CONDITIONAL COMMENTS
More information at: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Monday, March 30, 2009
![Page 10: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/10.jpg)
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
![Page 11: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/11.jpg)
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
![Page 12: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/12.jpg)
IE BUGSWhich drive us absolutely bonkers!
Monday, March 30, 2009
![Page 13: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/13.jpg)
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
![Page 14: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/14.jpg)
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
![Page 15: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/15.jpg)
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
![Page 16: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/16.jpg)
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
![Page 17: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/17.jpg)
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
![Page 18: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/18.jpg)
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
![Page 19: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/19.jpg)
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
![Page 20: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/20.jpg)
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
![Page 21: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/21.jpg)
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
![Page 22: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/22.jpg)
TRANSPARENT PNG SUPPORT
• IE6 does not support 24-bit PNGs, that is, PNGs with a transparent background.
Monday, March 30, 2009
![Page 23: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/23.jpg)
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
![Page 24: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/24.jpg)
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
![Page 25: Learning To Love IE6](https://reader031.fdocuments.in/reader031/viewer/2022020306/54839de5b4af9fa8158b464f/html5/thumbnails/25.jpg)
THE END!
Monday, March 30, 2009