What CSS Properties Are Supported When You Drop IE6 Support
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!
@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.
Yeah - I think, just today, I read that IE6 usage in the US is down to 1%.
@Jeffrey,
Yeah, it must be a link going around on Twitter. I saw it also.
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%.
@Ross,
I could live with 65 disappointed users :)
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
@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.
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.
@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.
Has anyone tried Google's Chrome Frame yet? I saw that's being used on HTML5 Boilerplate, and it seems like a pretty solid alternative to having multiple browser-based styles.
http://code.google.com/chrome/chromeframe/
Here's where I saw it... http://html5boilerplate.com/
I haven't had a chance to try it out yet...
@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).
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.
@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)
@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)
In IE 8 its a option called in Private filtering how its work when we use IE 8?
@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?
@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.
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.
Even the freedom to add something as versitile and useful as a simple
selector to your toolbox is a big deal. I'll trade that for rounded corners and drop shadows in those older browsers any day!
@Doug - I noticed that most of the kids where I teach are into Google Chrome....Firefox and IE don't really factor...
1 year later.. I'm waiting for "What CSS Properties Are Supported When You Drop IE7 Support" entry.