How can we improve the Microsoft Edge developer experience?

CSS attr() as defined in CSS Values Level 3

Allows attr() to be used in any CSS rule (not just generated content), any CSS property (not just content) and for various data types.


This will revolutionize what we can do with CSS and enable a kind of decoupling between content and styling that has never been possible before.

2,019 votes
Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
You have left! (?) (thinking…)
Lea Verou shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
  • Anonymous commented  ·   ·  Flag as inappropriate

    This could make a huge difference for CSS layout, completely replacing grid systems…

    [data-layout] {
    grid-area: attr(data-layout custom-ident, auto / 1 / auto / -1);

  • Dan Froberg commented  ·   ·  Flag as inappropriate

    Would be nice also with JS turned off ...

    <button data-mySize="12px" onclick="data-mySize=16px">Click me</button>

    ... to change data-mySize from "12px" to "16px" on a click, and reflow all bound attr()

  • Dan Froberg commented  ·   ·  Flag as inappropriate

    Content (and values) should be specified in HTML.
    Global data-* attributes in <body> and each attribute may be at several places in CSS.
    CR see attr() at-risk without explanation, maybe a typo? How can it be risky?
    Well, JS can more easily change values in CSS. State change on HTML is better than on CSSOM.

  • George Gooding commented  ·   ·  Flag as inappropriate

    How to style input[type=number] dynamically based on the size attribute without this? You can't. Please fix. :)

  • Jen Simmons commented  ·   ·  Flag as inappropriate

    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.

  • Anonymous commented  ·   ·  Flag as inappropriate

    This would be extremely useful for styling dynamically generated content. These feature have made it this far in the W3C process for good reason. Please consider committing to implement this so that the feature is not dropped from the spec.

  • Anonymous commented  ·   ·  Flag as inappropriate

    I'm guessing how easier it will become for developers to build CSS frameworks once it comes out.

Feedback and Knowledge Base