What Is the Correct Usage of CSS Attr Function

What is the correct usage of CSS attr function?

In CSS 2.1 (which is what should be used these days) the attr function is a little limited in what it can do. The only place where it can appear is in a content property on :before and :after pseudo-elements. So its sole purpose is generated content.

In CSS 3 this changed a bit, in that attr() may return other types than only strings and it can be used for other properties as well.

But bear in mind that most of CSS 3 is still a Working Draft with very few features (not including Values and Units) being a Candidate Recommendation. Support by User Agents for CSS 3 features varies currently between limited and next to non-existent. Mostly browser vendors seem to fight boredom by implementing "cool stuff" like rounded borders, text shadow, etc. which doesn't mean much work supporting it. But what you were looking at here is definitely beyond that and the WD status won't change in the near future. So don't expect it to be implemented anywhere.

Using attr to set css variable inline that work with CSP

Not yet. In the same link you can read:

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

Still no browser support the attr() for properties different than content and also no support for the type-or-unit.

Worth to note that you can use attr() inside a CSS variable but it need to be later used with content. CSS variables is only an intermediate so we don't evaluate the support based on the variable but based on the property that will use the variable.

[data-color] {
  --color: attr(data-color);
}

*::before {
  content: var(--color, "default");
  color:blue;
}

<div data-color="red">hello</div>

Using CSS3 attr() with transform rotate

That's not possible in current browsers out there. But the spec says:

The attr() CSS function is used to retrieve the value of an attribute
of the selected element and use it in the style sheet. It can be used
on pseudo-elements too and, in this case, the value of the attribute
on the pseudo-element's originated element is returned.

The attr() function can be used with any CSS property, but support for
properties other than content is experimental.

So it will be supported in near future.

Here's the MDN doc.

How to use `attr` when not on `content` property

Usage in other properties than content is experimental: https://developer.mozilla.org/en/docs/Web/CSS/attr

html special characters in css content, using attr()

Escape sequences in CSS are only treated specially in CSS syntax. When you specify it in an HTML attribute value then use that value in CSS attr(), it is taken literally. From the CSS2.1 spec:

attr(X)
This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. [...]

Since you're specifying character codes in HTML attribute values, you can either use HTML character references, entity references or the Unicode characters themselves. It's worth noting that the two character codes you have do not appear to be valid, however, so they may not work at all.

EDIT: [...] Essentially, I thought CSS attr() would copy over an HTML attribute literally, but that is not the case.

It copies the attribute value according to the DOM, which may be different from how it is represented in the source, e.g. the source markup, or the script that is generating the element.

For example, if the source is represented in raw HTML markup, then as I mention above, you will need to use HTML character escapes, because HTML is parsed by an HTML parser. If the elements are generated using a JS-based template engine such as Jade, then the character escapes take the form of \u followed by the hexadecimal code-points. In both cases, the respective parsers will translate the escape sequences into their representative characters, and the characters themselves are what is stored in the DOM as part of the attribute value.

Of course, again there's always the alternative of just using the Unicode characters directly. If your source files are all encoded as UTF-8, you should have no problem using the characters directly.

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

Making a progress bar with the CSS attr function

attr() was originally intended for use with the content property and support for it there is good.

CSS Values and Units Module Level 4 adds support for any property (such as width), but that specification is currently a Working Draft and browser support is non-existent.

---

Related Topics