Open grorg opened 6 years ago
all the colors in properties
This seems like a dangerously vague generalization.
Also, is there any use-case other than invert
where you'd want to apply the same filter to all CSS painting, but not to embedded media?
This seems like a dangerously vague generalization.
Eh, I suspect it's okay to just literally state that every single <color>
in properties on the element gets the filter applied.
Also, is there any use-case other than invert where you'd want to apply the same filter to all CSS painting, but not to embedded media?
Yeah, this is my question too. A few other filters could make sense here, like sepia()
, but I'm not sure you'd want to sepia the <color>
s but not the images and emoji on the element.
One option might be to make sure that the color filters are available as modifiers within the color modification functions, whenever they are spec'd again.
An author could then integrate that with variables, for something like:
main {
color: filter-color(var(--text-color), var(--global-color-filter));
background: filter-color(var(--bg-color), var(--global-color-filter));
}
:root.dark {
--global-color-filter: invert(100%);
}
Much more verbose, but also much more flexible, so the effect can be targetted exactly as the author intends.
While I agree that filtering colors is probably something we want to do when we re-introduce the color modifier function, I think Dean's suggestion of something that can invert all the colors on an element is probably worthwhile to have on its own.
The Working Group just discussed color-filter
.
(a bit off topic) maybe alongside a feature like this, css could introduce an alternative syntax to chain/nest "function" calls
background-color: saturation(hue(brightness(red, 1.2), 12deg) 0.3); /* current */
background-color: red -> brightness(1.2) -> hue(+12deg) -> saturation(+0.3); /* oop */
background-color: brightness(red, 1.2) |> hue(_, +12deg) |> saturation(_, +0.3); /* pipe */
@Netmosfera Please open a separate issue for the syntax discussion. Let's keep the current discussion specific to the color-filter
proposal.
color-filter
is a new inherited property that modifies color values used when rendering. It's syntax is similar to thefilter
property, and defines a transform function that is applied to a color.Example:
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:
filter