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

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!

Answers


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

Bugs fixed in IE7:

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:

  • background-attachment: fixed
  • :hover on all elements
  • fixed positioning
  • min/max width/height
  • selector improvements (child and attribute)

Need Your Help

Is it better to remove "const" in front of "primitive" types used as function parameters in the header?

c++ header const primitive-types

In the code review process, one of my coworkers mentioned to me that "const"s in front of "primitive types" used as a function parameter in a header is meaningless, and he recommended to remove the...

Firebase persistence, clear Firebase cache

ios objective-c firebase firebase-realtime-database persistence

My app uses Firebase to sync and restore data. I use the setValue:withCompletionBlock: method to insert, update and delete Firebase objects. This method is called whenever there is a CoreData save,...