Tenga cuidado al cambiar la visualización del “resumen”

El otro día recibí un informe de error muy útil (¡gracias Kilian !) sobre el detailselemento en una publicación mía de blog que no muestra el ícono ▶ predeterminado y, por lo tanto, se parece más bien a cualquier antiguo elemento aleatorio p.

No fue muy difícil de diagnosticar. Simplemente abra la página en Firefox, inspeccioné el elemento en Firefox DevTools y jugué con propiedades y valores hasta que vi regresar el ▶. ¿El problema? Estaba usando una copia (muy antigua) de Normalize.css, que debe haberme seguido a través de varios rediseños en este sitio, y configurar…

summary {  display: block; /* the problem */}

Si haces eso, Firefox destruye el ▶:

Tenga cuidado de no “mostrar: bloquear” sus elementos resumen, para no perder el ▶ en Firefox. Mi copia anterior de Normalize.css tenía eso ahí. pic.twitter.com/06KHY892dT

– Chris Coyier (@chriscoyier) 6 de enero de 2021

Allá por 2016, Jon Neal solucionó esto en Normalize:

summary {  display: list-item;}

En Chrome, el estilo del Agente de usuario summaryes block, por lo que no hay problema para configurarlo en block. Pero en Firefox, lo mejor que puedo decir es que el estilo del Agente de Usuario es list-item.

Por lo tanto, Jon lo configuró list-itemen la versión actual de Normalizar.

También puedes ver en Firefox DevTools que ▶ se aplica con un ::markerpseudo elemento. Tan pronto como summaryya no existe list-item, ::markerdesaparece. Supongo que eso tiene algún sentido, como dice la especificación:

El pseudoelemento ::marker representa el cuadro de marcador generado automáticamente de un elemento de la lista.

Entonces, ¿el hecho de que ::markerfuncione en elementos a nivel de bloque en Chrome podría ser el error? No lo sé, pero me gusta ::markertrabajar en otras cosas. Como señaló una vez Šime Vidas, es bastante agradable.

En Safari, no hay problema, ya que aparentemente el ▶ proviene de “Shadow Content”???

De todos los modos, la idea de Normalizar de simplemente forzarlos a estarlo list-itemparece estar bien (o simplemente no tocarlos en absoluto).