Re: Concern about -webkit-mask

alpha masking is a shorthand to the Porter-Duff 'in' compositing mode.
The spec for 'mask-image' could be very simple and refer to the compositing
spec for details.

Rik

On Wed, Apr 11, 2012 at 1:30 PM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> 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
>
>