On 02/02/2015 07:27 PM, 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!
I wasn't involved in the discussions either so I don't know what use
cases the CSSWG has, so I'll just describe how it works technically
and give some examples what you could use it for.
With display:contents you can have DOM elements for styling or scripting
reasons but in terms of layout behave as if they're not there. In Grid
and Flexbox layout for example, if you wrap some children in an element
it will affect layout since the wrapper becomes a grid/flex item.
Styling it with display:contents undoes that so that the wrapped children
are again the grid/flex items, but they now inherit style from the
wrapper. I imagine it might be useful also in Web Components (styling
the shadow host and/or the shadow DOM elements with display:contents).
Here's a rather academic example just to illustrate:
<style>
tr {display:contents}
</style>
<table>
<tr><td>1<td>2
<tr><td>3<td>4
</table>
The above table will have one row with four cells in layout. In terms
of CSS box construction it's identical to:
<table>
<td>1<td>2
<td>3<td>4
</table>
If you replace the style rule with "td {display:contents}" you'd get two
rows with one cell each ("12" and "34"). With "tr,td {display:contents}"
you'd get one row with one cell.
display:contents can be nested of course, so you can "bubble up" CSS
boxes from arbitrary DOM depths. It allows you to break out of the
(mostly) one-to-one mapping between DOM nodes and CSS boxes.
It's a rather powerful feature and I think it remains to be seen how
web developers will make use of it.
The initial motivation for implementing display:contents in Gecko though
was to support implementing 'overflow:fragments' where we'd like to have
multiple (sibling) boxes for an element, where each can be styled
independently through a pseudo-element:
http://dev.w3.org/csswg/css-overflow-3/#fragment-overflow
/Mats
_______________________________________________
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform
