What is the use and how to use the "display: contents" of CSS?

Question

What is the use and how to use the "display: contents" of CSS?

Navigation

#1 by (4 votes)

11

Recently I saw that there is a new type of display in CSS display: contents , but I did not understand its intention to use it? link

It seems to be just to remove the CSS from the container ... But is that what it's all about? Is it to remove the CSS from the parent?

Questions

Afterall,whatistheusageindicationforthisdisplay?
Andifthereisanycontraindicationwhatwoulditbe?

Examplecode:

.content {
  border: 2px solid #999;
  background-color: #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 400px;
/*   display: contents; */
}

.inner {
  border: 2px solid red;
  border-radius: 5px;
  padding: 10px;
}

<div class="content">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eligendi quia accusantium, placeat, blanditiis consequuntur voluptatum iusto amet voluptate cupiditate architecto porro sapiente, illum eaque commodi tempore facilis? Sunt, corrupti?</p>
  </div>
</div>

html html5 css css3 css-display

asked by anonymous 20.12.2018 / 13:55

1 answer

Selectize.js with Tags, reload key and value in edit form Pseudo elements :: after and :: before work in which input types

score 4 · Accepted Answer

In fact it does not delete the CSS from the container, it eliminates the container itself of the layout, leaving only child elements.

The property function is to visually change one or more elements by maintaining HTML semantics, usually when the parent element tag does not matter in that context, causing the child elements to become direct children of the grandfather (only visually):

<div> ← Avô
   <div> ← Pai
      <div></div> ← Neto
   </div>
</div>

When you add the property in the div-parent , the div-net visually becomes a "div parent" div-grandfather ), but I repeat, only visually in the layout. In the DOM, div-parent remains the div-parent . It would be as if you had commented on the tag (SERIA, but the tag is still active in the DOM):

<div> ← Avô
   <!-- <div style="display: contents"> ← Pai -->
      <div></div> ← Neto
   <!-- </div> -->
</div>

The usage statement will depend a lot on the layout you want to build and the semantics you want to keep.

A hypothetical example would be: I want to build a horizontal menu with the first two links being two <li> , but, for semantic reasons, these li 's must be within a <ul> tag. The display: contents makes it possible by "deleting" the ul tag (only visually) causing the li 's to behave as part of the menu grid as well as the other <a> links, but the list structure stays intact in DOM:

.content{
   display: flex;
   background-color: black;
}

.content > *, .content ul li, .content ul li a{
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 1;
}

.content > *{
   height: 50px;
   background-color: lightgreen;
   margin: 2px;
}

.content ul li{
   background-color: yellow;
   margin: 2px;
}

.content ul li a{
   width: 100%;
   height: 100%;
}

.content ul{ display: contents; }

<div class="content">
   <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
   </ul>
   <a href="#">Link 3</a>
   <a href="#">Link 4</a>
</div>

Otherwise this would not be possible, ie it would not be possible to use a <ul> list for this purpose. Here's what the menu would look like without display: contents in ul :

Seethatli'scannotintegrateintothemenugridbecausetheyaredaughtersoftheulelement,whichinturnisthechildofthe.contentelement.Thedisplay:contentsmakesvisibleonlyonthescreen,theli'sdirectdaughtersof.content,makingthempartofthemenugridtogetherwiththeothertwo<a>/p>

Areferencearticlethataddressesthesubjectinaveryobjectiveway:

link