W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2018

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

From: Dean Jackson via GitHub <sysbot+gh@w3.org>
Date: Tue, 03 Jul 2018 22:18:44 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-338072095-1530656322-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.3.1 : Tuesday, 3 July 2018 22:18:50 UTC