[csswg-drafts] [filters] Proposal: color-filter

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

== [filters] Proposal: color-filter ==
`color-filter` is a new inherited property that modifies color values used when rendering. It's syntax is similar to the `filter` property, and defines a transform function that is applied to a color.

Example:

```css
.foo {
  color: blue;
  color-filter: invert();
}
```

This would apply a channel invert to all the colors in properties matching `.foo`. In this case the text color would render as an orangey-yellow.

The set of filters available are the same as the current `filter` property, with the exclusion of those that move pixels (i.e. drop-shadow and blur).

Notes:

- Efficient because it only applies to color values at rendering time.
- Very convenient way to do a "dark mode" version of your site.
- Applies to color values, including those in gradients.
- Leaves images and emoji untouched.
- No nasty side effects of `filter`
  - No new stacking context
  - Because it is inherited, descendants can change the value


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

Received on Tuesday, 3 July 2018 22:18:48 UTC