On Mon, Feb 2, 2015 at 1:33 PM, L. David Baron <dba...@dbaron.org> wrote: > On Monday 2015-02-02 11:27 -0800, paul.ir...@gmail.com wrote: >> Hey Mats, the use cases are not obvious to me, but I didn't follow the >> original www-style threads on this so I'm lacking context. (A the spec >> doesn't help either) >> >> Can you help explain why a developer would use `display:contents`? >> >> I think it'd help to have it described a bit. Thanks! > > The key use case is being able to work with CSS layout systems that > aren't transparent to extra elements in the markup (as block and > inline layout mostly are) without being forced to remove elements > from the markup. This is important with systems like flexbox and > (particularly) grid. > > So it's not about being able to do things that you can't otherwise > do. All the things that are doable with display:contents could be > done before. > > It's just about being able to do those things without deleting > "extra" elements from the markup in order to make the tree conform > to what the CSS layout model expects. Since what it does is > essentially delete an element from the tree as far as CSS is > concerned, while leaving its children; that is, you stop displaying > the element but still display its contents. Put another way, it's > half of display:none without the other half (where display:none is, > likewise, a feature that doesn't add any capabilities not present in > other ways).
Another instance where this becomes useful is for WebComponents. It's easy to create a WebComponent which renders as a single row in a table. Just make your element be styled as "display: table-row". Then make the component's shadow content be styled as "display: table-cell". However if you want your component to render as two rows, you are out of luck. So if you want your component to render as one row which contains a headline, and one row that contains a data entry, then you're stuck. Or one row that contains a group headline and a second row which contains headlines for each table column. But with this feature you can make your component use "display: contents" and then make the shadow content render two rows with the appropriate cells. The lack of "display: contents" here doesn't just require that you insert extra elements in the DOM. It requires dramatically changing the API for your webcomponent. / Jonas _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
