Prudent lors de la modification de l'affichage du «résumé»

Récemment, un rapport de bogue utile (merci, Kilian!) A souligné un problème avec le<details></details> élément dans l'un de mes articles de blog. L'icône par défaut ▶ ne s'affiche pas, ce qui fait apparaître l'élément générique.

Le débogage a révélé le coupable: une version obsolète de Normalize.css, qui avait par inadvertance résumé summary { display: block; } . Cela a amené Firefox à supprimer l'icône ▶.

En 2016, Jon Neal l'a abordé dans Normalize.css en modifiant le style en summary { display: list-item; } . La feuille de styles d'agent utilisateur par défaut de Chrome définit déjà<summary></summary> Pour display: block , donc ce changement ne l'affecte pas. Cependant, le style de style utilisateur de Firefox utilise display: list-item , d'où le correctif dans normaliser.css.

Firefox Devtools montre que l'icône ▶ est appliquée via le pseudo-élément ::marker . La suppression du style d'affichage de list-item supprime le ::marker , car la spécification indique ::marker s'applique uniquement aux éléments de liste. Le comportement de Chrome d'appliquer ::marker aux éléments au niveau des blocs pourrait être un bug, bien que l'utilité de ::marker au-delà des éléments de liste soit attrayante (comme l'a noté les vidas Šime).

Safari, intéressant, ne présente pas ce problème, rendant apparemment l'icône ▶ de "Contenu Shadow".

La solution apparaît simple: utilisez le style d'affichage de list-item comme dans Normalize.css, soit éviter de styliser le<summary></summary> élément complètement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!