Careful When Changing the Display of `summary`

Recently, a helpful bug report (thanks, Kilian!) highlighted an issue with the <details></details> element in one of my blog posts. The default ▶ icon wasn't displaying, making the element appear generic.

Debugging revealed the culprit: an outdated version of Normalize.css, which had inadvertently set summary { display: block; }. This caused Firefox to suppress the ▶ icon.

Back in 2016, Jon Neal addressed this in Normalize.css by changing the style to summary { display: list-item; }. Chrome's default user agent stylesheet already sets <summary></summary> to display: block, so this change doesn't affect it. However, Firefox's user agent stylesheet uses display: list-item, hence the fix in Normalize.css.

Firefox DevTools shows that the ▶ icon is applied via the ::marker pseudo-element. Removing the list-item display style removes the ::marker, as the specification states ::marker applies only to list items. Chrome's behavior of applying ::marker to block-level elements might be a bug, though the utility of ::marker beyond list items is appealing (as Šime Vidas noted).

Safari, interestingly, doesn't exhibit this problem, apparently rendering the ▶ icon from "Shadow Content."

The solution appears straightforward: either use the list-item display style as in Normalize.css, or avoid styling the <summary></summary> element altogether.

The above is the detailed content of Careful When Changing the Display of `summary`. For more information, please follow other related articles on the PHP Chinese website!