Design
Dropping IE7 Support? Here's What to Look Forward to
Thinking about dropping support for IE7 in your applications and wondering what (relatively) new CSS features you can start using? Maybe you've already dropped support and have just spent too long supporting it to know when to start using more progressive CSS. In either case, I'd like to go over some of the nifty new (actually kind of old) CSS tricks you can start using as a result.
First off, you can now reliably use the inline-block value of the display property. This means you can now put those nicely styled rounded-corner, gradient-background buttons one after another without having to float them. The primary difference between floating and making them inline-block is that you can declare a vertical alignment for all or each rather than set margins to position them. Check out an example
Next is custom counters. Using counter-reset, counter-increment, and content properties you can output your own ordered list with custom list markers on any collection of elements. This works wonders when radically styling your counters in conjunction with the next CSS feature you're allowed to use. Here's a basic example of styling counters.
Finally, my favorite. The :before and :after pseudo-elements are finally available! Yay! This eliminates the need for those extraneous spans and divs that you've been putting in your markup for the sake of crazy design ideas for years. Need three different colored bottom borders for an element? No problem! Just absolutely position the :before and :after pseudo-elements to render borders at the bottom of the parent element! Make sure that when you use these elements that you add a content property, even if it's an empty string. Otherwise your pseudo-elements will be a no-show. How about some bitchin' 80s pinstriping?
There's also items in Javascript land that you'll now be able to use, like the localStorage object and querySelector. You can check out what you can and can't reliably use in the browsers you support at When can I use.... You can quickly compare IE7 and IE8 under the tables tab.