HTML5 Custom Data Attributes (data-*) Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! I implore you to rid your mind of that thought immediately and continue reading. Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts: Attribute Name The data attribute name must be at least one character long and must be prefixed with 'data-'. Attribute Value The attribute value can be any string. Using this syntax, we can add application data to our markup as shown below: <ul id="vegetable-seeds"> <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li> <li data-spacing="30cm" data-sowing-time="February to March">Celery</li> <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li></ul>
Yepnope.js | A Conditional Loader For Your Polyfills! Initializr - Start your HTML5 project in 15 seconds! HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. HTML5 Cross Browser Polyfills - GitHub. The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.
Looking to conditionally load these scripts (client-side), based on feature detects? See Modernizr.Looking for a guide to write your own polyfills? See Writing Cross-Browser JavaScript Polyfills.Looking for an alphabetical guide on HTML5, CSS3, etc. features, and how to use them? See HTML5PLEASE.Looking for a polyfill combinator? Svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas. Modernizr. When can I use... Support tables for HTML5, CSS3, etc.
Script Junkie | Essential cross-browser code, information and discussion. HTML5Labs - Home. C HTML5 Logo. HTML - W3C Wiki.