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 and width made me understand how min-height and min-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 ,, _ and 9 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 into z-index and understand the difference between values like auto and 0.
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.