Ditching IE hacks for CSS3

Posted on May 12, 2011

0


It’s time that we as developers and web designers no longer take the flak for the shortcomings and blatant ignorance of Microsoft in it’s refusal to upgrade the CSS support in IE 7 and 8!

As if the situation was not bad enough when dealing with IE 6, the ‘cool’ of web 2.0 (rounded corners) can only be achieved using either .htc or .js hacks, that can only be usefully applied to a simple box shape. Some can do varied radius corners whereas others can only do all corners at the same radius, and when you start adding backgrounds and border – well then it just all falls apart.

I was prompted to react this way after trying out a technique suggested by David Walsh in the following post:

http://davidwalsh.name/css-rounded-corners

The main problem was that it can only be used in a very few circumstances successfully.

What to do then?

Clients are the main issue here. If you don not have enough of a good relationship with your client that you cannot explain to them the extra effort and cost needed to try and achieve the desired visual appearance is more or less folly, then you are on a hiding to nowhere. In such a situation you just need to fall back on sprites/graphics to acheive the desired look.

Why are you targeting Microsoft

Oh I wouldn’t say I am targeting M$. Just trying to put things into perspective.

If I were to produce a 1 page design where there were rounded boxes at fixed widths in a right hand column, for example, with a slight gradient as a background, and then some buttons (effectively links) which had a nice gradient and rounded corners, it would take maybe an hour at the most in HTML and CSS to achieve with no graphics required, faster loading time and support in IE9, FF, Safari, Chrome and Opera.

What would happen in IE 6, 7 and 8? Well I can achieve the gradient background using an IE specific filter, but the rounded corners are not supported.

The extra time to implement IE specific stylesheet + required graphics could be an extra 2 hours.

So on this very simple example you can see that about  two thirds of the project time is spent on getting around the limitations of IE8 and below.

Who’s fault is this?

Not the designers, or the web developers.

Microsoft could easily have produced a software update that would enable support in at least IE7 and IE8. Instead they opted for the more lucrative approach of saying, “we have saturated you all with IE7 and IE8 – which are inferior to Firefox” but because you are reluctant to try that – try our new browser IE9 – it does it all. What’s that? You’re running XP? Ah… you will need to upgrade to Vista or our shiny new Windows 7.

At the end of the day, designers and developers should accept the situation and prepare their clients for the two paths:

  1. Use the accepted standards supported by all browsers except IE6, 7 and 8 – they’ll get the squared look.
  2. Create extra work to get the same look across all browser and pay two thirds extra

Some of you may say , “two thirds? that’s a little steep…” but on some large projects, it can truly stretch to that.

We should all be working towards a common goal, a common set of standards, allowing for increased productivity, getting the products and services out there on the web, without trying to fix the square wheel.

If you have any opinions, please comment.

Advertisements