HTML5Data Attributes     Lennart Schoors
The problem. improper/impractical/invalid use of HTML attributes  . rel="ajax" or rel="dialog"  . class="ignore-proxy"  . ...
The solution: data-* attributes  . “Custom data attributes are intended to      store custom data private to the page or  ...
. private in the sense that the end user cant see it - it doesnt affect layout or presentation. intended for use by the si...
Support?. any browser that supports HTML5 doctypes (= all browsers we support). JavaScript API
JavaScript API. dataset property. very similar to the the attributes property. but: not implemented yet, so .... use getAt...
<span data-city="Gent">lensco</span>var user = document.getElementsByTagName("span")[0];user.dataset["city"]; // not suppo...
jQuery. As of jQuery 1.4.3 HTML5 data-* attributes  will be automatically pulled in to  jQuerys data objectuser.data("city...
Examples. store parameters for a Flash movie that’s loaded via JavaScript. store the initial height or opacity of an eleme...
Example: lazy image loading. Flickr: data-defer-src. "any image that doesn’t need to be loaded  straight away, including a...
When not to use it. not intended to compete with  microformats (public data). not if there is an existing attribute or  el...
That’s all folks!Questions?Read on at http://lensco.be
Upcoming SlideShare
Loading in …5
×

HTML5 data attributes

21,546 views

Published on

Short presentation on HTML5 data-* attributes.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
21,546
On SlideShare
0
From Embeds
0
Number of Embeds
945
Actions
Shares
0
Downloads
42
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

HTML5 data attributes

  1. 1. HTML5Data Attributes Lennart Schoors
  2. 2. The problem. improper/impractical/invalid use of HTML attributes . rel="ajax" or rel="dialog" . class="ignore-proxy" . custom attributes with custom DTD
  3. 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. 4. . private in the sense that the end user cant see it - it doesnt affect layout or presentation. intended for use by the sites own scripts, not a generic extension mechanism for publicly-usable metadata
  5. 5. Support?. any browser that supports HTML5 doctypes (= all browsers we support). JavaScript API
  6. 6. JavaScript API. dataset property. very similar to the the attributes property. but: not implemented yet, so .... use getAttribute & setAttribute
  7. 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. 8. jQuery. As of jQuery 1.4.3 HTML5 data-* attributes will be automatically pulled in to jQuerys data objectuser.data("city");
  9. 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. 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. 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. dont use as a CSS hook for styling
  12. 12. That’s all folks!Questions?Read on at http://lensco.be

×