Re: [csswg-drafts] [css-backgrounds-4] `background-filter` (#4706)

>  No one else has implemented it, to my knowledge, even behind a flag.

Not sure how we missed the `filter()` function - it looks very useful. It was quite easy for us to do as it turns out, at least for bitmap images - so now there are two implementations!

I agree `filter()` seems much more versatile - careful use with `border-image` could give you a drop-shadow on the border alone, which might be useful. You could also use it within an `image()` function specifyng multiple resolutions - for instance, applying a 10px blur at higher resolution, and 5px otherwise. You couldn't do this with `background-filter`.

(bit off topic, but this last one is quite interesting for us. All the CSS to print engines that I know of have a custom property allowing you to specify the resolution that the SVG filter is supposed to apply at: generating a filtered image at 96dpi isn't really an option for print. Combining `image()` and `filter()` would allow a standardised way to achieve the same results, at least in some cases)

On the other hand, `background-filter` would be applied after compositing multiple background layers into one before filtering, which isn't an option with the `filter()` method(*), so it's not a direct replacement.

* possible with an SVG filter containing multiple feImage primitives, but impractical.

@Crissov a full pseudo-layer for backgrounds is quite a bit more work, not least because you'd then be able to set properties on it - `z-index`, `border-radius`, `background`, `border` etc. - and each of these would need to be excluded or have their behaviour defined. Same for the `border` pseudo-element you mentioned on your wicg page, which is particularly problematic for tables. It's a very big hammer for a use case which, as Amelia points it, is largely wanting to blur or add opacity.


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

Received on Wednesday, 29 April 2020 10:54:22 UTC