Re: [csswg-drafts] [selectors] Styling Content in <img> Elements (#3730)

For the URL approach, regardless whether using a `#` fragment identifier or `?` query string (which are client and server side, respectively, in my book), it makes sense to investigate whether there should be a **common solution** for SVG *and* CSS, and perhaps a parallel one for (structural) SVG only. 

The common solution would probably make parameter values available within `var()` or `env()` or a new sibling function like `param()`. The nice thing about this is that it works out of the box with `url()` and with slight modification also with `:target` (perhaps `:target()` then).

## `foo.svg#bar&baz=quuz`
```` svg
<svg>
<style>
rect {fill: red} 
:target {fill: magenta} 
#bar:target {fill: green} 
#baz:target {fill: orange} 
#baz:target(quuz) {fill: lime} 
</style>
<rect id="bar" width="300" height="200"/>
<!-- red traditionally, now green -->
<rect id="baz" width="200" height="300"/>
<!-- red traditionally, orange without :target() support, green with it -->
<rect id="bar&amp;baz=quuz" width="300" height="300"/>
<!-- magenta traditionally(?), now red -->
</svg>
````

~~~~ css
:root {background: url(foo.svg#bar=lime&baz=quuz);} 

img[href$=".svg"],
img[href*=".svg#"] {parameter: "bar", "baz" "quuz"} 

rect {fill: param(bar, color);} 

rect {fill: map(param(baz), "quuz" lime, magenta);} 
~~~~

-- 
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3730#issuecomment-473518260 using your GitHub account

Received on Saturday, 16 March 2019 10:20:36 UTC