Google Chrome 6’s new HTML5 features

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’ display: none.

<h1 hidden>This will be hidden</h1>

The Mark element

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 max and 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 low, optimum and 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.

FileReader

I was unsuccessful in setting up a test for this feature but the general gist is that it will allow you to interact with files via JavaScript. You will only have access to files that the user has elected to upload for security reasons, obviously.

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.

Conclusion

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.

Semantic Tooltips With Pure CSS3 and HTML5

This technique is so simple that I’m really surprised nobody has come up with it before, please shoot me link if they have but I couldn’t find anything after some extensive Google action.

Currently, most people use something like this to produce a pure CSS tooltip:

<a href="#">Title <span>Tooltip</span></a>

(Code from CSSGlobe)

But this is another extraneous element in our HTML and won’t really make much sense to screenreaders so let’s try to produce a more semantic solution.

See it in action

The solution lies in the title attribute and CSS’s content property. We can use the attribute to dynamically insert the text with CSS. The HTML is as basic as you like:

<p>I <span title="I mean really, really" class="tooltip">really</span> like pie.</p>

Using CSS’s content property, we then produce some content after the span like so:

.tooltip:hover:after {
     content: attr(title);
}

HTML Dog has a list of what we can use with the content property.

Our tooltip will now show up when we hover over the span. We should probably make it a bit more visible.

.tooltip {
    border-bottom: 1px dotted #333;
    position: relative;
    cursor: pointer;
}

.tooltip:hover:after {
    content: attr(title);
    position: absolute;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
}

Looking to the Future

With HTML5 finally allowing custom attributes, we can make this even more semantic.

<p>I <span data-tooltip="I mean really, really." class="tooltip">really</span> like pie.</p>

You can read more about HTML5 custom attributes at JavaScript Kit.

You will then need to change the CSS to:

.tooltip:hover:after {
    content: attr(data-tooltip);
}

Coming up on An Innovative Web this summer

Just to whet your appetite slightly, here’s what’s coming up on An Innovative Web this summer.

The website is going to become completely self-hosted and rebuilt from the ground up including loads of great new features.

We’re going to conduct UX and UI case studies on large websites and help you give your visitors the best user experience.

A series on web design basics with a completely customisable experience. You will be able to learn at your own pace and via the method that suits you best, all for free.

We’re also delighted to announce our Summer of Experimentation where we’re going to push the limits of what HTML5 and CSS3 can do. Pure CSS 3D text is just an example of the experimentations that will be popping up on a regular basis.

So plug the feed in to your newreader and get innovative!