[uf-discuss] HTML 5 data- attributes

[André Luís]

I agree this is a nice solution to solve, for example, the
accessibility problems with the datetime pattern. But not for the
entire set of properties.. it "darkens" the data, makes the author
repeat information, etc...

For the abbr-based design patterns, I totally agree. For the rest, not so much.

A good compromise, IMHO, that has already been sugested here, would be
to port these attributes to classnames (data-*).

Custom DTDs for HTML, adding new namespaces to XHTML... I believe this
is a whole new path for microformats that needs to be assessed whether
we actually _need_ to go.

--
André Luís

On Wed, Jul 16, 2008 at 11:28 AM, LucaP <lucapost at gmail.com> wrote:
> I believe this new HTML feature found in the HTML 5 draft
> specification should be taken into account in here, since it is
> relevant to many ongoing discussions...
>
> via John Resig (jQuery main developer)
>
> A new feature being introduced in HTML 5 is the addition of custom
> data attributes. This is a, seemingly, bizarre addition to the
> specification - but actually provides a number of useful benefits.
>
> Simply, the specification for custom data attributes states that any
> attribute that starts with "data-" will be treated as a storage area
> for private data (private in the sense that the end user can't see it
> - it doesn't affect layout or presentation).
>
> This allows you to write valid HTML markup (passing an HTML 5
> validator) while, simultaneously, embedding data within your page. A
> quick example:
>
> <li class="user" data-name="John Resig" data-city="Boston"
>     data-lang="js" data-food="Bacon">
>  <b>John says:</b> <span>Hello, how are you?</span>
> </li>
>
> The above will be perfectly valid HTML 5. This should be a welcome
> addition to nearly every JavaScript developer. The question of the
> best means of attaching raw data to HTML elements - in a valid manner
> - has been a long-lingering question. Frameworks have tried to deal
> with this in different manners, two solutions being:
>
> Using HTML, but with a custom DTD.
> Using XHTML, with a specific namespace.
>
> The addition of this prefix completely routes around both issues
> (including any extra markup for validation or needing to be valid
> XHTML) with this effective addition.
>
> On top of this a simple JavaScript API is presented to access these
> attribute values (in addition to the normal get/setAttribute):
>
> var user = document.getElementsByTagName("li")[0];
> var pos = 0, span = user.getElementsByTagName("span")[0];
>
> var phrases = [
>  {name: "city", prefix: "I am from "},
>  {name: "food", prefix: "I like to eat "},
>  {name: "lang", prefix: "I like to program in "}
> ];
>
> user.addEventListener( "click", function(){
>  var phrase = phrases[ pos++ ];
>  // Use the .dataset property
>  span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
> }, false);
>
> The .dataset property behaves very similarly to the the .attributes
> property (but it only works as a map of key-value pairs). While no
> browsers have implemented this exact DOM property, it's not hugely
> needed - the above code could be done with the critical line replaced
> with:
>
> span.innerHTML = phrase.prefix +
>  user.getAttribute("data-" + phrase.name );
>
> I think what is most enticing about this whole specification is that
> you don't have to wait for any browser to implement anything in order
> to begin using it. By starting to use data- prefixes on your HTML
> metadata today you'll be safe in knowing that it'll continue to work
> well into the future. The time at which the HTML 5 validator is
> integrated into the full W3C validator your site will already be
> compliant (assuming, of course, you're already valid HTML 5 and using
> the HTML 5 Doctype).
>
> http://www.w3.org/html/wg/html5/#custom
> _______________________________________________
> microformats-discuss mailing list
> microformats-discuss at microformats.org
> http://microformats.org/mailman/listinfo/microformats-discuss
>