With the recent release of Chrome 6 comes an update to it’s HTML5 support, here’s a run down of the new features supported.
You must, of course, be either using Chrome 6 or a browser that supports these features to view the demo’s. Check if your browser does.
The Hidden attribute
This does exactly what it says on the tin, really. Attaching it to an element will hide it, as far as I can discern, exactly the same as CSS’
The Mark element
<h1 hidden>This will be hidden</h1>
This element seems to be aimed at use in collaboration. It allows you to highlight part of a string of text to users. It could be particularly useful for semantic highlighting of search results. Altogether, a very small, but very useful element. Example.
<p>A <mark>really useful</mark> part of a paragraph.</p>
The Progress element
Another element that does exactly what you’d expect it to, pass it a
value attribute and the progress of a task will be displayed. Example.
<progress max="100" value="25"><span>0</span>%</progress>
The Meter element
This element is much like
<progress> without the constraints of display progress. I’d propose that its primary usage would be in displaying progress towards a goal or limit. The element must have a maximum value so usage for things such as height or weight would not be applicable.
There is also
high attributes to highlight where the optimum level in the meter is. The colour of the meter will be adjusted to display how close the value is to the optimum. Have a play around.
<meter min="0" max="100" low="25" high="75" optimum="50" value="55">50 out of 100</meter>
EventSource (push notifications)
This one’s pretty cool. You can now send push notifications by updating an external file. The code will check the file on a regular basis and if there’s content in it, that will be pushed through. The spec gives a good explanation of why this could be preferable to AJAX.
Using this API rather than emulating it using XMLHttpRequest or an iframe allows the user agent to make better use of network resources in cases where the user agent implementor and the network operator are able to coordinate in advance. Amongst other benefits, this can result in significant savings in battery life on portable devices. This is discussed further in the section below on connectionless push.
I’ve set up a small, simple example (will be made betterer when I find the time.
Definition from the spec:
Web applications should have the ability to manipulate as wide as possible a range of user input, including files that a user may wish to upload to a remote server or manipulate inside a rich web application.
This post will be update with better examples hosted on Github in due course but I hope this is a good eye-opener for what’s to come.
As always, grab me on twitter if you need anything clarifying or just have any questions.