- From: Marat Tanalin <mtanalin@yandex.ru>
- Date: Sun, 20 Jul 2014 21:55:32 +0400
- To: Lea Verou <lea@verou.me>, www-style list <www-style@w3.org>
16.07.2014, 21:53, "Lea Verou" <lea@verou.me>:
> We just had a discussion with Tab and fantasai in #css about adding string concatentation to CSS, either through a concat() function, or a plus (+) operator.
FWIW, my real-world usecase for concatenation is following.
On my website, I have a unique icon shown to the left of each portfolio item on the home page.
Currently, this is implemented via `style` attribute containing `background-image` property with full URL of icon image:
<li style="background-image: url(/images/sites/lorem/icon.png)">First item</li>
<li style="background-image: url(/images/sites/ipsum/icon.png)">Second item</li>
<li style="background-image: url(/images/sites/dolor/icon.png)">Third item</li>
Note that each icon is unique, and new portfolio items are added periodically, so specific icons are not subject to be specified in an external stylesheet and should be specified inline anyway.
With concatenation and `attr()` function working inside any property, this could be implemented this way:
<li data-icon="lorem">First item</li>
<li data-icon="ipsum">Second item</li>
<li data-icon="dolor">Third item</li>
CSS:
LI {background-image: url(concat('/images/sites/', attr(data-icon), '/icon.png'));
Here, we have unique part of icon URL specified inline inside `data-icon` HTML-attribute while common parts of the URL are concatenated to it via a single rule inside an external stylesheet.
Thanks.
Received on Sunday, 20 July 2014 17:56:03 UTC