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.

Spec: http://www.w3.org/TR/css3-values/#attr-notation

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.

1,649 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Lea VerouLea Verou shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    8 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • Dan FrobergDan 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 FrobergDan 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 GoodingGeorge 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 SimmonsJen Simmons commented  ·   ·  Flag as inappropriate

        We need attr() for pairing with CSS Shapes. Here's an example in the spec:
        http://www.w3.org/TR/css-shapes-1/#shapes-from-image
        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