Re: [css-values-4] String concatenation

20.07.2014, 23:32, "Henrik Andersson" <henke@henke37.cjb.net>:
> 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.

(The mailing list is usually not an appropriate place to discuss implementing something by using features that are _already_ widely available [the list is primarily to discuss possible _future_ features, it's not a webdev forum], but given that in this case it may probably make my usecase somewhat more clear, I've decided to reply to you _once_ here in the list.)

Literal `IMG` element is not an option for me since I prefer not to litter HTML with inessential, purely presentational things like icons (it's perfectly OK not to have icons with styles disabled).

`list-style-image` (if that's what you mean by "bullet point") cannot unfortunately be positioned precisely (and moreover bullet position is inconsistent across browsers) unlike `background-image`, so it's not an option either.

I could use `:before` pseudoelement (that would allow precise positioning from baseline unlike `background-image` of the element), but pseudoelements cannot currently be styled inline, and treating `attr()` contents as URL is not yet supported by browsers (neither via `url` keyword inside `attr()` nor by just putting `attr()` into `url()` -- in fact `attr()` in its currently implemented form is mostly a useless CSS feature). As an effectively equivalent alternative working right now, I could use an empty real element like `SPAN` instead of CSS-generated one, but this would mean littering HTML not just with `style` attribute, but also with an empty element -- just for presentational purposes.

I could store unique part of icon URL in a `data-` prefixed attribute in static HTML (like in the possible future HTML code provided in my usecase) and generate the rest DOM structure dynamically using JS, but I tend to follow the Unobtrusive JavaScript principle, so I typically don't use JS for things that can be reasonably implemented without need for JS to be enabled to be functional.

So `background-image` looks like the only reasonable cross-browser option for now, while I would be happy to change it in the future to something that would allow to make HTML code cleaner -- like `concat()` in conjunction with `attr()` working inside `url()` as shown in my usecase message.

P.S. Henrik, if you want to continue this branch of discussion, please send your further messages to me personally (off the list) to prevent considering them as offtopic. Thanks.

Received on Monday, 21 July 2014 12:04:14 UTC