PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Careful When Changing the Display of `summary`

January 12, 2021
in Web Dev
271 21
Careful When Changing the Display of `summary`


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).





Source link

Share219Tweet137Share55Pin49

Related Posts

On Auto-Generated Atomic CSS | CSS-Tricks
Web Dev

On Auto-Generated Atomic CSS | CSS-Tricks

Robin Weser’s “The Shorthand-Longhand Problem in Atomic CSS” in an interesting journey through a tricky problem. The point is...

January 15, 2021
How to Add Commas Between a List of Items Dynamically with CSS
Web Dev

3 Approaches to Integrate React with Custom Elements

In my role as a web developer who sits at the intersection of design and code, I am drawn...

January 15, 2021
Community Resources, Weekly Newsletter, And Boosting Skills Online — Smashing Magazine
Web Dev

Smashing Workshops & Audits — Smashing Magazine

About The AuthorJuggling between three languages on a daily basis, Iris is known for her love of linguistics, arts,...

January 15, 2021
4 Lessons Web App Designers Can Learn From Google — Smashing Magazine
Web Dev

The Report — Smashing Magazine

About The AuthorSuzanne Scacca is a former WordPress implementer, trainer and agency manager who now works as a freelance...

January 15, 2021
Next Post

What Is Machine Learning? — Smashing Magazine

Building Flexible Components With Transparency

Building Flexible Components With Transparency

Leave a Reply Cancel reply

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

Recommended

Troubleshooting Amazon API Gateway with enhanced observability variables : idk.dev

Troubleshooting Amazon API Gateway with enhanced observability variables : idk.dev

September 4, 2020

What’s Coming To VueX? — Smashing Magazine

December 24, 2020
Vue 3

Vue 3

September 19, 2020
Understanding TypeScript Generics — Smashing Magazine

A Practical Introduction To Dependency Injection — Smashing Magazine

December 30, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In