`<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
Two significant changes in how
1. The
2. You can now target the details contents using this new pseudo selector:
Here's a typical markup pattern I tend to work with:
I have a use case for setting the
When I do this, Chrome seems to ignore the
My solution:
Conditionally duplicate the grid-column property for browsers which have support for the new pseudo element selector:
I've put together a CodePen demo to show what I mean. Try previewing this in both Chrome 131 and Firefox; and toggle the
Context: https://developer.chrome.com/release-notes/131
Do you think this is intended behaviour or a bug?
<details><summary>Two significant changes in how
<details>1. The
<details>display:flexdisplay:grid2. You can now target the details contents using this new pseudo selector:
::details-contentHere's a typical markup pattern I tend to work with:
I have a use case for setting the
<details>contentsWhen I do this, Chrome seems to ignore the
display:contentsdisplay:blockMy solution:
Conditionally duplicate the grid-column property for browsers which have support for the new pseudo element selector:
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 {...Context: https://developer.chrome.com/release-notes/131
Do you think this is intended behaviour or a bug?
Chrome for Developers
CSS Highlight Inheritance is changing, more CSS styling for the details element, easier print layout with page margin boxes, and more.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
