:popover-open
Baseline
2024
Newly available
Depuis April 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
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
:popover-open {
/* ... */
}
Exemples
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 :
[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 :
:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
bottom: 5px;
right: 5px;
margin: 0;
}
Résultat
Spécifications
| Specification |
|---|
| HTML # selector-popover-open |
| Selectors Level 4 # selectordef-popover-open |
Compatibilité des navigateurs
Voir aussi
- L'API Popover
- L'attribut HTML global
popover