Poner un fondo en los elementos de detalles abiertos

Una cosa que puede ser un poco rara sobre el detailselemento es que, cuando está abierto, no siempre está 100% claro qué hay dentro de ese elemento y qué no. No digo que eso siempre importe o que sea un problema particularmente difícil de resolver, solo lo tomo nota tal como me surgió recientemente.

Aquí hay un ejemplo visual:

La solución es… CSS. Diseñe el estilo de detailsmanera un tanto única y ese problema desaparecerá. Incluso si desea que la tipografía sea la misma o no desea ningún estilo exclusivo hasta que se detailsabra, aún es posible. Usando un relleno alfa transparente, puedes incluso asegurarte de que los anidados más profundos detailspermanezcan claros.

Para los detalles que simplemente insertas en el contenido en línea (como una interfaz de usuario de “spoiler” o algo así), me gusta la idea de algún tipo de borde o fondo que muestre dónde termina el contenido. Agradable también para detalles anidados. @CodePen https://t.co/1aVadri1Ci pic.twitter.com/jIvUquIbbw

– Chris Coyier (@chriscoyier) 3 de junio de 2021

Aquí está ese CSS:

details[open] {  --bg: rgb(0 0 0 / 0.2);  background: var(--bg);  outline: 1rem solid var(--bg);  margin: 0 0 2rem 0;}

Y la demostración: