nuff said!BEN
WEB DEVELOPER

Does CSS3 need to work across all browsers?

CSS3

This is a just a thought.

I think too much time can be spent trying to make CSS3 work cross browser, in the same way that building a website and making it work in IE6 can be a pain and for some developers an unnecessary pain (so they don’t support IE6, Google started phasing out support early this year), but do things really look that bad without CSS3? My website for example does not look good in IE6, it doesn’t look horrific but it doesn’t look good either, i could spend hours making it work but why should i?

This post is mainly about about the rise of Javascript and HTC files (CSS3PIE, eCSStender, curved-corner, ie-css3 and so on) that trick or force an older browser into rendering CSS3 properties. As good as the work is that has gone into these i feel it is unnecessary if you or i educate a client or business owner that their website may not look the same in every one’s browser, but also to show that without CSS3 things don’t look that bad, honest.

Rounded Corners

An image showing how rounded corners are rendered in Chrome, Firefox and IE.

Rounded corners are probably the easiest CSS3 property to implement and probably save the most amount of time (no need to cut up images for rounded corners anymore). The above image shows how a few popular browsers will render a call to action styled using CSS3, Chrome 5 and Firefox 3.6 shows the corners correctly while IE8 doesn’t, but does the call to action really look so bad that i should go and download CSS3PIE and make the browser work? I don’t believe it does.

Shadows

An image showing how shadows are rendered cross browser

Above are some generic boxes you might see on any random website, as you can see, firefox and Chrome handles the shadows i have styled fine and again IE doesn’t. But is the square version of this box so ugly that i should start using IECSS3.js to make the shadows work? I don’t believe it is.

Text Shadows

Image showing how text shadows are rendered cross browser

Text shadows are another nice little feature of CSS3 and are an easy way to improve typography on websites. Again we see the same issue in some browsers and not in others, but is the missing text shadow in IE so poor that you wouldn’t read it? I don’t believe it is (getting annoyed by this yet?).

Conclusion

The image below shows a collection of all 3 properties i have written about here combined and again how they look cross browser.

Image showing a combination of rounded corners, shadows and text shadows and how they render across different browsers

Many of you will say that the time it takes to implement something like CSS3PIE is so small it doesn’t really make a difference, but i don’t believe we should be forced to do extra work when it is the developers of the browser software that are to blame for why a website looks one way in one browser and completely different in another. Its the same principle behind people dropping support for IE6, supporting IE6 means extra work just like supporting a cross browser design that makes use of CSS3 means extra work.

Just my thoughts, I’m sure many will disagree.

About Ben

Hi My name is Ben and i am a front end web developer based in the Midlands of England. I love all things HTML and CSS with over 5 years commercial experience but on the side i also enjoying smashing my body to pieces down the gym and playing football.

Posted on by Ben This entry was posted in Rambling and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>