4 ms·

Interesting, wasn't aware of this. I'm just thinking about it though and I think I'm missing the usecase. If it ignores the parent element for styling, why not

Interesting, wasn't aware of this. I'm just thinking about it though and I think I'm missing the usecase. If it ignores the parent element for styling, why not just not have the parent element at all? Or is this for situations where you don't have control over the markup but you do over the CSS?

paulddraper 7y ago
1. Some frameworks (Angular, old React) require a "component" to be have host element. 2. It can sometimes be helpful to group/ungroup elements for responsive layouts. 3. It can be difficult to create semantic HTML (if you care about that sort of thing), because the structure in fact places a huge role in the display.
silvestrov 7y ago
I have a case where the desktop and mobile layouts are very different: having a few container boxes makes desktop version easy (a couple of vertical flex boxes with content) but on mobile everything is flattened into a single box, and everything has a different sorting order than on desktop. display-contents makes this simple. The Javascript workaround for MSIE11 is not so nice.
daxterspeed 7y ago
Semantic HTML sometimes creates layers of nesting that make it impossible to achieve certain css effects without either breaking the semantic markup or adding a lot of "pointless" divs. In an ideal world HTML would be exclusively semantic content (eg, no div elements) and CSS would be exclusively styling (eg, no contents: property). display: contents; does allow us to get a little closer to that ideal.
jcampbell1 7y ago
IMO, it doesn't really do much useful. Imagine you have a grid of titles which may take 1-3 lines and photos beneath the title, and you want to align it to a grid... to make it work, it needs to be <div display="grid"> <h2>one line</h2><img /> <h2>text that spans two lines</h2><img /> </div> With this it could be: <div display="grid"> <Card style="display:contents"><h2>1 line</h2><img /></Card> <Card style="display:contents"><h2>text that spans two lines</h2><img /></Card> </div> But the rub is that you can't both make the "Card" look like a card, and make all the h2's also be the same (minimal) height.
mstade 7y ago
For example, let's say you want to create a DOM structure which groups together other elements in an outline like structure, so this: <h1>Hi world!</h1> <p>Lorem ipsum...</p> <h2>Hi world!</h2> <p>Lorem ipsum...</p> <h1>Hi world!</h1> <p>Lorem ipsum...</p> Becomes this: <div class="h-group h1-group"> <h1>Hi world!</h1> <p>Lorem ipsum...</p> <div class="h-group h2-group"> <h2>Hi world!</h2> <p>Lorem ipsum...</p> </div> </div> <div class="h-group h1-group"> <h1>Hi world!</h1> <p>Lorem ipsum...</p> </div> Now you can easily select any h2-level group (heading and elements "belonging" to that heading) by just using the `.h2-group` selector. To my knowledge, there is no way to do this with css selectors alone, so you need the divs, or some other element for grouping. But layout might be getting screwed up because of those divs, so add `.h-group { display: contents; }` and it's like those divs were never there to begin with. Problem solved!
- IfOnlyYouKnew 7y ago
  This should be accomplished with the more semantic sectioning tags, i. e. <article> and <section>. It's possible that there are other examples where this isn't possible, but I can't think of any right now. Tags can also be nested, and levels can be selected using CSS dsecendant and child combinators. (This obviously wouldn't change OP's point)
  - mstade 7y ago
    Ironically, I actually used section tags in my original snippets but changed to divs before posting simply because I didn't want the discussion to turn into this-vs-that. :o) In any case, the point of course is that at times these groups are added to create a kinship between elements that is otherwise not possible to express via css selections, or because it just makes manipulation easier, and you don't want these grouping elements to participate in layout but the children should. In those cases, `display: contents` is the knight in shining armor.
- recursive 7y ago
  `h2, h2 ~ p` ought to do it.
nicoburns 7y ago
It's super-useful for conditionally ignoring a parent element using media queries.

paulddraper 7y ago

1. Some frameworks (Angular, old React) require a "component" to be have host element. 2. It can sometimes be helpful to group/ungroup elements for responsive layouts. 3. It can be difficult to create semantic HTML (if you care about that sort of thing), because the structure in fact places a huge role in the display.

silvestrov 7y ago

I have a case where the desktop and mobile layouts are very different: having a few container boxes makes desktop version easy (a couple of vertical flex boxes with content) but on mobile everything is flattened into a single box, and everything has a different sorting order than on desktop. display-contents makes this simple. The Javascript workaround for MSIE11 is not so nice.

daxterspeed 7y ago

Semantic HTML sometimes creates layers of nesting that make it impossible to achieve certain css effects without either breaking the semantic markup or adding a lot of "pointless" divs. In an ideal world HTML would be exclusively semantic content (eg, no div elements) and CSS would be exclusively styling (eg, no contents: property). display: contents; does allow us to get a little closer to that ideal.

jcampbell1 7y ago

IMO, it doesn't really do much useful. Imagine you have a grid of titles which may take 1-3 lines and photos beneath the title, and you want to align it to a grid... to make it work, it needs to be <div display="grid"> <h2>one line</h2><img /> <h2>text that spans two lines</h2><img /> </div> With this it could be: <div display="grid"> <Card style="display:contents"><h2>1 line</h2><img /></Card> <Card style="display:contents"><h2>text that spans two lines</h2><img /></Card> </div> But the rub is that you can't both make the "Card" look like a card, and make all the h2's also be the same (minimal) height.

mstade 7y ago

For example, let's say you want to create a DOM structure which groups together other elements in an outline like structure, so this: <h1>Hi world!</h1> <p>Lorem ipsum...</p> <h2>Hi world!</h2> <p>Lorem ipsum...</p> <h1>Hi world!</h1> <p>Lorem ipsum...</p> Becomes this: <div class="h-group h1-group"> <h1>Hi world!</h1> <p>Lorem ipsum...</p> <div class="h-group h2-group"> <h2>Hi world!</h2> <p>Lorem ipsum...</p> </div> </div> <div class="h-group h1-group"> <h1>Hi world!</h1> <p>Lorem ipsum...</p> </div> Now you can easily select any h2-level group (heading and elements "belonging" to that heading) by just using the `.h2-group` selector. To my knowledge, there is no way to do this with css selectors alone, so you need the divs, or some other element for grouping. But layout might be getting screwed up because of those divs, so add `.h-group { display: contents; }` and it's like those divs were never there to begin with. Problem solved!

IfOnlyYouKnew 7y ago
This should be accomplished with the more semantic sectioning tags, i. e. <article> and <section>. It's possible that there are other examples where this isn't possible, but I can't think of any right now. Tags can also be nested, and levels can be selected using CSS dsecendant and child combinators. (This obviously wouldn't change OP's point)
- mstade 7y ago
  Ironically, I actually used section tags in my original snippets but changed to divs before posting simply because I didn't want the discussion to turn into this-vs-that. :o) In any case, the point of course is that at times these groups are added to create a kinship between elements that is otherwise not possible to express via css selections, or because it just makes manipulation easier, and you don't want these grouping elements to participate in layout but the children should. In those cases, `display: contents` is the knight in shining armor.
recursive 7y ago
`h2, h2 ~ p` ought to do it.

nicoburns 7y ago

It's super-useful for conditionally ignoring a parent element using media queries.