Kevin Powell - Community•5w ago

`<details>` element with `display:contents` broken in Chrome 131?

I've been playing around with Chrome 131's latest release and noticed some interesting changes with <details> and <summary> elements. I wanted to share my findings and see if anyone else has encountered similar behaviour. Two significant changes in how <details> elements work: 1. The <details> element can now accept display:flex and display:grid properties. 2. You can now target the details contents using this new pseudo selector: ::details-content. No more wrapper divs needed. Here's a typical markup pattern I tend to work with:

<details open>
    <summary>Hello World</summary>
    <div class="details-content">
        <p>...</p>
    </div>
</details>

<details open>
    <summary>Hello World</summary>
    <div class="details-content">
        <p>...</p>
    </div>
</details>

I have a use case for setting the <details> element display property to contents so that I can lay out a group of details elements into a sort of responsive tabbable UI. When I do this, Chrome seems to ignore the display:contents property entirely. As far as the dev tools are concerned, it's applied correctly, but just ignores it and resolves to the browser's display:block behaviour; and reports it as such too. My solution: Conditionally duplicate the grid-column property for browsers which have support for the new pseudo element selector:

details {
  > .details-content {
      margin-block-start: 1rem;
      grid-row: 2; 
      grid-column: 1 / -1;
  }
  
  @supports selector(::details-content) {
    &::details-content {
      grid-column: 1 / -1;
    }
  }
}

details {
  > .details-content {
      margin-block-start: 1rem;
      grid-row: 2; 
      grid-column: 1 / -1;
  }
  
  @supports selector(::details-content) {
    &::details-content {
      grid-column: 1 / -1;
    }
  }
}

I've put together a CodePen demo to show what I mean. Try previewing this in both Chrome 131 and Firefox; and toggle the &::details-content {... fix: https://codepen.io/marknotton/pen/RwXXodo?editors=1100 Context: https://developer.chrome.com/release-notes/131 Do you think this is intended behaviour or a bug?

Chrome for Developers

Chrome 131 | Release notes | Chrome for Developers

CSS Highlight Inheritance is changing, more CSS styling for the details element, easier print layout with page margin boxes, and more.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

`<details>` element with `display:contents` broken in Chrome 131?