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

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!

Greg

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

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

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...

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.

Assuming you're still choosing to support IE7, that will be your new baseline.

This IE team blog post describes the improvements IE7 made over IE6: http://blogs.msdn.com/b/ie/archive/2006/08/22/712830.aspx?wa=wsignin1.0

It mostly boils down to way less bugs to worry about (many CSS bugs, PNG transparency issues).

The new CSS functionality is limited but useful: