Quelques astuces CSS pour les éléments de dialogue HTML

Dernièrement, j'ai expérimenté l'élément HTML <dialog>. C'est très pratique pour les boîtes de dialogue natives sans beaucoup de JavaScript.

Si vous souhaitez voir rapidement comment cela fonctionne, vous pouvez visiter Mes jeux Jumblie et cliquer sur le bouton d'engrenage Paramètres en haut.

D'accord ! Voici quelques conseils qui pourraient vous être utiles lors de la mise en œuvre du vôtre <dialog> sur votre site Web !

Flou<dialog>Arrière-plan

::backdrop Le pseudo-élément CSS ne se limite pas à <dialog>. Vous pouvez le styliser comme vous le souhaitez, mais si vous souhaitez rester simple, vous pouvez ajouter un filtre de flou comme celui-ci pour flouter légèrement l'arrière-plan :

<code>dialog::backdrop {
  backdrop-filter: blur(2px);
}</code>

Bien entendu, vous pouvez également ajouter d'autres attributs, tels que background-color. Si vous souhaitez approfondir ce sujet, j'ai également écrit un article sur le style des pseudo-éléments avec JavaScript !

<dialog>Désactiver le défilement des pages à l'ouverture

C'est un sélecteur spécial sympa. Lorsque <dialog> est activé, il ajoute un attribut open à la balise.

<code>body:has(dialog[open]) {
  overflow: hidden;
}</code>

Ce sélecteur vérifie si body contient un open avec l'attribut <dialog>. Si oui, désactivez le défilement des pages ! Bien sûr, ce qui est étrange est que si votre boîte de dialogue est grande, vous devrez peut-être activer le défilement séparément, mais cela empêchera la page derrière la boîte de dialogue de se déplacer lors du défilement.

C'est ça ! J'espère que cela aide!

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!