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

I worry that trying to find an all-powerful solution with arbitrary Author styling and/or script access would make that solution too hard to specify and/or undesirable for implementers, leading to a "we can't have good things" situation.

My experience from using `-moz-context-properties` in Firefox DevTools and a couple other places:

1. It works for `<img>` and `background-image`, which is great.
2. UI work rarely needs more than setting the main fill color for an icon.
3. The main limit found was that you can only pass one `context-fill` color, so people abuse `context-stroke` as a secondary fill:

```css
/* the-stylesheet.css */
.some-image {
  -moz-context-properties: fill, stroke;
  fill: blue;
  stroke: red;
}
```

```xml
<!-- the-icon.svg -->
<path d="..." fill="context-fill" />
<path d="..." fill="context-stroke" />
```

`-moz-context-properties` also supports `fill-opacity` and `stroke-opacity` and we use that sometimes, though it's maybe less needed because you can always pass `fill: rgba(...)` to set the opacity.

Things like deep selection and access to the SVG document for scripting could be nice, but those needs don't come up in my work on DevTools, websites and web apps. When you want to manage styles and scripting deeply for a SVG document, it's often straightforward to embed that SVG in the HTML page.

Personally I'd be very happy with something which mimicks what you can do with:
- `<use href="..."></use>` and
- plus inherited properties (`fill: blue`)
- and Custom Properties (`--secondary-fill: red`),

but for `<img>` and `background-image`.


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

Received on Wednesday, 31 July 2019 18:06:31 UTC