Cautious When Altering the Show of ‘summary’

I got a really valuable bug report a few days ago (thanks Kilian!.?.!!) about the< information> > component in a post of my own disappointing the default ▶ icon, and therefore looking rather like any ol’ random << p >

.< img loading=" lazy "width= "1200" height= "398 "src =" https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary.jpg" alt class=" wp-image-332416" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary.jpg 1200w, https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-1.jpg 300w, https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-2.jpg 1024w, https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-3.jpg 768w, https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-4.jpg 1000w" sizes="( min-width: 735px) 864px, 96vw "data-recalc-dims=" 1" > It wasn't awfully difficult to detect. I simply opened the page in Firefox, examined the component in Firefox DevTools, and had fun with homes and worths till I saw the ▶ returned. The issue? I was utilizing a( older) copy of Normalize.css, which need to have followed me through numerous redesigns on this website, and set ...

< pre rel =" CSS" class =" wp-block-csstricks-code-block language-css" data-line

> summary * the issue * If you do < blockquote class= "twitter-tweet" data-width= "500" data-dnt=" real "readability=" 5.6201923076923" > Mindful not to 'show: block' your< summary > components, lest lose the ▶ in Firefox. My old copy of Normalize.css had that

therein. pic.twitter.com/06KHY892dT!.?.!— Chris Coyier (@chriscoyier) January 6, 2021

Method back in 2016, this was repaired by Jon Neal in Normalize:

< pre rel =" CSS" class =" wp-block-csstricks-code-block language-css" data-line > summary pre>

. In Chrome, the User Representative design for << summary > is block, so no issue with setting it to obstruct. In Firefox, finest I can inform, the User Representative design is list-item.

< img loading=" lazy "width =" 920" height =" 330 "src =" https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary.png" alt class=" wp-image-332418" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-2.png 920w, https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-3.png 300w, https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-4.png 768w"

sizes=" (min-width: 735px) 864px, 96vw" data-recalc-dims =" 1" > For this reason Jon setting it to list-item in the present variation of Normalize. You can likewise see in the ▶ is used with a:: marker pseudo component. As quickly as isn't a list-item any longer, the :: marker vanishes. I think that makes some sense, as

the specification states:< blockquote class=" wp-block-quote is-style-large" readability=" 3.9784946236559 "> The:: marker pseudo-element represents the instantly produced marker box of a list product.

The reality that :: marker deal with block-level products in Chrome might be the bug? I dunno, however I kinda like having :: marker deal with other things. As Šime Vidas as soon as explained, it's rather good.

In Safari, there is no issue, as obviously the ▶ originates from "Shadow Material"???

< img loading=" lazy" width=" 716" height =" 210" src =" https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-1.png" alt class=" wp-image-332420" srcset=" https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-5.png 716w, https://websitedesign-usa.com/wp-content/uploads/2021/01/cautious-when-altering-the-show-of-summary-6.png 300w "sizes="( min-width: 735px) 864px, 96vw" data-recalc-dims=" 1" > Anyhow, the Normalize concept of simply requiring them to be list-item appears great (or simply do not touch them at all).

Leave a Reply

Your email address will not be published. Required fields are marked *