Day 21 and 22: HTML5 and CSS3

HTML5 logo

HTML5 logo

For the last few days (and for a few days to come) I had the joy of playing with the new (ok, not so new) shiny toys for web designers: CSS3 and HTML5. And let me tell you, joy it is. The simplicity of embedding video and audio alone makes me smile like a lunatic but when you add the smooth transitions and transformations, I am sold.

Of course Internet Explorer (8 and below) is as usual a damn party pooper and doesn’t support almost any of the new features (that are otherwise supported by all the other major browsers). There are many hacks and fallbacks one can use to deal with this spoil-sport but the whole idea of html5 and css3 being simple goes to pieces. IE9 is a little bit better and supports the bare basics so maybe by the version 25 we can expect support for today’s standards (of course by then we would have moved on and IE is as always behind, or even better, it doesn’t exist anymore).

I will not write about the particulars of either HTML5 or CSS3 because this could take a book or two but I will point you in the direction of some resources I found useful.

Books:

Both books mentioned below are great introductions to the topic of HTML5 and CSS3. They are written with a light language and explain everything in detail. They also give some background as to how these standards came to be. To better explain the new features, both authors use extensive code examples. The only potential drawback is that the books are only useful for someone who already knows HTML and CSS.

A Book Apart: HTML5 for Web Designers by Jeremy Keith

A Book Apart: CSS3 for Web Designers by Dan Cederholm

Web-resources:

Comprehensive table of browser support for HTML5 and CSS3: http://www.findmebyip.com/litmus/

JavaScript library that detects browser support for the technologies: http://www.modernizr.com

Example site using CSS3 features from Dan Cederholm: http://css3exp.com/code/view/

And lastly an answer to a very important question: Do browsers need to be experienced exactly the same way in all browsers? (also from Dan C.) 

Leave a Reply

Your email address will not be published. Required fields are marked *

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>