CSS3's attr() doesn't work in major browsers
Looking at the grammar that's given in the spec:
attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )
It looks like the comma between the attribute name and the unit to be used needs to be dropped:
.window > .content .wbutton.tint {
border: solid thin attr(data-tint color);
box-shadow: inset 0 0 50px attr(data-tint color);
}
However, even if you have the right syntax, it won't work either. It turns out, there are no known implementations of the level 3 version of attr()
as of 2012...2020. To make matters worse, it's still at-risk as of the latest editor's draft of the spec.
But not all is lost: if you'd like to see this feature implemented in upcoming browsers, there is still time to suggest it in the relevant feedback channels! Here are the proposals that have been put out so far:
- Microsoft Edge Platform, currently Under Consideration (ht Lea Verou!)
For the record, the basic Level 2.1 version is fully supported across recent versions of all major browsers, including IE8+ and Firefox 2+, and is used with the content
property for the :before
and :after
pseudo-elements for generated content. The MDN browser compatibility table is applicable only to this version, and not the CSS3 version.
Why do firefox & chrome fail to accept attr() in CSS with pseudo-elements?
CSS attr()
doesn't work with anything but the content
property at the moment, because that's the only property it was defined for in CSS2.1, which is the only version of attr()
that all browsers support at the moment. The more expansive version of attr()
, defined in CSS3, isn't supported by any browsers yet — see my answer to this question.
If you really need to set the top
property or any other property of a pseudo-element according to a data attribute value, you'll have to take the long route: you'll need to alter the document stylesheet using JavaScript, e.g. by using addRule()
/insertRule()
with jQuery's .attr()
method to construct your CSS rules. You can't directly access pseudo-elements using jQuery.
CSS - Using attr() function without ::before and ::after
The attr()
returns a string
and as such the only property it will practically work on as of today is the content
property.
In your case it will return the string 36
and will therefore not be properly applied.
Its syntax has an experimental second parameter, <type-or-unit>
, where one amongst other should be able to choose the returned value's data type, though no browser support it yet.
A side note, both SASS and LESS compiles into CSS and aren't able extend the CSS into something CSS can't already do.
How can I use the HTML data attribute in CSS as a property?
Support would depend on the given browser's implementation. If it's not working, then it's not currently supported.
According to MDN, support for properties other than content
is experimental:
The
attr()
function can be used with any CSS property, but support for properties other thancontent
is experimental.
Combine calc() with attr() in CSS
Right now attr() is not supported by default in any major browser for any attributes other then "content". Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/attr
Related Topics
Click Through Div to Underlying Elements
How to Get the Footer to Stay At the Bottom of a Web Page
In Rc.1 Some Styles Can't Be Added Using Binding Syntax
What Do Commas and Spaces in Multiple Classes Mean in Css
Which Characters Are Valid in CSS Class Names/Selectors
How to Make Bootstrap Columns All the Same Height
Align ≪Div≫ Elements Side by Side
Remove Padding from Columns in Bootstrap 3
2 Column Div Layout: Right Column With Fixed Width, Left Fluid
Media Queries: How to Target Desktop, Tablet, and Mobile
Why Is a Flex Item Limited to Parent Size
Size of Html5 Canvas Via CSS Versus Element Attributes
How to Add a Scrollbar to an Html5 Table
How Does Flex-Shrink Factor in Padding and Border-Box
See :Hover State in Chrome Developer Tools
Use of Xsl-Fo, Css3 Instead of Css2 to Create Paginated Documents Like Pdf