I've decided not to cater for IE6 - What tasty CSS treats can I use? [closed]

Question

Ok firstly, this is not a discussion on whether I should be catering for IE6. I'm sure there's hundreds of threads on S.O. where you can discuss the pros, cons, market shares, javascript shivs and all the other stuff that comes with it.

Let's say I've put two fingers up to IE6 and am ignoring its existence -

what can I now do differently in the way I style my pages?

Pseudo-selectors?

Parent/Child selectors?

Other tidy stuff?

What are the new freedoms that come with abandoning IE6?

I know some of you will be itching to tell me why i should support ie6 or about js fixes that mean I can use advanced selectors etc etc - Please don't waste your/my/our time!

Answer 1

You can now start to use web standards...

With IE6 out of the way, you can start to use loads of really nice things. Below is a list of things specific to IE6.

New features

• Transparent PNGs (full 24 bit!)
• Use of child selectors div > p
• User of sibling selectors p + input
• min/max-width/height
• :first-line
• :first-child
• :hover (all elements)
• float: right
• position: fixed
• Attribute Selectors (input[type="text"])
• Trust z-index again

Bugs fixed in IE7:

• Peekaboo Bug
• Internet Explorer and Expanding Box Problem
• Quirky Percentages
• Line-height bug
• Border Chaos
• Disappearing List-Background bug
• Guillotine Bug
• Unscrollable Content bug
• Duplicate Characters Bug
• IE and Italics
• Doubled Float-Margin bug
• Duplicate Indent bug
• Three pixel text jog
• Creeping Text bug
• Missing First letter bug
• Phantom box bug
• 31 style sheet limit - although, you shouldn't really be affected by this, else you've got other problems!

Non-technical things:

• Save time and money
• Throw away 90% of CSS hacks

Answer 2

Still really depends which browsers you do want to target. Still plenty of things to look out for.

Here's a list of unsupported features in IE6 you can now use:

• child selector ( div > p )
• adjacent sibling selector ( h1 + p )
• general sibling selector ( h1 ~ p )
• chained class selectors ( .class1.class2 )
• attribute selector ( a[href] )
• descendant selector after :hover pseudo-class ( div:hover span )
• chained pseudo-classes ( a:first-child:hover )
• :hover on non-anchor elements
• :first-child
• "virtual dimensions" (dimensions determined by top, right, left, bottom when position: absolute )
• min-height, min-width
• max-height, max-width
• transparent border color
• position: fixed
• background-attachment: fixed works only on the root element

A really good resource you can look at is http://caniuse.com/ for viewing what is supported where.

And finally - a list of IE6 bugs that were fixed in IE7 - more info here

• basic alpha-transparent png support
• css child selector
• !important more properly works
• :first-letter support
• partial click bug
• window.XMLHttpRequest became present, instead of ActiveXObject
• abbr tag is recognized
• select z-index bug is resolved as it's become window-less

Answer 3

I've used this site to keep up with IE6 / ~IE6+ oddities / workarounds:

http://work.arounds.org/

You could review what is a work around on IE6, and pat yourself on the back that you don't have to do it anymore ;) I think thats a 'treat' in itself.. time saved!

At least now you can focus 0 time on IE6, and more time on IE7, IE8 issues...

Answer 4

Mostly the freedom is your time now that you don't have to deal with IE6 bugs but the big gain Greg didn't already mention is the extra relational selectors: >, +, and ~ (child and siblings) and not worrying about hasLayout so much.

Quirksmode will tell you what you can and can't do now.