Designing in html5 and CSS3 but taking into account browsers that dont support these?

Hi all,

Iv just begun bringing myself up to speed on what html5 and css3 have to offer, I plan to begin adding various code snippets into my next web project.

All I need to know though is how do I account for browsers like ie6 - 8 that dont yet support this upgrade in code?

All advice welcomed and any links you can provide me with


I found the CSS3 course was good at explicitly explaining what you could and could not get away with. Plus, John’s even fixed the main showcase site of his, the one where originally the buttons were all over the page if you weren’t running jQuery (now they are nicely in place and the page degrades nicely).

HTML5, though… letting things degrade in CSS for IE isn’t bad, but while Firefox and other browsers need “display: block” on HTML5 elements to get things rolling, the idea that you need to run a script to get the browser to understand markup goes against my hair. And then IE users with scripts off or blocked don’t even get markup. So, be careful with anything you want to release in the wild using HTML5 (in all its fanciness… there are many levels of fancy in HTML5; you can be very simple or you can go all out).

Thanks for this Paul! I might actually buy the CSS3 Live course. Really want to add as much CSS3 to my next design as possible but want to know what I can and cant get away with.

Thanks again!

Next you’re going to tell me the tooth fairy exists. Anyone interested in security (and blocking scripts) won’t be running IE in the first place. :stuck_out_tongue:

Thanks Stomme!

Kyle’s a designer though— one of those guys who would be building stuff in HTML5 anyway (like all the other guys who have been building HTML5 sites).
Did someone already mention

Thanks again Stomme for the link, looks very useful!

No need to take a course! It’s quite simple.

Don’t touch HTML5 (the new stuff that makes any real difference won’t work in older browsers without scripting - so it’s not worth the hassle).

Build your site using normal CSS then add CSS3 stuff on the top (not in it’s place), so if it doesn’t work in a browser, it’ll just go back to CSS2. :slight_smile:

PS: Anyone still using IE6 (and not forced to use it) shouldn’t be allowed near a computer - their responsible for the worlds zombie machines. :stuck_out_tongue:

Allow me to amend -anyone competent about security won’t be running IE 6 in the first place. Sure they can pretend they’re secure. IE 6 can be crashed and buffer overflown with a damn CSS file, let alone JS. You can’t turn the parsing of CSS off.

Anyone interested in security (and blocking scripts) won’t be running IE in the first place.

Please please please come to my bank and tell them that. Please?

They surf regular internets with IE6. I know, because when I go in for a talk with a rep, I ask to see my web site on their office computers.

You should have taken the recent Sitepoint CSS3 Live course as these issue were covered in detail in the course :slight_smile:

Make sure that you code so that IE6 - 8 (and others) are fully functional first then add your enhancements for better browsers afterwards. Don’t do the reverse.

Use only properties that aren’t critical to the design so that if they are not working in one browser it won’t make much difference.

e.g. things like border radius can be added and IE just gets square corners as before but still remains fully usable.

If you are using html5 then you need to add support for IE (and make sure you set the new elements to display:block).

You can find some useful css3 tools at John Allsopps site here.

Good luck.:slight_smile: