display: contents

A new display property value for letting your contents run free! 👟

Published in

codeburst

3 min readJan 22, 2018

Coming soon is a new display property value that could prove interesting to use. At the time of writing, it’s currently only supported in Firefox. You can see up to date browser support for display:contents here 👍

Can I use... Support tables for HTML5, CSS3, etc

Site update: HTTPS & new way to support caniuse

caniuse.com

What does it do?

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. — caniuse.com

I think that sums it up pretty well. It’s worth nothing that this also works for pseudo elements too.

Show me

Let’s start with a simple example using a flex layout.

We have a layout using flex-direction: row containing three items. It looks like this;

And here’s the code for it;

THE MARKUP
<div class=”container”>
  <div class=”item”>A</div>
  <div class=”item”>
    <div class=”sub-item”>B</div>
    <div class=”sub-item”>C</div>
  </div>
  <div class=”item”>D</div>
</div>THE CSS
.container {
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  background-color: #e74c3c;
  width: 300px;
  margin: 30px auto;
}
.item {
  height: 50px;
  background-color: #2eec71;
  display: flex;
  flex: 1;
  margin: 5px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}
.sub-item {
  background-color: #f9bf3b;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  border-radius: 10px;
}

The second item in the layout contains sub-items that have the class sub-item. We will change the display value of that second item to let the sub-items free.

The item we will change to `display:contents`

By changing the second item display value to display: contents, the two children(B and C) will be set free.

.item:nth-child(2) { display: contents; }

They become part of the layout defined by the container element.

That’s all there is to it. The sub items will keep their styling but become part of the parent layout flow.

Another example

I have put together another demo using display: contents which is a little more complicated but tried to work in an analogy to aid with understanding of display: contents.

The analogy revolves around letting dogs 🐶 out of the kennel and into the yard.

yard   = containing layout
kennel = an item within that containing layout
dogs   = sub items within the kennel

By setting display: contents on the kennel, we release the dogs into the yard 🎉

Try it out for yourself

Sometimes, the best way is to experiment with properties yourself. Trialling CSS properties is pretty simple using the element inspector 👍

Open a supporting browser and visit some of your favorite sites. Change the display value to some of the major elements in the layout and see what happens 🧐

Where would I use this?

As it’s not supported in all browsers at the time of writing, it’s hard to envision all appropriate scenarios. A popular use case will be where we have elements whose wrapper element is for semantic value. In these scenarios, the wrapper element provides no styling benefit. It’s purpose is to keep our markup semantic.

That’s it!

A new display value that will set your contents free!

As always, any questions or suggestions, please feel free to leave a response or tweet me 🐦!