Short presentation on HTML5 data-* attributes.

1. HTML5
Data Attributes
Lennart Schoors

2. The problem
. improper/impractical/invalid use of
HTML attributes
. rel="ajax" or rel="dialog"
. class="ignore-proxy"
. custom attributes with custom DTD

3. The solution: data-* attributes
. “Custom data attributes are intended to
store custom data private to the page or
application, for which there are no more
appropriate attributes or elements”
. at least one character after the hyphen
<span data-age="29">lensco</span>
<a href="/foo" data-target="dialog">bar</a>
http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

4. . private in the sense that the end user
can't see it - it doesn't affect layout or
presentation
. intended for use by the site's own scripts,
not a generic extension mechanism for
publicly-usable metadata

5. Support?
. any browser that supports HTML5
doctypes (= all browsers we support)
. JavaScript API

6. JavaScript API
. dataset property
. very similar to the the attributes property
. but: not implemented yet, so ...
. use getAttribute & setAttribute

7. <span data-city="Gent">lensco</span>
var user = document.getElementsByTagName("span")[0];
user.dataset["city"]; // not supported yet!
user.getAttribute("data-city"); // fallback

8. jQuery
. As of jQuery 1.4.3 HTML5 data-* attributes
will be automatically pulled in to
jQuery's data object
user.data("city");

9. Examples
. store parameters for a Flash movie that’s
loaded via JavaScript
. store the initial height or opacity of an
element which might be required in later
JavaScript animation calculations
. tracking traffic
http://html5doctor.com/html5-custom-data-attributes
http://jasonkarns.com/blog/2010/03/10/google-analytics-tagging

10. Example: lazy image loading
. Flickr: data-defer-src
. "any image that doesn’t need to be loaded
straight away, including avatars and map
tiles"
. but: "It’s worth noting that on Flickr we’ve
disabled this type of image deferral for
IE6, 7 and 8."
http://24ways.org/2010/speed-up-your-site-with-delayed-content
http://24ways.org/2010/speed-up-your-site-with-delayed-content#c007948

11. When not to use it
. not intended to compete with
microformats (public data)
. not if there is an existing attribute or
element which is more appropriate
. don't use as a CSS hook for styling

12. That’s all folks!
Questions?
Read on at http://lensco.be