Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at BFusion / BFLEX 2010 (Bloomington, Indiana) with: John Farrar

What CSS Properties Are Supported When You Drop IE6 Support

By Ben Nadel on
Tags: HTML / CSS

Over the new year's holiday weekend, I read Mobile First by Luke Wroblewski. In the book, Wroblewski talks about leveraging the contraints of mobile development in order to think more holistically and effectively about your users and your software. In his explanation, he suggests using CSS effects instead of images wherever possible in order to reduce the number of HTTP requests that need to be made across a mobile data connection. This got me thinking about CSS support. My CSS skills are OK, but definitely not great. My understanding of support is outdated, which got me thinking: if one drops IE6 (Internet Explorer 6) support, which new CSS properties are generally supported?

While Internet Explorer 6 used to be the darling of the internet world, it has long since become the limiting factor in web application development. If you drop support for IE6, however, a number of new CSS (Cascading Style Sheet) properties become [much more] universally supported. I took some time this morning to look at the following compatibility charts to see what gems I might not be leveraging effectively:

According to these lists, when you drop IE6 support, you get access to:

  • > - Immediate descendant (child) selector.
  • [attr] - Attribute selector (starts with, ends with, contains).
  • :first-child - First child selector.
  • min-width - Minimum width layout.
  • max-width - Maximum width layout.
  • min-height - Minimum height layout.
  • max-height - Maximum height layout.
  • position:fixed - Fixed position layout.
  • .A.B - Multiple class selection.
  • :hover - Hover selector on all elements.
  • clear:both - Full clear support in float layouts.

In addition to properties that are newly supported (if you drop IE6 support), I found a few items that I didn't know were already supported in IE6 and above:

  • :first-line - First line selector of content copy.
  • :first-letter - First letter selector of content copy.

Also, while not exactly a new CSS property, we don't have to worry about the IE6 double-margin / float bug (where margin is doubled if it is on the same side as a float).

The usage of IE6 has gotten so low that I have stopped supporting it unless explicitly necessary on a given project. And while this decision is freeing, I wasn't entirely sure of the true range of benefits that I would be getting. There's definitely some cool and useful CSS properties that I'll be taking advantage of now that I'm moving into the modern age of web browser support.




Reader Comments

I stopped supporting IE6 about a year ago, and like you say unless its required I have no intention of even making the site legible in IE6 anymore since its such a low priority browser now.

Welcome to the modern age!

Reply to this Comment

@Dave,

Yeah, I saw on Twitter this morning that one report puts IE6 usage in the US at just below 1%. Pretty low. I haven't supported IE6 in a while... but didn't really know what I was getting with the exclusion of the browser. I'm definitely looking forward to things like min-height, child selector, first-child, and multiple class selection! Very exciting to finally get that in my repertoire.

Reply to this Comment

I stopped a year and a half ago too.

I built the front end of our website in IE8/Chrome/Firefox/Opera and tried to make adjustments for IE7 and IE6.

IE7 took a little fiddling but IE6 was too much effort so I decided to detect IE6, disable stuff and print out a message.

Google Analytics says we've still had 65 visits in the last month from IE6 though.

The good news is that Chrome was up to 20% of total visits in that time compared to IE's 60%.

Reply to this Comment

Problem is, my website got over 1,500 IE6 visitors last month alone. I haven't bothered to see how many of them actually went through and bought something but it's still a figure that I can't ignore. In the last year it's over 70,000. Fortunately, the graph is heading downwards

Reply to this Comment

@Garry,

No doubt, if IE6 is still relevant (as a source of income especially), it cannot be ignored. Hopefully, it will get to the point where the cost of maintenance outweighs the cost of opportunity.

Reply to this Comment

I'm launching a site soon that covers things like this. Nice writeup, Ben. :)

here's some more..
http://analogysoft.com/learning/ui-hulk-out/#beyondie6

and my own rough notes:

IE6:
* PNG support!
* position: fixed
* div:hover
* selectors: div:first-child, h2 + p, img[data-fullsize], and ul.main > li
* background-attachment: fixed
* min-width, max-height, etc

IE7
* postMessage
* cross-domain XHR
* native JSON
* data URI
* :before, :after, :focus
* localStorage and sessionStorage
* getters and setters on DOM elements
* querySelector(), querySelectorAll()
* box-sizing!
* display: table-cell, table, etc.

Reply to this Comment

@Paul,

OOOh, PNG support! I forgot about that one. I only recently started using PNGs (esp. with transparency). I forgot about that whole PNG-Fix thing people used to have to do for IE6.

Reply to this Comment

@Jason,

I'm curious to this as well. I'm starting at a new place later this month and I noticed in their analytics that about 1% of its IE users use Chrome Frame … that's not really worth it is it. (The site has 1,5 unique visits per week.)

I really liked the idea when it was announced but it seems like it never took off and now it's just getting less relevant since IE6 support is over and IE7 support will probably drop quite soon as well (with major sites dropping their support already and Microsoft pushing out forced updates).

Reply to this Comment

Not that it should stop you for using them in valid cases but I'd note that multiple class selector and attribute selector are quite expensive selectors to use when it comes to performance on big sites.

Reply to this Comment

@Paul, a suggestion: started reading your comment below "IE7" and thought "wait a second, this is IE8 stuff!" - might be worth to clarify for newcomers that this is what they get access to in IE8 when they *drop* IE7 support, not stuff supported in IE7 itself. (Same goes for IE6 in your comment as well, of course)

Reply to this Comment

@Paul, a suggestion: started reading your comment below "IE7" and thought "wait a second, this is IE8 stuff!" - might be worth to clarify for newcomers that this is what they get access to in IE8 when they *drop* IE7 support, not stuff supported in IE7 itself. (Same goes for IE6 in your comment as well, of course)

Reply to this Comment

@Jason

We have chrome frame implemented for IE6, however, we only have a very small percent of our IE6 users who actually use it (which makes sense.) If they are too lazy or not computer literate enough to upgrade IE6 (or simply hate google), why would they install google chrome frame?

Reply to this Comment

@Kevin,

Yeah, I was actually thinking the same thing. A co-worker also mentioned that if they're still using ie6, then they might be on locked-down machines. So if they can't upgrade IE, then they most likely can't install plugins either.

Reply to this Comment

An interesting thing I've noticed on the Analytics of my school site is that this year (the academic year starting in September) for the first time ever IE was not the most used browser-- Safari was. The split was something like 36% Safari and 33% IE.

I suppose it's all the Apple devices that students are bringing in to the classrooms.

Reply to this Comment

Even the freedom to add something as versitile and useful as a simple

  • ele[attr]{ … }

selector to your toolbox is a big deal. I'll trade that for rounded corners and drop shadows in those older browsers any day!

Reply to this Comment

@Doug - I noticed that most of the kids where I teach are into Google Chrome....Firefox and IE don't really factor...

Reply to this Comment

1 year later.. I'm waiting for "What CSS Properties Are Supported When You Drop IE7 Support" entry.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.