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

Wartow

AFAIK you can’t using just CSS. It’s fully possible using javascript though. – Pinpoint

Semantically this is a bad idea because it breaks separation of mark-up and layout. – Syman

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 – Trolley

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. – Dismay

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. – Jabe

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. – Colostrum

you can add inline style with css variable and then use the var from your style. you can see it here – Transfer

LOOK (css-tricks.com/css-attr-function-got-nothin-custom-properties) – Speaking

@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. – Ponton

Answer 1

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.

Drudgery

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

Update - this is now a usable feature in browsers. – Parton

@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 – Coinsurance

@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? – Enface

Answer 2

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.

Vargas

Answer 3

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.

Tinker