Michael Douglas Brett - Web Development

Hi, I'm Michael. I'm a front-end web developer based in the UK. This is my site.

Data Attributes! (What are they good for?)

FEDIQ HTML

May 5th 2016

Back to the FEDIQ, and this is my second attempt at answering this question. My first draft got swallowed by software update drama, which, let's be honest is unforgivable (of me). Anyway, 'What are data- attributes good for?' Absolutely some things!

What are data- attributes?

data- attributes are global attributes that can be used embed custom data into web pages. The introduction of data attributes brought about the end of several hacks that were used in the pre-HTML5 days (mostly made up of unstyled class names and non-validated custom attributes). John Resig wrote a post back in 2008 that outlined just how useful data- attributes could be. It's definitely worth a read.

Formatting data- attributes is quite straightforward. From the spec:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

Here is an example of a valid data attribute:

<p class="user" data-user-id="MDB" data-user-location="UK">Michael Douglas Brett</p>

data- attributes can be accessed in JavaScript via the getAttribute and setAttribute methods, or by using the dataset property (though this is only available in IE11+, if you have browser support considerations). Hyphen separated terms accessed by dataset are stripped of the data- prefix and converted to camel case (so data-user-id becomes userID, etc). It's important to note that the value of data- attributes are always strings, so if you are going to do something with data-user-age="36" you should probably bear that in mind.

You can also use data- attributes as selectors in your CSS:

p[data-user-location="UK"] {
  font-family: 'Times New Roman';

}

What can you do with them?

Turns out, data- attributes really are good for embedding custom data into web pages. Just pop open dev-tools and inspect your Twitter or Facebook feed to see how ubiquitous they have become.

Embedded data isn't their only use-case, either. Their inbuilt flexibility have ensured that people have found all sorts of clever uses for them. data- attributes feature heavily in the two most popular front-end frameworks - both Bootstrap and Foundation make use of them to help manage state for their various UI components. From the Foundation docs:

<ul class="accordion" data-accordion data-multi-expand="true">
<!-- ... -->
</ul>

As data- attributes can also be accessed from CSS, they also have styling implications. Here are a few neat ideas I've come across:

Caveats

data- attributes are super useful and flexible, but they shouldn't be the 'put a bird on it' of the web. data- attributes should not be used when there is a more appropriate HTML5 element or attribute available (e.g. data-time vs datetime). The values of data- attributes aren't meant to be presented to the user, so placing content in them should be avoided for accessibility reasons (which would rule out those cool hover effects). If you have performance/browser support considerations, you might be leery of data- attributes, as accessing them may be slow and dataset may not even be available to you. jQuery alleviates some of this with its data() method (but does so in a way that involves sidestepping the DOM a little bit). Dan Webb wrote a very interesting post about the potential for data- attribute misuse. The comments section for that post, and the comments section of the Resig post linked to above, illustrate some of the resistance to data- attributes on their introduction. But like anything, I suppose it all comes down to 'best tool for the job'.

Next time: Make this work:

duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]