[csswg-drafts] [css-values-4] Allow src() to take multiple arguments (#6717)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] Allow src() to take multiple arguments ==
In #541 we resolved to add `src()` as a `url()` alias without the weird parsing rulesrings around unquoted st that prevent `url()` from containing `var()` references, and @tabatkins made the edits.

However, for `var()` to truly be useful with URLs and cover the main use cases, there are two more pieces of the puzzle: concatenation and casting to string. There is #542 where we discuss proposals for syntax to do both, but so far they have not reached enough consensus.

I was thinking, since the main use case for concatenating strings and casting to string is building dynamic URLs (especially SVG data URIs), what if we just allow `src()` to take multiple arguments, and concatenate (and cast, as needed) the result?

E.g. something like this would then work:

```css
select {
 padding-right: 1.5rem;
 background-image: src('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">\
  <path d="m 20 10 L 50 40 L 80 10" fill="none" stroke="', currentColor, '" stroke-opacity=".4" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />\
 </svg>');
}
```

Which would address a lot of today's hacks wrt icons in one fell swoop.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6717 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 8 October 2021 10:05:13 UTC