Css3'S Attr() Doesn't Work in Major Browsers

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 than content 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



Leave a reply



Submit