- From: Sebastian Zartner <sebastianzartner@gmail.com>
- Date: Thu, 4 Feb 2016 15:35:18 +0100
- To: public-fx@w3.org
- Message-ID: <CAERejNaHgXB9ka4x-YXoKTSOx50SuL8GJhRXKmt6NOtrVymqLA@mail.gmail.com>
The backdrop-filter CSS property allows to create a filtered backdrop for
an element[1] and the filter CSS property filters all parts of the drawing
of an element.
This implies a few things that are suboptimal:
- The Fullscreen API spec. already defines a ::backdrop pseudo-element[2],
which suggests that it and the backdrop-filter property belong together
somehow.
- A <filter> element reference is required to specify a different input for
the backdrop-filter property than the BackgroundImage.
- The two properties do not allow to specify where to place the filtered
output in regard of the painting order.
My suggestion to solve these issues is:
- Drop the backdrop-filter property in favor of allowing ::backdrop to be
used on all elements independently of the layer they are in.
- Introduce a filter-source property allowing to specify the sources for
filter primitives. This property refers to the in attribute of the <filter>
element and has therefore the following syntax:
filter-source: [ source-graphic | source-alpha | background |
background-alpha | fill-paint | stroke-paint | <filter-primitive-reference>
]#
- Introduce a filter-part property allowing to specify the parts of an
element, to which the filter is applied. Its syntax may be like this:
filter-part: [[ content || background || borders || outline ||
scroll-mechanism ] | all ]#
- Introduce a filter-output-layer property allowing to define where to
place the filtered output in relation to the painting order. The syntax for
it may be something like this:
filter-output-layer: [ background | below-border | border | below-outline
| outline | below-content | content | below-scroll-mechanism atop ]#
where all below-* values draw the filtered output below the named layer
but above the previous layer, while all other values draw the filtered
output as replacement of the named layer.
- Introduce a filter-effect property holding the values, which currently
apply to the filter property.
- Turn the filter property into a shorthand for the properties above, so it
may then have a syntax like this:
filter: <filter>#
where <filter> = <'filter-effect'> <'filter-source'>? <'filter-part'>?
<'filter-output-layer'>?
To achieve a backdrop effect as of backdrop-filter you would then write
e.g.:
::backdrop {
filter: blur(2px) brightness(20%) all atop;
}
To make the border of an element have a blue drop shadow you could write
something like this:
#element {
filter-effect: drop-shadow(2px 2px 3px blue);
filter-part: border;
filter-output-layer: below-border;
}
This is just a rough draft. I welcome every input on this.
Sebastian
[1] This should be clarified in an initial sentence.
[2] https://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element
Received on Thursday, 4 February 2016 14:36:05 UTC