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.