Thank you Internet Explorer
This article was first published on CSS-101 (05-09-2011).
This is an article I meant to write for a long time, but due to the hysteria about IE6 I thought it would be considered “provocative” and that people would think I’m fishing for comments. But as the end is near, I think it is now or never.
It is IE6 that taught me CSS!
Trying to understand IE6 peculiarities and learning how to fix its quirks put me on the fast track. It made me investigate properties I had never used before and concepts I had never cared for.
Check this out:
- Box model
- I only learned about this after IE6 came out. Before that, I thought IE5 was doing the right thing (building the box “outside in”). I had absolutely no clue what the spec said about the box model. It’s true that any other standards-compliant browsers could have taught me that, but I would have missed on DOCTYPE, right? 😉
- ‘min-height’ and ‘min-width’
- The way IE6 supports
height
andwidth
made me understand howmin-height
andmin-width
work before these properties were even implemented in browsers 😉 - ‘inherit’
- IE lack of support for this keyword made me curious about which properties are inherited and which are not.
- The cascade
- The
!important
hack (i.e.min-height:100px;
height:auto!important;
height:100px;
) taught me about the cascade. - Parsing
- Using filters like
,
,_
and9
taught me about how the CSS parser deals with a selector, property or value it does not undertsand. - Specificity
- It is another hack (
* html selector{}
) that taught me about specificity as it increased the weight of rules. - Block formatting context (BFC)
- hasLayout teaches you a lot about block-formatting contexts.
- Collapsing margins
- The way margins behave in boxes with a layout versus boxes without a layout makes you look into collapsing margins.
- Stacking context
- In IE6,
position:relative
- by itself - creates a stacking context. This makes you look intoz-index
and understand the difference between values likeauto
and0
. - Computed styles
- Fixing the double margin bug on floats via
display:inline
teaches you about “computation” and “used value” (because the computed value is block, not inline). - Overflow
- I believe the first time I used the
overflow
property was to fix the “italic bug”. - How the browser paints body
- Using the
position:fixed
taught me that browsers paint the background of body differently if the background of html is styled or not.
Yes indeed, IE6 is the best thing that happened to me as a professional web developer.