CSS values using HTML5 data attribute

James Kyle picture James Kyle · Mar 1, 2012 · Viewed 124.9k times · Source
width: attr(data-width);

I want to know if there's any way it's possible to set a css value using HTML5's data- attribute the same way that you can set css content. Currently it doesn't work.


HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

Answer

Caio Cunha picture Caio Cunha · Aug 8, 2012

There is, indeed, prevision for such feature, look http://www.w3.org/TR/css3-values/#attr-notation

This fiddle should work like what you need, but will not for now.

Unfortunately, it's still a draft, and isn't fully implemented on major browsers.

It does work for content on pseudo-elements, though.