Add CSS filter() function

[nt1m]

Fixes #3378

This has been supported since Safari 9, see https://caniuse.com/css-filter-function.

MDN docs or compat data are not currently available, but will be linked once they are.

[nt1m]

@captainbrosset @foolip Could you please take a look?

[captainbrosset]

compat data are not currently available, but will be linked once they are.

@nt1m do you know if there's already a PR opened on BCD to add the required keys for this feature? If there isn't one, would you or someone on your end be able to create one?
We can of course merge the new feature without BCD keys in the meantime, but if a BCD PR already exists (or is quick to create), it would be better to wait for it. This way, less risks of forgetting to update the feature once the keys are available.

[captainbrosset]

Suggested change

	description: The `filter()` CSS function applies one or more graphic effects to an CSS image and returns a new image. You can use filter functions, such as `blur()` and `drop-shadow()`, alone or combined to produce different effects.
	description: The `filter()` CSS function applies one or more graphic effects to a CSS image and returns a new image. You can use filter functions, such as `blur()` and `drop-shadow()`, alone or combined to produce different effects.

[captainbrosset]

The name and description fields are very similar to the ones in the filter.yml feature. It's good for consistency, but might be a bit confusing to web developers. I'm not sure I'd be able to really tell which feature does what if I didn't already know about them, just by reading these fields.

I think what's missing for me is an example of where you use each feature. So maybe:

• In filter.yml:

  The filter CSS property applies one or more graphic effects to an element. You can use functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For example: filter: blur(2px).

• In filter-function.yml:

  The filter() CSS function applies one or more graphic effects to a CSS image, such as a background image. You can use functions, such as blur() and drop-shadow(), alone or combined to produce different effects. For example: background: filter(url(image.png), blur(2px)).

[nt1m]

I created a BCD PR here: mdn/browser-compat-data#28916 . I was reluctant to create one until some MDN docs were written, but it looks like you can just create one independently!