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…
In Chrome, the User Agent style for <summary>isblock, 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:
At Marketing Solution Australia we strive to deliverer elegant responsive websites for your business integrated with our personal SEO Optimization package to bring your pages on the first page of Google.