Re: [css-masking] 'mask: none' clear all masking operations

On Jun 26, 2013, at 11:38 AM, Dirk Schulze <dschulze@adobe.com> wrote:

> 
> On Jun 26, 2013, at 10:56 AM, fantasai <fantasai.lists@inkedblade.net> wrote:
> 
>> On 06/25/2013 06:07 PM, Dirk Schulze wrote:
>>> 
>>> On Jun 25, 2013, at 4:33 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
>>> 
>>>> On 06/25/2013 04:20 PM, Dirk Schulze wrote:
>>>>> If fantasai is on the call tomorrow, I would like to discuss mask/mask-box-image
>>>>> shorthand and if/how it is possible to reset all masking operations with mask: none.
>>>> 
>>>> You make a shorthand tree like this:
>>>> 
>>>>  mask
>>>>   +-- mask-layers
>>>>   |    +--mask-layer-image
>>>>   |    +--mask-layer-position
>>>>   |    +--mask-layer-repeat
>>>>   |    etc.
>>>>   +-- mask-box
>>>>        +--mask-box-source
>>>>        +--mask-box-slice
>>>>        +--mask-box-repeat
>>>>        etc.
>>> 
>>> Right, I did not meant to question that it is possible. If we
>>> follow this proposal, I would suggest:
>>> - 'mask' shorthand can just reference an SVG Mask or disable
>>>  masking entirely. 'mask-layer' and 'mask-box' can just
>>> reference CSS Images. This would solve the SVG resource or
>>> CSS Image detection problem in a different way for masking.
>> 
>> Well, it's fairly uncommon to have a CSS shorthand that has
>> capabilities not expressed via its longhands. (We only have
>> one example I know of, the UI font keywords, and we're not
>> especially happy with those IIRC.)
> 
> That seems to be the case for border. Authors can not set border-image with border, but border still affects border-image. I suggested doing the same.
> 
>> 
>> It would be better if the SVG mask was handled either in 'mask-layers'
>> or as a 'mask-element' subproperty of 'mask' or something.
> 
> This would introduce another property but still lead to the same problem and solution as if SVG mask and CSS mask were combined. We discussed that in a different context before. So if mask could set SVG and CSS Mask, then it would do exactly the same as mask-layer. Quite confusing as well.

Thinking about your proposal more, I actually take my response back and claim the opposite :). What about the following structure:

 mask
  +-- mask-layers
  |    +--mask-layer-image
  |    +--mask-layer-position
  |    +--mask-layer-repeat
  |    etc.
  +-- mask-element
  +-- mask-box
       +--mask-box-source
       +--mask-box-slice
       +--mask-box-repeat
       etc.

mask-element: <url> [alpha | luminance]? | none

mask: <mask-element>

* mask-element is separated of mask-layers.
* mask-layer, mask-box just reference CSS Images
* mask shorthand overrides all properties of mask-layer, mask-element, mask-box
* mask syntax does the same as mask-element

Would that be reasonable?

Greetings,
Dirk


> 
>> 
>>> However, an uber-shorthand also has some drawbacks. It will
>>> be significant more difficult to understand how masking works.
>>> The author needs to know that 'mask' is a shorthand, which can
>>> not do everything that the longhand properties can do. (To be
>>> honest, I never thought about border as a shorthand for other
>>> shorthands but with limited control before you mentioned it.)
>>> The implementation and maintenance cost might increase as well.
>> 
>> This is actually a reasonably common pattern in CSS shorthands.
> 
> It is fairly uncommon to have a shorthand for shorthands. border is the only one I know (not saying that there might be more).
> 
> Greetings,
> Dirk
> 
>> 
>> ~fantasai
>> 
> 
>

Received on Wednesday, 26 June 2013 19:58:00 UTC