Re: [css-values-4] String concatenation

Marat Tanalin skriver:
> 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.
>
>
Shouldn't you replace the bullet point instead of setting the
background? Or even use a plain <img> element? But your example still
shows the use case, even if you get the implementation wrong.

Received on Sunday, 20 July 2014 19:32:23 UTC