Poppin & # 039; Dans

Hé là! Cela fait longtemps qu'on ne s'est pas vu! Je voulais juste entrer et dire bonjour. ?

En parlant de "popping", j'ai expérimenté la nouvelle API Popover. Nous l'avons mentionné pour la première fois en 2018, mais le soutien complet dans les navigateurs modernes n'est que récent (avril 2024).

Initialement, un élément HTML dédié <popover></popover> a été planifié. Chromium a travaillé là-dessus jusqu'en septembre 2021, mais il a finalement été remplacé par un attribut popover. Cela a du sens, car n'importe quel élément peut désormais fonctionner comme un popover - ajoutez simplement l'attribut.

`` `HTML

<code>
Here's an interesting observation: a simple element like this:

```html
<div>?</div></code>

... s'affiche normalement. Cependant, l'ajout de l'attribut popover le cache! Cela m'a initialement confondu, mais Devtools a confirmé que c'était le comportement attendu.

Plusieurs popovers sont possibles, différenciées par IDS:

<div popover="id1"></div>
<div popover="id2"></div>

Un "déclencheur" est nécessaire pour activer le popover. Un autre attribut transforme n'importe quel bouton (ou élément de type bouton) en ce déclencheur:

<button>Say Hello!</button>
<div popover="">?</div>

Cliquez sur le bouton pour faire basculer la visibilité de la popover. CSS gère la logique de visibilité, nous permettant de nous concentrer sur l'événement de clic. Par exemple, une bordure noire épaisse est le style par défaut lorsque le popover s'ouvre.

Devtools révèle d'autres détails intéressants: la largeur et la hauteur de la popover se comportent comme des éléments en ligne, même avec display: block. Il est dimensionné au contenu et centré, le tout sans CSS personnalisé!

La suppression de la bordure par défaut n'est pas aussi simple que border: 0;. Le :popover-open pseudo-classe styles l'élément seulement lors de l'ouverture, l'emportant sur des styles antérieurs.

Alternativement, sélectionnez l'attribut [popover]:

/* All popovers */
[popover] { border: 0; }

/* Specific popover */
#wave[popover] { border: 0; }

/* Equivalent to :popover-open */
#wave:popover-open { border: 0; }

Cela permet d'ajouter des animations à l'état ouvert (inspiré par les démos de Jhey).

De plus, les popovers peuvent inclure un pseudo-élément ::backdrop, similaire à <dialog></dialog>, pour les effets visuels. L'exemple almanac de Mojtaba est excellent.

Les possibilités sont vastes! Les info-bulleurs deviennent beaucoup plus simples avec la visibilité du CSS. Michelle Barker souligne qu'il s'agit davantage d'un "toggletip" (contrôlé par clic) qu'une infraction de survol, et son article montre à quel point il s'intègre bien au positionnement de l'ancrage CSS (à mesure que le support augmente).

Jhey est une autre excellente ressource, soulignant qu'un popover ne se limite pas aux popovers; Il peut être réutilisé pour d'autres éléments d'interface utilisateur avec une visibilité basculée, comme les menus coulissants.

Il se fait tard, et il y a beaucoup plus à explorer, mais même cette incursion initiale est prometteuse. Voici une liste de ressources pour l'apprentissage plus approfondi:

• Accessibilité à la popover: comportement du navigateur (Hidde de Vries)
• en utilisant popover et <dialog></dialog> pour les modaux (Hidde de Vries)
• Ui ouvert et l'API Popover (Brecht de Ruyte)
• Popovers et dialogues (Adrian Roselli)
• style de contrôle de forme avancé (Brecht de Ruyte)
• API popover pour HTML Info-toolsts (Chris Coyier)
• Comparaison de l'API popover et <dialog></dialog> (LOGROCKING)

Merci de m'avoir laissé entrer!

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!