Display: contents is kind of a strange property, even though it’s in display and it’s basically the most common CSS property, contents is a value that you don’t really use. But it has been supported by Firefox since 2016.

This article takes a closer look at this interesting attribute value.

Basic usage

According to the W3C 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).

The element that sets the value of this attribute will not itself produce any boxes, but its descendants will retain the normal display of their children.

Let’s look at a simple example. It has the following simple three-layer structure:

<div class="container">
    <div class="wrap">
        <div class="inner"></div>
    </div>
</div>
Copy the code

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;
}
Copy the code

The performance is as follows:

This makes perfect sense, but if we add display: contents to the mid-level container, see what happens:

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

As you can see, without the red border of the middle layer: 2px solid red, the entire.wrap div doesn’t seem to exist, but its children are rendered normally.

Importantly, the element itself with display: contents is not rendered, but its children are rendered normally.

I’ve been thinking about the perfect use point for this attribute.

In summary, this property applies to layout scenarios where elements that act as wrappers do nothing on their own and can be ignored.

Act as a semantically free wrap box

Recently, when writing React and Vue, I found that this property can be used very well in writing JSX, and it also fits the positioning of this property.

When we write React or RN, we often need to export a template.

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

We just wanted to output the contents of the.wrap div, but because the framework requires that the output JSX template must be enclosed within a parent element, we had to add a.wrap, which has no style of its own.

If the output element is to be placed under other display: flex, display: grid containers, add a layer of meaningless.wrap and the layout will need to be adjusted again.

One way is to use the framework-provided container < react. Fragment>, which does not insert any extra nodes into the page.

Similarly in Vue is the

This extra parent element isn’t really necessary. At this point, we can also add display: contents, like this:

return (
    <div class="wrap" style="display: contents">
        <h2>Title</h2>
        <div>.</div>
    </div>
)
Copy the code

In this way, it acts as a wrap, but in the actual rendering, the DIV doesn’t actually generate any boxes, killing two birds with one stone. And some flex layouts, grid layouts, are not affected.

Codepen Demo – display: contents | display: flex penetration effect

Make your code more semantic

Considering this very practical scenario, our pages are now full of clickable buttons, or clickable text that triggers a function. However, semantically, they should be a

Something like this, while fine, is relatively semantic:

<p class="button">
    Button
</p>
<p class="button">
    Click Me
</p>
Copy the code
.button {
    width: 120px;
    line-height: 64px;
    text-align: center;
    background-color: #ddd;
    border: 2px solid # 666;
}
Copy the code

There are many reasons why we don’t use 

<p class="button">
    <button style="display: contents">
        Button
    </button>
</p>
<p class="button">
    <button style="display: contents">
        Click Me
    </button>
</p>
Copy the code

will not affect the style, the button will not actually render the page structure, but the page structure semantics are much better.

CodePen Demo — Button with display: contents

For some students who are obsessed with page structure and semantics, flexible use of this attribute can solve a lot of problems.

There are some interesting phenomena in replacement elements and form elements

Display: Contents does not behave equally across all elements.

For replaceable elements and most form elements, using display: contents works like display: None.

That is, for some common replaceable elements, form elements:

  • <br>
  • <canvas>
  • <object>
  • <audio>
  • <iframe>
  • <img>
  • <video>
  • <frame>
  • <input>
  • <textarea>
  • <select>

Using display: contents is equivalent to using display: None, and the entire box and contents of the element are not drawn on the page.

<button>Some similarities and differences

Unlike other form elements, adding display: contents is normally hidden and not rendered. However, in practice, it is found that some of the inheritable styles of will be inherited from the content if the content is wrapped. The actual use of this process needs to pay attention to.

The effect on A11Y

There is some discussion in some foreign language documents about how the use of display: contents affects the accessibility of the page. For example, containers and lists with display: contents can have unexpected consequences for page accessibility.

  • [css-a11y][css-display] display: contents; strips semantic role from elements

I don’t think there is a clear conclusion to this, but if your page has high accessibility requirements, you need to pay attention to this property.

Similar properties in CSS that affect layout

CSS itself has been working on adding properties to give us more space and control over layout. All in all, it gives me the feeling that CSS is more like a complete project than just a presentation of styles.

Similar interesting properties:

  • CSS new feature contains, control page redraw and rearrangement

CAN I USE

Look at compatibility.

Not too bleak, but not universal either. Consider using it in some incremental enhancement scenarios.

reference

  • How display: contents; Works
  • CSS display: contents
  • Display: Contents Is Not a CSS Reset

The last

Well, the end of this article, I hope to help you 🙂

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

For more interesting CSS effects, come here for CSS Inspiration – find inspiration for writing CSS.

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.