What new cross-browser features can we use if we drop support for IE6?

Question

My company is dropping support of IE6 and I just realize that we can use a set of great features.
Is there a list of CSS, Javascript features which we can use with IE6 RIP?

Answer 1

Unsupported in IE6 (this is not a complete list):

• 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

Answer 2

I find When Can I Use... to be a good resource for knowing what is available depending on what browser ranges I wish to support.

Answer 3

Lots of IE6 bugs/behaviours are still prevalent in IE7. Some bugs that were fixed:

• basic alpha-transparent png support
• css child selector
• !important more properly works
• :first-letter support
• min-height
• 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

Some more listed @:

• http://msdn.microsoft.com/en-us/library/ms649487(VS.85).aspx

There really aren't any new features. IE7 is basically what IE6 should've been, and IE8 IE7, and so forth. The only version worth truly getting excited is IE9, which has a huge amount of modern spec support compared to the prior versions.

Answer 4

What i'm most excited to be able to use, or a few things that since I can't use really make me twitchy at the css (and sometimes js) compromises which are required (in order):

1. child selector (tag > tag, no more reseting UL/LI styles!)
2. class chaining (class1.class2, less js/css!)
3. first-child (no more class="last" or first!)
4. :hover on non-anchors (what up web apps!)

Luck you!

Answer 5

If you're already using jQuery you could always consult this function to see if you should use a feature ;)

http://api.jquery.com/jQuery.support/