La nouvelle API Popover : des popovers sans effort sans JavaScript

L'API Popover simplifie la création de popovers, éliminant le besoin de bibliothèques JavaScript ou de codage manuel. Pris en charge par les principaux navigateurs, il est remarquablement simple à mettre en œuvre.

Comprendre l'API Popover

Cette nouvelle norme rationalise le processus d'affichage des popovers, en gérant automatiquement les considérations d'ouverture, de fermeture et d'accessibilité. Les développeurs n'ont plus besoin de gérer ces états de manière indépendante.

Créer un Popover

Mise en œuvre de base

Voici comment créer un popover de base :

1. Créez un bouton dans votre code HTML pour déclencher le popover.
2. Utilisez l'attribut popover-target sur le bouton, en le liant à un élément via un identifiant partagé (par exemple, popover).
3. Appliquez l'attribut popover à l'élément HTML que vous souhaitez utiliser comme popover, en utilisant le même ID.

C'est tout ce qu'il faut ! Cliquer sur le bouton ouvre le popover et il se ferme automatiquement lorsque vous cliquez à l'extérieur (rejet léger). Cette fonctionnalité de bascule est le comportement par défaut.

Ajout d'un bouton de fermeture

Vous pouvez ajouter un bouton de fermeture dans le popover. Donnez à ce bouton l'attribut popover-target approprié et définissez explicitement une action hide. Un peu de CSS améliorera son apparence.

Modes popover

Les popovers sont par défaut en mode « auto » :

1. L'ouverture d'une popover ferme toutes les autres ouvertes.
2. Le rejet de la lumière est activé.

Le passage en mode « manuel » empêche la fermeture automatique des autres popovers et désactive le rejet de la lumière. Vous devrez gérer explicitement l'ouverture et la fermeture du popover.

Style Popovers

Utilisation de l'élément de toile de fond

L'élément backdrop est particulièrement utile ; il recouvre le reste de la page lorsque le popover est ouvert.

<code class="language-css">[popover] {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    max-width: 300px;
}

/* ... other CSS ... */</code>

Cela permet de styliser facilement l'arrière-plan pour attirer l'attention sur le popover.

Popover vs Modal

Il est crucial de comprendre que les popovers ne sont pas modaux :

1. Les popovers ne désactivent pas l'interaction avec le reste de la page.
2. Vous pouvez toujours cliquer sur d'autres éléments lorsqu'un popover est ouvert.

Pour un modal qui nécessite une interaction de l'utilisateur avant de continuer, utilisez dialog.showModal() à la place. Cela nécessitera du JavaScript, mais il fournit une véritable fonctionnalité modale.

Amélioration du style Popover

Utiliser l'élément de dialogue

L'attribut popover lui-même est non sémantique, vous permettant d'utiliser un élément HTML <dialog> pour votre popover.

Ajout de plus de contenu et application de CSS

L'ajout de contenu (boutons, etc.) et de style avec CSS (familles de polices, remplissage, couleurs, etc.) améliore encore l'apparence du popover. L'exemple montre comment styliser les boutons principaux pour un look plus soigné.

Utiliser JavaScript avec Popover

Bien que l'API simplifie la création de popovers sans JavaScript, vous pouvez toujours utiliser JavaScript pour un contrôle plus avancé (par exemple, showPopover).

Conclusion

L'API Popover offre une approche simplifiée pour créer des popovers élégants et accessibles avec un minimum de code. Vos commentaires sont les bienvenus ! Pensez à aimer ou à suivre pour plus de contenu comme celui-ci.

Suivez-moi sur : LinkedIn | Moyen | Ciel Bleu

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!