Stop Propping Up IE: Forgetting CSS3 & Hacks and Gracefully Degrading Your Sites

IE8 Adoption Woes  by Ken-SaundersInternet Explorer, even the new IE8, is severly limited in so many ways when it comes to CSS and HTML. The gap between the IEs and the FF/Safari/Chrome browsers gets even wider when CSS3 comes into play. So when do we stop catering and wasting time trying to make every website look exactly the same in every browser?

IE6 Is Not Dead

There’s an argument I’ve heard, and agree with, that as long as there is a significant user-base for a browser, that it should be supported. This obviously includes IE6-8, even though IE6 is almost 10 years old. I believe that although it sucks to do, it’s still important to make IE6 look and act right, until the use of IE6 becomes minimal.

I use to advocate separate stylesheets and hacks for IE if it couldn’t be avoided, which it almost never could. Lately, I’ve begun to put into practice more CSS3 features, many of which are not supported in any version of IE. This lead me to wondering how much I would have to hack IE to get items, like rounded corners, working perfectly.

Gracefully Degrading Instead of Hacking

What if we stopped hacking for IE? I have now stopped the practice of using a separate stylesheet or any hacks for any version of IE, unless the design itself is so out there in terms on PNGs, breaking divs and whatnot. This has lead to quicker and cleaner coding, as I’ve had to learn to anticipate what IE, especially IE6, will do to that particular piece of code.

In addition to forgetting hacks and stylesheets, I’ve now begun to gracefully degrade my designs. While my sites will look almost exactly the same, there may be a few subtle differences, especially in IE6. It’s important to note that sites still need to look 99% the same as every other browser – this keeps usability and design working well. Gracefully degrading is less sites looking completely different in browsers and more saving time on the little things. Have you ever noticed that the smallest inconsistencies in IE, that have nothing to do with layout or errors in coding, are always the things that take hours to get working?

For example, two of the newest sites I’ve been working on include the use of CSS3 rounded corners, which obviously don’t work on any version of IE. Instead of hacking this, or using an image (which means separate images if you’re doing this as a hover in a nav), I just let IE6 display the button, hover, or nav item with square corners and it isn’t even that noticeable.

Mobile Phones: Been There, Doing That

This practice is already common with mobile phones that support the web. It used to be that smart phones could only display limited information through select sites, but now even though most smart phones can display the web in it’s full entirety – mobile web speed still forces many sites to offer a simpler mobile version. Even this blog has it’s one mobile version devoid of most of its design – but it loads quick and beautifully.

Sometimes Hacking Is Still Necessary…

Of course, you’ll still get those clients who don’t understand why gracefully degrading is a better practice than making the website look exactly the same in every browser. I just make sure to charge extra to cover the horrible amount of extra time it takes to do this. If you think the client can be persuaded though, you could always tell them that using CSS3 and not using hacks or separate stylesheets will:

  • Speed up loading time of site due to less images, less HTML and less CSS
  • Using CSS3 means you’re using the latest and greatest web technologies (some clients care about this…go figure)
  • Most larger companies and even social media sites, like Twitter, also practice graceful degrading.
  • Most of the changes are so small, it won’t make an impact design or visitor-wise.

Gracefully Degrading is Trending

Even though this practice was a natural next step for me, I’ve found that it’s actually becoming a common trend among web developers.

Do you practice graceful degrading? Do you still hack for IE? Why or why not?

Photo courtesy of Ken-Saunders