Back in March I wrote about HTML5 Form validation and the problem with the appearance of error messages. I proposed a syntax for styling the error messages, and shortly after I published the post, I submitted the proposal to the W3C via the www-style mailing list.
I’ll discuss quickly the result of that submission, but first I should mention that I’ve since found out that the Google Chrome developers have already implemented their own syntax, and it’s not too far removed from what I proposed. Before I get to that, however, allow me to gripe.
A lot of the attention paid to HTML5 Forms has been centred around the new input types. email, url, date, and the rest are all very convenient, but for me the really useful feature is the built-in validation. In case you’re not aware of it, the browser will now handle all of the validation that we used to use JavaScript for.
This is great for the future, but although you can start using these functions now (in many browsers), they aren’t without their drawbacks — well, one big drawback really. I’m going to explain briefly the problem, and then propose a solution.
The WHATWG have released the HTML5 Edition for Web Developers, which removes all of the overly-technical details aimed at browser makers and leaves the important stuff you need to learn — and with a nice readable stylesheet applied.
Sometimes the existing HTML attributes aren’t sufficient for describing an element’s content. We can use class, ref, rel, title and more, but even so there are occasions where that’s not enough. HTML5 addresses this problem with the introduction of Data Attributes, which allow you to add simple metadata to individual elements, largely for the purpose of providing information to make JavaScript functions easier.
HTML5 allows the use of block elements inside the a tag, which was not permitted in HTML4. This means that you can wrap a link around whole sections of markup, making all of the child elements of the a become the link. You use it like so:
<a href="http://example.com">
<div>
<h3>I'm an example</h3>
</div>
</a>
You can begin to use this straight away, as every browser supports it — although you must be wary of one rather glaring bug in Internet Explorer.
As you’re no doubt aware, HTML5 video is this year’s big thing — but there’s a dispute going on about which should become the default standard video codec. The current nascent de facto standard is H.264, but recently the new WebM format is gaining traction.
I’ve no idea how the web video format war will end. My preference is that a free, non-patent encumbered, high-quality video codec will become the standard, and WebM is the best fit for that description. Despite the recent announcement by the MPEG LA, the patent pool which controls licensing of H.264, that it will always be free for ‘video delivered to the internet without charge’, that still doesn’t make it free-as-in-speech, and still not free-as-in-beer for anyone wanting to build a business around video encoding/decoding (which includes, if I’m not mistaken, bundling it with a browser). All that said, my preference is meaningless in the face of so many vested business interests.
For no particular reason other than idle curiosity, I made a demo of a broken neon sign, using CSS Animations (you’ll need Firefox 5, Safari or Chrome to see it). It doesn’t degrade well at the moment, the root cause of which is down to what I think is a bug in Firefox’s implementation — I’ll need to confirm that.
One quick learning from making this: it would be really useful to have CSS Mixins when using a lot of repetitive keyframes, as I do in this animation. The W3C seem to be quite against them, however.
[#] 3 Comments