HTML5 Data Attributes and :before / :after content images, any support?

[FingerFeat]

Heya!

I was currently trying out throwing a URL to an image into a HTML5 data attribute in order to fetch it through CSS/LESS afterwards, injecting it as a content: url() in a pseudo-element (:before & :after), but it seems that despite any kind of black magic tricks I pull off, it will only spit out "attr(data-src)" as a string. Here's an example:

In the HTML:

In the LESS/CSS file:

[data-src] { width: 100%; height: 350px; }

[data-src]:before {
@imageurl: attr(data-src);
content: url(@imageurl);
width: 100%;
height: 100%;
}

The output in the content is "attr(data-src)" (which yes, it makes sense, I know, but you hopefully get my point) and not "image.png".

Is there any chance of getting LESS to take the content of the data attribute and not literally turn "attr(data-src)" into a string? I'm crossing my fingers here as it can be used for some very interesting things.

Big thanks for making LESS! It's amazing.

• Anders

[matthew-dean]

Taking the content of the string "image.png" would be the role of the browser. When compiling LESS on, say, Node or Crunch, it doesn't have access to the HTML. The role of LESS is to produce CSS, so it fulfills the same role as CSS. That is, it provides styling information, not programmatic access to the HTML DOM, which is the role of JavaScript.

[lukeapage]

I agree with @MatthewDL and please shout here if you think this is a valid bug