I got a very helpful bug report the other day (thanks Kilian!) about the <details>
element in a blog post of mine not showing the default ▶ icon, and thus looking rather like any ol’ random <p>
.

It wasn’t terribly hard to diagnose. I just opened the page in Firefox, inspected the element in Firefox DevTools, and played with properties and values until I saw the ▶ come back. The problem? I was using a (very old) copy of Normalize.css, which must have followed me through several redesigns on this site, and set…
summary {
display: block; /* the problem */
}
If you do that, Firefox nukes the ▶:
Careful not to `display: block` your <summary> elements, lest lose the ▶ in Firefox. My old copy of Normalize.css had that in there. pic.twitter.com/06KHY892dT
— Chris Coyier (@chriscoyier) January 6, 2021
Way back in 2016, this was fixed by Jon Neal in Normalize:
summary {
display: list-item;
}
In Chrome, the User Agent style for <summary>
is block
, so no problem with setting it to block
. But in Firefox, best I can tell, the User Agent style is list-item
.

Hence Jon setting it to list-item
in the current version of Normalize.
You can also see in the Firefox DevTools that the ▶ is applied with a ::marker
pseudo element. As soon as <summary>
isn’t a list-item
anymore, the ::marker
disappears. I guess that makes some sense, as the spec says:
The ::marker pseudo-element represents the automatically generated marker box of a list item.
So the fact that ::marker
works on block-level items in Chrome might be the bug? I dunno, but I kinda like having ::marker
work on other things. As Šime Vidas once pointed out, it’s rather nice.
In Safari, there is no problem, as apparently the ▶ comes from “Shadow Content”???

Anyway, the Normalize idea of just forcing them to be list-item
seems fine (or just don’t touch them at all).
The post Careful When Changing the Display of `summary` appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
About us and this blog
We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.
Request a free quote
We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.
Subscribe to our newsletter!
More from our blog
See all postsRecent Posts
- How to Create Beautiful Coming Soon Pages in WordPress with SeedProd February 27, 2021
- Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw February 27, 2021
- A definitive guide to streams February 27, 2021