`:popover-open` - Sélecteur CSS

:popover-open

Résumé des caractéristiques du sélecteur `:popover-open`

Description rapide

Pseudo-classe qui cible les éléments popover qui sont dans l'état ouvert (ou affichés).

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

Pseudo-classe `:popover-open` - Description

En HTML les éléments popover sont des éléments qui peuvent être masqués ou afficher à la demande de l'utilisateur ou d'un programme Javascript. Ils possèdent forcément l'attribut popover. Ils sont pas défaut masqués, et peuvent être affichés par un autre élément du genre button ou input type="button" qui possède l'attribut popovertarget, ou en lançant la méthode showPopover() de l'objet HTMLElement en Javascript..

Leur fermeture peut se faire de façon automatique dès qu'un clic a lieu sur la page si popover=auto, ou à la demande par un nouveau clic sur l'élément qui comporte popovertarget si popover=manual.

La pseudo-classe :popover-open désigne les éléments popover qui sont affichés.

Exemple.Voici un code HTML et son résultat (le bouton). Aucun Javascript n'est nécessaire.


	button popovertarget="id"
	Afficher le popover
	/button
	div id="id" popover="auto"
	Ceci est le popover
	/div

Ceci est un pop over

Pseudo-classe `:popover-open` - Exemples d'utilisation.

Formater le popover.

Formater le popover n'est rien de plus qu'une utilisation des styles habituelle. Par exemple ici, nous avons défini la taille des caractères, réduit l'épaisseur de la bordure, choisit une couleur d'arrière-plan et une ombre pour le cadre.

😎

Positionner le popover à proximité du bouton.

Par défaut, le popover s'afficher au milieu du viewport, aussi bien horizontalement que verticalement. On souhaite parfois l'afficher ailleurs, par exemple en dessous du bouton. Nous allons utiliser une fonctionnalité de CSS dénommée "Anchor positioning" qui permet de positionner un élément par rapport à un autre. Cette fonctionnalité n'est pas encore reconnue par tous les navigateurs (en particulier Firefox ne la reconnaît pas encore), changez de navigateur si cela ne fonctionne pas chez vous.

😎

Pseudo-classe `:popover-open` - Compatibilité des navigateur.

La prise en charge de la pseudo-classe :popover-open est correcte sur l'ensemble des grands navigateurs.

Pseudo-classe
:popover-open

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Pseudo-classe `:popover-open` - Historique.

Sélecteurs - Niveau 4

Introduction de la pseudo-classe :popover-open dans ce niveau 4 du module de spécification sur les sélecteurs.

29 Septembre 2011
Document de travail.

Autres sélecteurs relatifs à l'état d'affichage.

Plusieurs pseudo-classes permettent de désigner un élément en fonction des actions de l'utilisateur : déplacement de la souris, sélection d'un élément, etc.

::backdrop

Pseudo-élément ciblant l'élément ajouté par les navigateurs en arrière des boites de dialogue ou des éléments affichés en plein écran.

⚠

:closed

Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.

::details-content

Ce pseudo-élément cible le contenu détaillé d'une balise details.

::part()

Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).

:fullscreen

Pseudo-classe désignant les éléments affichés en plein écran pendant le temps où ils sont affichés en plein écran.

:modal