CSS values using HTML5 data attribute [duplicate]

Question

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

AFAIK you can’t using just CSS. It’s fully possible using javascript though. — David Hellsing
– David Hellsing, Commented Mar 1, 2012 at 20:07
Semantically this is a bad idea because it breaks separation of mark-up and layout. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 1, 2012 at 20:08
You need to find a better example because the solution to your problem above is using <div style="width: 600px;"></div> instead of <div data-width="600px"></div>. At the moment I can only imagine your question being interesting regarding attribute selectors: css-tricks.com/attribute-selectors — T. Junghans
– T. Junghans, Commented Mar 1, 2012 at 20:14
I had the same problem as well. I am doing some transition and animation work. The data-* attributes can be used to store the initial properties of an element. I thought I could access those stored values with CSS but it seems it can only be done with JS. — Vennsoh
– Vennsoh, Commented Jan 30, 2013 at 3:27
Yes and it was called HTML 1.0. Years later people figured out that mixing document structure and presentation was a bad idea and separated them into two parts: HTML and CSS. It's not too hard to imagine that re-combining them again is a bad idea. — Sedat Kapanoglu
– Sedat Kapanoglu, Commented Aug 5, 2013 at 18:38

rybo111 · Accepted Answer · 2015-09-12 09:43:30Z

85

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.

edited Sep 12, 2015 at 9:43

rybo111

12.6k4 gold badges64 silver badges74 bronze badges

answered Aug 8, 2012 at 18:25

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

axel Over a year ago

is this css syntax content: attr(data-content); cross browser? does it work until IE8?

Captain Hypertext Over a year ago

Update - this is now a usable feature in browsers.

ne1410s Over a year ago

@CaptainHypertext According to caniuse.com, the function is still widely unsupported (except for strings in the content attribute of pseudo-elements). caniuse.com/#feat=css3-attr

BoltClock Over a year ago

@Zeus Zdravkov: What kind of logic is that? The whole point of this answer is that the code doesn't work - because it's not supported in the first place. How is that the answer's fault?

yckart · Accepted Answer · 2014-07-24 17:29:24Z

You can create with javascript some css-rules, which you can later use in your styles: http://jsfiddle.net/ARTsinn/vKbda/

var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));

var i = 101;
while (i--) {
    addRule("[data-width='" + i + "%']", "width:" + i + "%");
}

This creates 100 pseudo-selectors like this:

[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }

Note: This is a bit offtopic, and not really what you (or someone) wants, but maybe helpful.

Benny Neugebauer · Accepted Answer · 2014-07-14 11:04:23Z

8

As of today, you can read some values from HTML5 data attributes in CSS3 declarations. In CaioToOn's fiddle the CSS code can use the data properties for setting the content.

Unfortunately it is not working for the width and height (tested in Google Chrome 35, Mozilla Firefox 30 & Internet Explorer 11).

But there is a CSS3 attr() Polyfill from Fabrice Weinberg which provides support for data-width and data-height. You can find the GitHub repo to it here: cssattr.js.

edited Jul 14, 2014 at 11:04

answered Jul 14, 2014 at 10:46

Benny Neugebauer

55.4k31 gold badges250 silver badges209 bronze badges

Collectives™ on Stack Overflow

CSS values using HTML5 data attribute [duplicate]

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related