The two-value syntax of the CSS Display property (hacks.mozilla.org)

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.

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.

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.

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.

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!

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

Thanks much for digging that up