Pseudo-classe CSS :popover-open
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2024.
La pseudo-classe CSS :popover-open représente un élément popover (c'est-à-dire un élément avec un attribut popover) qui est dans l'état ouvert. Vous pouvez l'utiliser pour appliquer un style aux éléments popovers uniquement lorsqu'ils sont affichés.
Syntaxe
css
:popover-open {
/* ... */
}
Exemples
HTML
html
<button popovertarget="monpopo">Afficher/masquer le popover</button>
<div id="monpopo" popover="manual">Coucou ? Caché ?</div>
CSS
Par défaut, les popovers apparaissent au milieu de la zone d'affichage (viewport). Le style par défaut porté par la feuille de styles de l'agent utilisateur ressemble à ceci :
css
[popover] {
position: fixed;
inset: 0;
width: fit-content;
height: fit-content;
margin: auto;
border: solid;
padding: 0.25em;
overflow: auto;
color: CanvasText;
background-color: Canvas;
}
Pour surcharger les styles par défaut et faire apparaître le popover ailleurs, vous pouvez remplacer les styles ci-dessus par quelque chose comme :
css
:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
bottom: 5px;
right: 5px;
margin: 0;
}
Résultat
Spécifications
| Spécification |
|---|
| HTML # selector-popover-open |
| Selectors Level 4 # selectordef-popover-open |
Compatibilité des navigateurs
Voir aussi
- L'API Popover
- L'attribut HTML global
popover