What are the best guides to HTML5 & CSS3 support in web browsers?

Question

Do you know about useful resources about HTML5 & CSS3?

UPDATE:

I'm (and i think a lot of people) looking for practical information how and to what extent is it possible to use these unfinished technologies. I found one very useful resource:

http://caniuse.com/

Answer 1

As far as HTML5 goes, I frequently check out:

• https://html5doctor.com
• Dive Into HTML5

And yes, the HTML5 spec, which I recently visited to find out more about supported input types and form field attributes in HTML5:

• https://w3c.github.io/html/
• https://w3c.github.io/html/sec-forms.html#sec-forms

As for CSS3, I often find myself at:

• http://www.css3.info/

Safari reference material, which may or may not be HTML5/CSS3 specific:

• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html
• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html

Answer 2

Believe it or not, wikipedia: comparison of layout engines CSS3 and HTML5 is actually pretty good at very detailed comparisons. Modernizr is very coarse grained.

Answer 3

You can also take a look at HTML5 Laboratory which is my own HTML5 experiment site.

As mentioned above, HTML5 Doctor and Dive into HTML5 are two great resources.

Answer 4

For the gritty details when the metal needs to hit the road, go to the sources to lookup functions, objects, etc and get the latest info on them and their usage.

Implemented standards

Firefox

• Mozilla Developer Network for Gecko engine
  @ https://developer.mozilla.org/en#Documentation

Internet Explorer

• HTML, CSS, DOM object model
  @ http://msdn.microsoft.com/en-us/library/aa737439(v=MSDN.10).aspx
• JScript (aka JavaScript)
  @ http://msdn.microsoft.com/en-us/library/hbxc2t98.aspx

Unsure about Webkit official dev docs (Chrome. Safari) but you can often use the MDC/Gecko docs because they are usually close in standards. (<< Update: Another answer provides Webkit info.)

---

Standards Sources

Standards also act as a good measuring rod for expected behaviour if you face a bug while developing.

This slide show is about HTML 5 standard technologies and must be viewed in HTML 5 (e..g Google Chrome works well).

• HTML 5 (W3C): http://dev.w3.org/html5/spec/Overview.html
• CSS 3 (W3C): http://www.w3.org/TR/css3-roadmap/
• HTML 5 Web Sockets (W3C): http://dev.w3.org/html5/websockets/
• WebGL: http://www.khronos.org/webgl/
• Web SQL Database: http://dev.w3.org/html5/webdatabase/
• Application Cache API for offline apps (W3C): http://dev.w3.org/html5/spec/Overview.html#offline
• Web Workers for background processes (W3C): http://dev.w3.org/html5/workers/
• Web Sockets for 2-way communication with host (W3C): http://dev.w3.org/html5/websockets/
• Drag and Drop (W3C): http://dev.w3.org/html5/spec/Overview.html#dnd
• Geolocation to pinpoint yourself (W3C): http://dev.w3.org/geo/api/spec-source.html
• Web Storage to store more data in the browser (W3C): http://dev.w3.org/html5/webstorage/
• Canvas Tag for on-the-fly visuals: http://dev.w3.org/html5/spec/Overview.html#the-canvas-element
• and many more .... There are many parts.

A Strategy to find more info ...

See this great slide show (using an HTML 5 capable browser - it'll get you in the mood) for the overview...

Then look up the spec you want at the W3C.org website or Google its contents using a search terms to target the site like "site:www.w3.org "html 5" YourTerm" for example the Google Canvas tag.