Let's get the attr() function going!

[Shikkediel]

Just saying, it’s still very much CSS2 with it’s current implementation. Get on with it alright! It’ll make us create pretty awesome CSS…

https://developer.mozilla.org/nl/docs/Web/CSS/attr

For example, you’ll be able to do something like this:

<div data-image="http://mysite.com/someimage.jpg"></div>

div[data-image]:before {
  content: attr(data-image url);
}

It’ll then insert an image url based on the data attribute. Currently only strings can be passed.

Besides on content, it could be used on any property. B-)
No support whatsoever yet though.

http://caniuse.com/#feat=css3-attr

[Shikkediel]

https://bugzilla.mozilla.org/show_bug.cgi?id=435426

So this is apparently causing the hold up:

One thing that may not be obvious from the outside: browser developers are not necessarily very good web developers. Speaking personally, I understand what the attr() extensions in CSS3 Values do, but I haven’t ever encountered a situation where I needed them for something.

But here’s something constructive you could do: write an essay, on your own blog or similar venue, in which you demonstrate that this is a valuable thing to have.

I was looking into this function because I thought it could make a checkbox hack CSS slider a lot more efficient, without all the repetition.

If you can think of any other special use cases, let’s hear it!

[Author]

Posts