How to use CSS display: contents?

display: contents is a relatively unfamiliar property. Although display is basically the most common CSS property, the value of contents is rarely used. But it has been supported by Firefox since 2016.

This article will take a closer look at this interesting attribute value.

Basic usage

According to W3C’s definition of display: contents.

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element's children as normal) .

A simple translation means that the element itself with this attribute value set will not generate any boxes, but it will retain the normal display of its descendant elements.

Look at a simple example. There is a simple three-layer structure as follows:

<div class="container">
    <div class="wrap">
        <div class="inner"></div>
    </div>
</div>

The simple CSS is as follows:

.container {
    width: 200px;
    height: 200px;
    background: #bbb;
}
.wrap {
    border: 2px solid red;
    padding: 20px;
    box-sizing: border-box;
}
.inner {
    border: 2px solid green;
    padding: 20px;
    box-sizing: border-box;
}

The performance is as follows:

##This is very easy to understand, but If we add display: contents to the container of the middle layer, and look at the effect:

<div class="container">
    <div class="wrap" style="display: contents">
        <div class="inner"></div>
    </div>
</div>

You can see that there is no border of the middle layer: 2px solid red With the red border, the entire .wrap div seems to not exist, but its child elements are rendered normally.

The important point is that the element itself with display: contents set will not be rendered, but its child elements can be rendered normally.

I have been thinking about what is a very suitable use point for this attribute.

In summary, this attribute is suitable for some layout scenarios that act as wrappers. These elements themselves have no effect and can be ignored.

Acts as a semantic-less wrapping box

When I was writing React and Vue recently, I found that this attribute can play a very good role when writing JSX, and it is also very useful. In line with the positioning of this attribute itself.

When we write React and RN, we often need to output a template.

return (
    <div class="wrap">
        <h2>Title</h2>
        <div>...</div>
    </div>
)

We just want to output the content within the .wrap div, but due to framework requirements, the output JSX template must be included under a parent element, so as a last resort, we need to add a .wrap for wrapping, but this. wrap itself has no style.

If the output elements are to be placed under other display: flex, display: grid containers, after adding a layer of meaningless .wrap, the entire layout needs to be readjusted, which is troublesome.

One way is to use the container provided by the framework, which does not insert any extra nodes into the page.

The similar thing in Vue is the