Search code examples
htmlcssattributescustom-data-attribute

CSS values using HTML5 data attribute

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) }
Solution

  • 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.