RE: [css-break] display:contents and break-before/after

> >> If we want this behavior, it needs to be explicitly specified what happens.
> >> E.g. we could spec that the break gets propagated to its first child/last
> child.
> >
> > LGTM
> 
> Well, okay, but imho this isn't sufficiently useful to justify the implementation
> complexity. A box with 'display: contents'
> doesn't actually exit, so unless we define special behavior for it, no other
> properties can apply to it.

Well, it looks like in Firefox something along those lines applies already, and they are the only browser implementing the feature at this point, so it looks like this was the easiest way to go for them at least. 

To be honest, I would also like to allow a few other things to work (rendering properties that usually propagates effect to children), like opacity and transforms, but I could understand if people were not huge fan of the idea. Basically how it would work is that the value of the parent gets propagated into its children by simple multiplication. This would allow to create interesting effects currently impossible, like highlighting related elements once either of them is hovered.

    <grid>
        ...
        <hover-group display=contents>
            <item1 />
            <item 2/>
        </hover-group>
        ...
    </grid>

    hover-group { opacity: 0.75; }
    hover-group:hover { opacity: 1 } 
    // when either item1 or 2 is hovered, 
    // ... both stops being translucent

By the way, if anyone from Gecko is paying attention to this thread, I found a bug related to this. When you change the value of an inherited property applied to a display:contents box, it does not trigger a recalc on children (but inheritance works for any initial value, so it is just a cache invalidation issue).

Received on Tuesday, 1 March 2016 19:30:44 UTC