HTML5 data attributes
Upcoming SlideShare
Loading in...5
×
 

HTML5 data attributes

on

  • 19,588 views

Short presentation on HTML5 data-* attributes.

Short presentation on HTML5 data-* attributes.

Statistics

Views

Total Views
19,588
Views on SlideShare
18,661
Embed Views
927

Actions

Likes
4
Downloads
34
Comments
0

9 Embeds 927

http://kcmr.tumblr.com 763
http://lensco.be 144
http://localhost 13
http://safe.tumblr.com 2
http://feeds.feedburner.com 1
https://si0.twimg.com 1
http://www.w3schools.com 1
http://www.linkedin.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 data attributes HTML5 data attributes Presentation Transcript

  • HTML5Data Attributes Lennart Schoors
  • The problem. improper/impractical/invalid use of HTML attributes . rel="ajax" or rel="dialog" . class="ignore-proxy" . custom attributes with custom DTD
  • 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
  • . 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
  • 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 getAttribute & setAttribute
  • <span data-city="Gent">lensco</span>var user = document.getElementsByTagName("span")[0];user.dataset["city"]; // not supported yet!user.getAttribute("data-city"); // fallback
  • 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 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
  • 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
  • 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
  • That’s all folks!Questions?Read on at http://lensco.be