CSS values using HTML5 data attribute

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, Mar 01 '12 at 20:07
Semantically this is a bad idea because it breaks separation of mark-up and layout. — Diodeus - James MacFarlane, Mar 01 '12 at 20:08
You need to find a better example because the solution to your problem above is using
instead of
. At the moment I can only imagine your question being interesting regarding attribute selectors: http://css-tricks.com/attribute-selectors/ — T. Junghans, Mar 01 '12 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, Jan 30 '13 at 03: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, Aug 05 '13 at 18:38
Better example, say your CSS looks more like this `div::after { width: attr(data-width) }`. You want to modify the value with JS, but you can't (easily) modify pseudo elements, so reading from a data-* property would be ideal. — Michael Martin-Smucker, Apr 21 '15 at 15:35
you can add inline style with css variable and then use the var from your style. you can see it [here](https://css-tricks.com/css-attr-function-got-nothin-custom-properties/#article-header-id-0) — oCcSking, Dec 12 '18 at 13:54
LOOK (https://css-tricks.com/css-attr-function-got-nothin-custom-properties/) — lida shoaee, May 26 '20 at 11:04
@T.Junghans And then you'll get into trouble with your CSP, unless of course you add unsafe-inline, defeating the whole purpose of the CSP. And providing a hash for your CSP would only work if it's a fixed value. And a nonce doesn't work here. Sidenote: Of course if you can dynamically change the style attribute, you can also dynamically create a style tag with it's dynamically created rules on which you can apply a nonce. — Sven Cazier, Nov 01 '21 at 23:08

score 84 · Accepted Answer · edited Sep 12 '15 at 09:43

84

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 '15 at 09:43

rybo111

12,240
4
61
70

answered Aug 08 '12 at 18:25

Caio Cunha

23,326
6
78
74

is this css syntax `content: attr(data-content);` cross browser? does it work until IE8? – axel Jun 22 '15 at 11:37
1

Update - this is now a usable feature in browsers. – Captain Hypertext Nov 16 '16 at 15:28
11

@CaptainHypertext According to `caniuse.com`, the function is still widely unsupported (except for strings in the content attribute of pseudo-elements). http://caniuse.com/#feat=css3-attr – ne1410s Nov 25 '16 at 08:58
2

@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? – BoltClock Oct 03 '17 at 18:35

yckart · Answer 2 · 2014-07-24T17:29:24.417

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 Code · Answer 3 · 2014-07-14T11:04:23.420

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.

CSS values using HTML5 data attribute

3 Answers3

Linked

Related