{"id":332415,"date":"2021-01-11T16:18:11","date_gmt":"2021-01-12T00:18:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=332415"},"modified":"2021-01-11T17:18:52","modified_gmt":"2021-01-12T01:18:52","slug":"careful-when-changing-the-display-of-summary","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/careful-when-changing-the-display-of-summary\/","title":{"rendered":"Careful When Changing the Display of `summary`"},"content":{"rendered":"\n<p>I got a very helpful bug report the other day (thanks <a href=\"https:\/\/twitter.com\/kilianvalkhof\" rel=\"noopener\">Kilian<\/a>!) about the <code>&lt;details&gt;<\/code> element in <a href=\"https:\/\/css-tricks.com\/thank-you-2020-edition\/\">a blog post<\/a> of mine not showing the default &#x25b6; icon, and thus looking rather like any ol&#8217; random <code>&lt;p&gt;<\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"398\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?resize=1200%2C398&#038;ssl=1\" alt=\"\" class=\"wp-image-332416\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?resize=300%2C100&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?resize=1024%2C340&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?resize=768%2C255&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?resize=1000%2C332&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>It wasn&#8217;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 &#x25b6; come back. The problem? I was using a (very old) copy of <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" rel=\"noopener\">Normalize.css<\/a>, which must have followed me through several redesigns on this site, and set&#8230;<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">summary {\n  display: block; \/* the problem *\/\n}<\/code><\/pre>\n\n\n\n<p>If you do that, Firefox nukes the &#x25b6;:<\/p>\n\n\n\n<figure class=\"wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Careful not to `display: block` your &lt;summary&gt; elements, lest lose the \u25b6 in Firefox. My old copy of Normalize.css had that in there. <a href=\"https:\/\/t.co\/06KHY892dT\">pic.twitter.com\/06KHY892dT<\/a><\/p>&mdash; Chris Coyier (@chriscoyier) <a href=\"https:\/\/twitter.com\/chriscoyier\/status\/1346620311584825344?ref_src=twsrc%5Etfw\" rel=\"noopener\">January 6, 2021<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\n<p>Way back in 2016, <a href=\"https:\/\/github.com\/necolas\/normalize.css\/commit\/55ed05a79c0fd7a9a2c330c6925b982a7d5b307c#diff-289feb25fbea45a1454d7fe3d646acecfe2a3ee873c72a28b17dd00f1d06f7d6\" rel=\"noopener\">this was fixed by Jon Neal<\/a> in Normalize:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">summary {\n  display: list-item;\n}<\/code><\/pre>\n\n\n\n<p>In Chrome, the User Agent style for <code>&lt;summary&gt;<\/code> <em>is<\/em> <code>block<\/code>, so no problem with setting it to <code>block<\/code>. But in Firefox, best I can tell, the User Agent style is <code>list-item<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"330\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/CleanShot-2021-01-07-at-12.43.04@2x.png?resize=920%2C330&#038;ssl=1\" alt=\"\" class=\"wp-image-332418\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/CleanShot-2021-01-07-at-12.43.04@2x.png?w=920&amp;ssl=1 920w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/CleanShot-2021-01-07-at-12.43.04@2x.png?resize=300%2C108&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/CleanShot-2021-01-07-at-12.43.04@2x.png?resize=768%2C275&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Hence Jon setting it to <code>list-item<\/code> in the current version of Normalize. <\/p>\n\n\n\n<p>You can also see in the Firefox DevTools that the &#x25b6; is applied with a <code>::marker<\/code> pseudo element. As soon as <code>&lt;summary&gt;<\/code> isn&#8217;t a <code>list-item<\/code> anymore, the <code>::marker<\/code> disappears. I guess that makes some sense, as <a href=\"https:\/\/drafts.csswg.org\/css-pseudo-4\/#marker-pseudo\" rel=\"noopener\">the spec says<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>The <dfn>::marker<\/dfn> pseudo-element represents the automatically generated <a href=\"https:\/\/drafts.csswg.org\/css-lists-3\/#marker\" rel=\"noopener\">marker box<\/a> of a <a href=\"https:\/\/drafts.csswg.org\/css-lists-3\/#list-item\" rel=\"noopener\">list item<\/a>.<\/p><\/blockquote>\n\n\n\n<p>So the fact that <code>::marker<\/code> works on block-level items in Chrome might be the bug? I dunno, but I kinda like having <code>::marker<\/code> work on other things. As \u0160ime Vidas once pointed out, <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/ZEpRZdm\" rel=\"noopener\">it&#8217;s rather nice<\/a>.<\/p>\n\n\n\n<p>In Safari, there is no problem, as apparently the &#x25b6; comes from &#8220;Shadow Content&#8221;???<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"716\" height=\"210\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/CleanShot-2021-01-07-at-12.50.26@2x.png?resize=716%2C210&#038;ssl=1\" alt=\"\" class=\"wp-image-332420\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/CleanShot-2021-01-07-at-12.50.26@2x.png?w=716&amp;ssl=1 716w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/CleanShot-2021-01-07-at-12.50.26@2x.png?resize=300%2C88&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Anyway, the Normalize idea of just forcing them to be <code>list-item<\/code> seems fine (or just don&#8217;t touch them at all). <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I got a very helpful bug report the other day (thanks Kilian!) about the &lt;details&gt; element in a blog post of mine not showing the default &#x25b6; icon, and thus looking rather like any ol&#8217; random &lt;p&gt;.<\/p>\n","protected":false},"author":3,"featured_media":332416,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?fit=1200%2C398&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/4C5S1Ncg.jpg?fit=1024%2C340&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/332415"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=332415"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/332415\/revisions"}],"predecessor-version":[{"id":332653,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/332415\/revisions\/332653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/332416"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=332415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=332415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=332415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}