Stop Propping Up IE: Forgetting CSS3 & Hacks and Gracefully Degrading Your Sites
Internet 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
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?
I personally no longer support IE 6. On client websites, I create a div that only displays in IE6(conditional stylesheet) that notifies users that they’re using an outdated browser, and gives them suggestions for newer browsers to download, with links!
I CAN support IE6, but I charge an extra fee for it. I think if designers implemented small steps like these, it would assist in phasing out IE6 quicker.
I can sorta agree with Chris my motto is if youtube doesn’t support IE 6 then neither will I allowing it will continue the use of the browser rather then easily upgrade (not the biggest IE fan but IE8 has some interesting tools these days and is kinda nice).
Seriously will never use a IE hack because it in itself is time consuming IE bugs are difficult and must easy to fix but I do know that css3 support is probably not supported by some early browsers and IE is always behind always.
Another problem lies that we are behind in broadband speeds…loading time wouldn’t be an issue if you see what South Korea and most Asian countries have…
@Chris and @Mike The problem with that is, there are too many people who still expect websites to work properly in IE6, and from what I’ve heard, if you charge extra for IE6, the client or agency will most likely find someone else who won’t charge extra for it (lik me.) Honestly, it really does normally take less than 5 minutes to make it work anyways, there are just several things, like rounded corners, that make it quicker to do in CSS3, versus doing an image and trying to make it expandable, etc etc, so no IEs will have rounded corners anymore, unless it’s a major part of the design and the client complains about it.
It wouldn’t be so hard if it was only IE6, or even IE&, but I can’t believe IE8 doesn’t support CSS3, it’s ridiculous and there’s no excuse for Microsoft’s crappiness.
I never even consider IE as a browser. It’s a good thing that they finally launched IE9 addressing most of the issues, but it only works on Windows vista and Windows 7. So, I still don’t call it a browser, since it depends on the platform. The basic idea of web is accessing whatever we create from anywhere, and browser is the platform which follows a certain protocol and is responsible for rendering the view. If the same platform depends on another platform (Windows 7, Vista), why should we call is as a browser? And IE doesn’t follow the protocols ( W3C Standards ). So, it indeed is not a browser, but just a trouble maker in the web.
So I appreciate this article, and all of your comments.
Technically all browsers are platform dependent….the others just support more than IE.
I look at the site in IE 6….if a few minor things aren’t exactly right, I won’t go back and re-code. If major things are off, then I consider going back in and how much time it will take. Since my web design career only started a few years ago, I didn’t really think about IE 6 until testing. Then I wanted to rip my hair out cause I couldn’t figure out what nothing looks right. I now notice my wufoo forms give me a javascript error (might have to ask Chris Coyier about that). I also consider who the audience is. Younger audiences most likely do not use IE 6.
The HTML shim (I think that’s what it is) seems to work pretty well for some things.
I say I don’t support IE6 anymore…but I still check and just make sure nothing is too crazy out of sync.
Attitude change of developers is needed.. Show the differences instead of fixing Microsoft browser problems, it is a problem of MS not yours! MS is not god. I also drop the hacks for IE8 and lower, putting a little message on top of the document that says that te browser doesn’t support modern standards, with a link to information that shows and explain the differences (with examples). No nice shades and other ‘fancy’ things in IE8 or lower, but still working. Stop the hack bullshit, people must see that there is ‘another world’. Upgrade to IE9 (when possible) or simply use another better browser, it is FREE for god sake! We must go on, skip the MS bullshit, show the differences to users. Better for us, better for the customer, better for the internet, better for all. Concentrate on new things instead.
Agreed!!