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.
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 html5doctor.com?
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.
You should have taken the recent Sitepoint CSS3 Live course as these issue were covered in detail in the course
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).