W3C home > Mailing lists > Public > www-style@w3.org > July 2014

Re: [css-values-4] String concatenation

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>
Message-Id: <7375801405878932@web4h.yandex.ru>
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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:23 UTC