CSS show contents

The issue

When constructing a format in CSS, we apply a format module like flexbox or grid to the container aspect, and its youngsters will get affected. That’s the way it works usually.

Say that a type of youngster objects can be a container with a number of objects with their format system. Sooner or later, we would want the kids of this youngster aspect to hitch their siblings within the higher container.

Let’s take an instance to see how show: content material works.

Instance 1

On this instance, I’ve a web page header with a title and outline.

<div class="page-header">
  <h1>Current articles</h1>
  <p>A take a look at my latest articles about CSS</p>
</div>

Once I change the show to contents for the guardian aspect, the field aspect of the .page-header will likely be eliminated.

.page-header {
  show: contents;
}

When making use of the above, the div isn’t there in any respect.

<h1>Current articles</h1>
<p>A take a look at my latest articles about CSS</p>

Play with the next demo and activate the checkbox. Discover how the background, border, and padding are gone.

Fascinating, proper?

You is perhaps questioning, why that is even helpful. Nicely, that’s why I wrote this text. Let’s lengthen the earlier instance to showcase why show: contents is beneficial.

Instance 2

Within the following instance, we now have a web page header that accommodates a title and a hyperlink, then we now have an outline textual content beneath.

Right here is the HTML markup:

<div class="page-header">
  <div class="page-header-row">
    <h2>Current articles</h2>
    <a class="hyperlink" href="#">View all</a>
  </div>
  <p>A take a look at my latest articles about CSS</p>
</div>

.page-header-row {
  show: flex;
  justify-content: space-between;
}

Let’s suppose that we need to transfer the hyperlink to be immediately beneath the outline so the visible order within the UI will likely be like this:

• Title
• Description textual content
• Hyperlink

One thing like this:

One thought is to make use of place: absolute. The default design will likely be that each one parts are stacked. Nonetheless, this isn’t a scalable resolution.

.hyperlink {
  place: aboslute;
  proper: 0;
  prime: 0;
}

Enter show: contents, it might probably clear up the difficulty completely. What we have to do is so as to add show: contents to the principle aspect that accommodates the title and hyperlink.

Attempt the demo under and activate the toggle.

<div class="page-header">
  <div class="page-header-row">
    <h2>Current articles</h2>
    <a class="hyperlink" href="#">View all</a>
  </div>
  <p>A take a look at my latest articles about CSS</p>
</div>

.page-header-row {
  show: flex;
}
.hyperlink {
  order: 2;
}  

We have now flattened the format. Now the title and hyperlink belong to the .page-header. Right here is the CSS:

.page-header {
  show: flex;
  flex-direction: column;
  hole: 0.5rem;
}

We are able to use order to put the hyperlink on the very finish.

.hyperlink {
  order: 2;
}

Pondering of contents as ungrouping of parts

Attempt to right-click on the web page header. That is what appears like to make use of show: contents.

Did you discover how the title and hyperlink at the moment are ungrouped and never a part of the field anymore? That is like offering us with a device to do stuff we couldn’t do earlier than whereas utilizing CSS grid or flexbox.

Use circumstances for show contents

Styling generated HTML

In markdown, for instance, if you add a picture, the generated HTML seems like this:

<p><img src="picture.jpg" alt="" /></p>

This may trigger a problem if you wish to model the <p>, like giving it a most width.

.content material p {
  max-width: 60ch;
}

See the next instance.

Seen how the picture is as equal because the paragraph? We are able to repair that!

<div class="content material">
  <p>
    <img src="picture.jpg" alt="" />
  </p>
</div>

.content material p:has(img) {
}

By utilizing CSS :has(), I checked if there may be a picture inside a <p> after which used show: contents to repair that.

.content material p:has(img) {
  show: contents;
}

Carried out.

Take away a container

In a header format, we would have to comprise the header in a fixed-width container. Within the following HTML, the header’s content material is in a container.

<div class="site-header">
  <div class="container">
    <h1 class="brand">Publish title</h1>
    <div class="nav"></div>
  </div>
</div>

To model the header format, we should always give the types to the .container aspect.

.container {
  max-width: 1100px;
  margin-inline: auto;
}

.site-header .container {
  show: flex;
  justify-content: space-between;
}

What if we need to ignore the .container with out altering the HTML? Nicely, that’s the place show: contents is useful.

We are able to take away the container like so:

.site-header .container {
  show: contents;
}

Then transfer the format for the .site-header aspect.

See the next interactive demo and spot how the HTML and CSS change when show: contents is energetic.

<div class="site-header">
  <div class="container">
    <h1 class="brand">Publish title</h1>
    <div class="nav">
    </div>
  </div>
</div>

.site-header .container {
  show: flex;
  justify-content: space-between;
}
.site-header {
}

On this instance, we now have an internet site header that accommodates:

• a brand,
• search,
• and navigation.

Each the emblem and search are grouped in a container.

Check out the HTML markup:

<header>
  <div class="header">
    
    <div class="logo-search">
      <a href="#" class="brand">iShadeed</a>
      <type motion="#" class="search"></type>
    </div>

    
    <nav class="nav"></nav>
  </div>
</header>

Sooner or later, we determined to reposition the search and heart it. What are the choices we now have with out show: contents?

.logo-search {
  flex: 1;
  show: flex;
  padding-right: 2rem;
}

.search {
  margin-left: auto;
}

Right here is the consequence. Whereas it seems “fantastic” at first look, this could fail shortly. For instance, if we enhance the variety of navigation objects, it will likely be off-centered.

See the demo under and attempt to add or take away navigation objects. Discover the way it seems off-centered.

We are able to clear up this by ungrouping the emblem and search wrapper with show: contents.

.header {
  show: flex;
}

.brand,
.search,
.menu {
  flex: 1;
}

.logo-search {
  show: contents;
}

With that, the search now belongs to the header grid format and it’s centered. Attempt to add or take away navigation objects.

We are able to even reposition the search to be on the fitting aspect. Once more, it now belongs to the header grid.

.search {
  order: 2;
}

It’s helpful, isn’t it?

A grid of photographs

On this instance, we now have a format that consists of a determine with a gaggle of photographs and a caption. I’m utilizing the <determine> aspect, see the next markup.

<determine>
  <div class="photo-group">
    <img src="thumb-1.jpg" alt="Thumbnail 1" />
    <img src="thumb-2.jpg" alt="Thumbnail 2" />
    <img src="thumb-3.jpg" alt="Thumbnail 3" />
  </div>
  <figcaption>On the summit...</figcaption>
</determine>

Right here is how the format seems.

At a sure viewport measurement, say that we need to obtain the next format. How can we try this?

With the present HTML construction, it’s not doable to let the <figcaption> be a part of the grid. Because of show: contents, we are able to ungroup the .photo-group aspect and make it work.

.photo-group {
  show: contents;
}

Now the HTML seems like this to the browser:

<determine>
  
  <img src="thumb-1.jpg" alt="Thumbnail 1" />
  <img src="thumb-2.jpg" alt="Thumbnail 2" />
  <img src="thumb-3.jpg" alt="Thumbnail 3" />
  
  <figcaption>On the summit.</figcaption>
</determine>

We are able to then apply the brand new format to the <determine> aspect.

determine {
  show: grid;
  grid-template-columns: 1fr 1fr;
  hole: 0.5rem;
}

Play with the demo under and toggle the show: contents checkbox. Maintain your eye on the HTML and CSS and spot how they alter accordingly.

<determine>
  <div class="photo-group">
    <img src="thumb-1.jpg" alt="Thumbnail 1">
    <img src="thumb-2.jpg" alt="Thumbnail 2">
    <img src="thumb-3.jpg" alt="Thumbnail 3">
  </div>
  <figcaption>Caption textual content goes right here.</figcaption>
</determine>

.photo-group {
  show: flex;
}

That’s it.

Alternating columns

I just lately labored on a format just like this for a shopper undertaking. At first look, I assumed it was a superb candidate to make use of with CSS grid.

Check out the HTML.

<part>
  <header>
    <h2>Why us?</h2>
  </header>
  <div class="options">
    <div class="features__item">
      <span class="icon"></span>
      <h3 class="title"></h3>
      <p class="desc"></p>
    </div>
    
  </div>
</part>

At first, I attempted the next resolution. The thought is to maneuver the objects on the fitting aspect down by 40px for every.

.options {
  show: grid;
  grid-template-columns: 1fr 1fr;
  hole: 1rem;
}

.features__item:nth-child(2n) {
  remodel: translateY(40px);
}

Whereas this visually works, it might probably shortly fail if the content material adjustments. On this variation, I made the content material longer.

Discover how the grid objects are stretched. It is a default conduct of CSS grid. I thought of altering the align-items for the principle format, nevertheless it didn’t work.

It’s not working. I thought of dividing the objects into two teams, and later utilizing show: contents to deal with the format.

<part>
  <header>
    <h2>Why us?</h2>
  </header>
  <div class="options">
    <div class="features__group"></div>
    <div class="features__group"></div>
  </div>
</part>

Attempt to enhance the slider under, the objects will nonetheless be vertically centered.

On small sizes, we are able to merely ungroup the objects and convert them to a standard grid.

.options {
  show: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  hole: 1rem;
}

.features__group {
  show: contents;
}

Attempt to resize the container under and spot how the objects will ungroup at small sizes, due to show: contents.

Quote

On this instance, we now have two separate layouts. Certainly one of a quote and the opposite accommodates a number of options for a advertising web site.

On small sizes, we need to reposition the quote and embody it between the options.

Let’s learn to try this. Right here is the HTML markup:

<part class="format">
  <div class="quote"></div>
  <div class="features-list">
    
  </div>
</part>

First, we have to ungroup the options checklist by default.

.features-list {
  show: contents;
}

.format {
  show: grid;
  grid-template-columns: 1fr;
  hole: 1rem;
}

.features-item:nth-child(2) {
  order: -1;
}

Then, on bigger viewport sizes, we group them once more and alter the principle format.

@media (min-width: 700px) {
  .format {
    grid-template-columns: 1fr 1fr;
  }

  .features-list {
    show: flex;
    flex-direction: column;
    hole: 0.5rem;
  }

  .features-item:nth-child(2) {
    order: preliminary;
  }
}

On this instance, we now have a footer format. For design functions, two of the columns are in the identical group. Meaning they aren’t under the principle grid.

See the next demo and attempt to resize the format. Do you discover that the group seems odd in small sizes?

Right here is the CSS:

.footer {
  show: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  hole: 1rem;
}

What I need to do is to ungroup the aspect that accommodates the 2 footer objects and let the objects belong to the principle grid. I need that to occur on:

• bigger sizes (when there may be more room)
• smaller sizes (when there may be much less house)

All we have to do is that this:

@container footer (min-width: 700px) {
  .footer-group {
    show: contents;
  }
}

Toggle show: contents and see it in motion.

It is a comparable instance to the above nevertheless it’s a bit extra advanced. On this format, we now have the next key objects to notice:

• The primary footer format
• Footer row
• Footer group

See the next determine that maps the footer’s format:

What we need to obtain is to maneuver the final footer row into the grid, and likewise to ungroup the present “Footer group” aspect.

Here’s a visible that reveals what we have to obtain:

To realize that, we might want to use show: contents a number of occasions. Right here is the default styling:

.footer {
  show: grid;
  grid-template-columns: 1fr;
  hole: 2rem;
}

.footer-row {
  show: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  hole: 1rem;
}

To realize the format, we have to apply the next CSS:

@container footer (min-width: 1200px) {
  .footer-row.prime,
  .footer-group {
    show: contents;
  }

  
  .footer {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
}

Here’s a demo that reveals in motion. Attempt to hover over the legends to see every merchandise.

Subgrid various

CSS subgrid turned steady in all browsers in Sep 2023, and I wrote about it two years in the past. We are able to use show: contents to imitate CSS subgrid.

See the next instance the place we now have a put up format that accommodates:

• a title,
• and put up content material

Right here is the HTML markup:

<div class="web page">
  <h1>Publish title</h1>
  <div class="prose">
    
    <img src="thumb.jpg" alt="" />
  </div>
</div>

What I need to do is to make the picture escape of its container. One thing like the next instance:

First, right here is the principle format grid:

.web page {
  show: grid;
  grid-template-columns: 1fr 50ch 1fr;
  hole: 1rem;
}

Utilizing CSS subgrid will appear to be this:

.prose {
  
  grid-column: 1 / -1;
  show: grid;
  
  grid-template-columns: subgrid;
  hole: 1rem;

  
  > * {
    grid-column: 2 / 3;
  }

  
  img {
    grid-column: 1 / -1;
  }
}

Whereas that works, you may not be capable to use subgrid. We are able to use show: contents as an alternative. The next CSS, it’s just like the earlier one however with none new grid definition.

.prose {
  show: contents;

  > * {
    grid-column: 2 / 3;
  }

  img {
    grid-column: 1 / -1;
  }
}

It’s fascinating, proper? Under is the show: contents model.

A observe on accessbility

CSS show: contents is understood to trigger accessbility points when used with HTML tables, headings, buttons, and lists. Please make certain to keep away from utilizing it on such parts. Listed here are some additional sources:

Outro

That’s it. CSS show: contents is a helpful function if you don’t have management over some components of the HTML and may make you obtain issues that aren’t doable with out markup change. That’s being mentioned, it’s necessary to just remember to take a look at for accessbility when utilizing it with HTML parts like <nav>, for instance.