Concern about -webkit-mask

This thread was started on the private list, and accidentally had
technical discussion continue there.  Below I reproduce the entire
conversation, so it can continue here on the public list:

On Wed, Apr 11, 2012 at 1:00 AM, Daniel Glazman
<daniel.glazman@disruptive-innovations.com> wrote:
> Hi there,
>
> I was pinged by a french web designer who sees an increasing number of
> -webkit-mask properties [1] used in production sites. AFAIK, this has
> never been submitted to this WG and it seems we're going to be again
> in a trap, *again*, if this spreads too much in the wild. Maybe we need
> to do something about it in this WG?
>
> [1] http://www.webkit.org/blog/181/css-masks/


On Wed, Apr 11, 2012 at 7:44 AM, Vincent Hardy <vhardy@adobe.com> wrote:
> Hi Daniel, group,
>
> If we started an effort on this, I think we should do it in the FX task
> force to harmonize masking across SVG and CSS.


On Wed, Apr 11, 2012 at 8:04 AM, Dirk Schulze <dschulze@adobe.com> wrote:
> On Apr 11, 2012, at 7:46 AM, "Vincent Hardy" <vhardy@adobe.com> wrote:
>
> Hi Daniel, group,
>
> If we started an effort on this, I think we should do it in the FX task
> force to harmonize masking across SVG and CSS.
>
>
> I would like this approach. Sadly CSS masking is already very focused on
> images and tries to use the syntax of background as much as possible. That
> makes it hard to generalize it more. See safari blog
> post http://www.webkit.org/blog/181/css-masks/
>
> And like Daniel wrote, it is already widely used. A bit less popular but
> also in use is CSS
> reflection: http://www.webkit.org/blog/182/css-reflections/
>
> IIRC there is also a property for clipping with text. But can't find an
> example right now.


On Wed, Apr 11, 2012 at 8:08 AM, Arno Gourdol <agourdol@adobe.com> wrote:
> Hi Dirk,
>
> Perhaps you're thinking of
>
> -webkit-background-clip: text;


On Wed, Apr 11, 2012 at 8:17 AM, Dirk Schulze <dschulze@adobe.com> wrote:
> Actually I found all details on MDN (strange enough :P).
>
> On Apr 11, 2012, at 8:08 AM, Arno Gourdol wrote:
>
>> Hi Dirk,
>>
>> Perhaps you're thinking of
>>
>> -webkit-background-clip: text;
> That is one possibility, yes. I meant -webkit-mask-clip. See the MDN sites for more details:
>
> https://developer.mozilla.org/en/CSS/-webkit-mask-clip
> https://developer.mozilla.org/en/CSS/-webkit-mask-image


On Wed, Apr 11, 2012 at 8:20 AM, Vincent Hardy <vhardy@adobe.com> wrote:
> Hi Dirk,
>
> I think there is room to make things consistent or applicable across SVG and
> CSS. For example, the work Dean did on expressing filter shorthands as SVG
> <filter> elements is a good precedent of trying to harmonize, and so is the
> desire to get gradients working both ways (e.g., applying CSS gradients to
> SVG geometry). We could/should think if making CSS masking shorthands apply
> to SVG as well, for example. And we should consider having SVG masks apply
> to CSS content too.
>
> I am just requesting that we think about consistency as much as possible.


On Wed, Apr 11, 2012 at 8:33 AM, Edward O'Connor <eoconnor@apple.com> wrote:
> I will happily take an action item to submit masks to the WG. It's something I've been meaning to do, but other things on my plate have taken priority.


On Wed, Apr 11, 2012 at 8:36 AM, Daniel Glazman
<daniel.glazman@disruptive-innovations.com> wrote:
> Le 11/04/12 17:33, Edward O'Connor a écrit :
>> I will happily take an action item to submit masks to the WG. It's
>> something I've been meaning to do, but other things on my plate have taken
>> priority.
>
> Excellent. And Reflections ? I see also a lot of them in the wild.


On Wed, Apr 11, 2012 at 8:53 AM, Edward O'Connor <eoconnor@apple.com> wrote:
> Reflections too.


On Wed, Apr 11, 2012 at 9:59 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Apr 11, 2012, at 8:04 AM, Dirk Schulze wrote:
>
> I would like this approach. Sadly CSS masking is already very focused on
> images and tries to use the syntax of background as much as possible. That
> makes it hard to generalize it more. See safari blog
> post http://www.webkit.org/blog/181/css-masks/
>
>
> Rather than repeating all the features of backgrounds as separate
> properties, I'd rather see a single property that turned a background layer
> into a mask. So, for instance, the second "kate.png" example in the Surfin'
> Safari blog would look like this:
>
> <img src="kate.png" style="background-image: linear-gradient(90deg,
> rgba(0,0,0,1), rgba(0,0,0,0)); background-mask: all;">
>
> Or if it was a background-image, then there would be a keyword to mask
> layers above the mask layer:
>
> img.kate {
> background-image:
> url(kate.png),
> linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
> background-mask:
> none, /* kate.png doesn't mask anything */
> layers-above; /* gradient masks kate */
> }
>
> Then there could be another keyword to clear the mask from a current layer
> and those above it:
>
> img.kate {
> background-image:
> url(easter_egg.png),
> url(kate.png),
> linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
> background-mask:
> clear, /* easter_egg.png is not masked */
> none,
> layers-above;
> }


Continue as you were.

~TJ

Received on Wednesday, 11 April 2012 20:31:05 UTC