La couche supérieure se trouve au-dessus de la document correspondante dans la fenêtre d'affichage du navigateur, et chaque document est associée à une couche supérieure. Cela signifie que les éléments placés dans la couche supérieure n'ont pas besoin de se soucier de z-index ni de la hiérarchie DOM. Ils obtiennent également un pseudo-élément ::backdrop intéressant avec lequel jouer. La spécification de l'API Plein écran donne plus de détails, car le mode Plein écran était un excellent exemple de la couche supérieure utilisée avant l'arrivée de la compatibilité dialog.
La couche supérieure permet de résoudre le problème d'affichage du contenu au-dessus du reste de document.
Points importants à prendre en compte:
- La couche supérieure se trouve en dehors du flux document.
- z-index n'a aucun effet dans le calque supérieur.
- Chaque élément de la couche supérieure possède un pseudo-élément ::backdrop stylisé.
- Chaque élément et ::backdrop génèrent un nouveau contexte d'empilement.
- Les éléments de la couche supérieure sont empilés dans l'ordre dans lequel ils apparaissent dans l'ensemble. Le dernier de la liste apparaît en haut. Si vous souhaitez promouvoir un élément, supprimez-le, puis ajoutez-le à nouveau.
Comment avons-nous imité la couche supérieure jusqu'à présent ? Il n'est pas rare que les développeurs abandonnent un élément de conteneur vide à la fin de body. Il sera utilisé comme un "faux" couche supérieure. L'idée est que ce conteneur est positionné au-dessus de tous les autres éléments de la pile. Lorsque vous souhaitez promouvoir un élément avant tout le reste, vous l'ajoutez à ce conteneur. Nous pouvons le voir dans des packages populaires tels que SweetAlert, reactjs-popup, Magnific Popup, etc.
Grâce aux nouveaux composants et API intégrés tels que <dialog> et "Popover", vous n'avez pas besoin de recourir à ces solutions. Vous pouvez promouvoir du contenu sur la couche supérieure.
Les structures d'interface utilisateur nous permettent de colocaliser les éléments promus avec leurs équivalents de composants. Toutefois, ils sont souvent séparés dans le DOM au moment de l'affichage.
Lorsque vous utilisez la couche supérieure, vous placez les éléments promus dans votre code source (par exemple, un <dialog>). Le nombre de calques de l'élément dans le DOM n'a pas d'importance. Il est placé dans la couche supérieure et vous pouvez l'inspecter à l'emplacement prévu, au même endroit que le code HTML de votre composant. Il est ainsi plus facile d'inspecter simultanément l'élément déclencheur et l'élément promu dans le DOM. Cette approche est particulièrement utile si l'élément déclencheur effectue des mises à jour d'attributs, par exemple. Cela présente également un avantage supplémentaire en termes d'accessibilité maintenant que les éléments sont colocalisés.
Pour illustrer la couche supérieure par rapport à un z-index élevé, prenons cette démonstration.
Dans cette démonstration, vous pouvez ouvrir un pop-up SweetAlert et ouvrir une couche supérieure <dialog>. Ouvrez <dialog>, puis essayez d'ouvrir le pop-up SweetAlert. Vous verrez qu'il apparaît sous notre élément de calque supérieur. La racine de notre pop-up SweetAlert utilise un z-index de 10 000 avec position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Vous n'avez pas besoin d'appliquer un style à <dialog> pour qu'il apparaisse au-dessus de tous les autres contenus.
Outils de développement
Cela nous amène à la prise en charge des outils de développement. Les outils pour les développeurs Chrome sont compatibles avec les éléments de la couche supérieure, ce qui vous permet d'inspecter celle-ci. Il est ainsi plus facile de déboguer et de visualiser comment les choses s'empilent dans la couche supérieure ou même dans la couche supérieure.
Alina Varkki propose un article très intéressant qui explique en détail l'utilisation de ces outils. Elles sont actuellement disponibles en tant que fonctionnalité preview dans la version 105 de Chrome Canary.
Et voilà !
Brève présentation de la couche supérieure. Ce qui permet de dire "Au revoir !" par exemple:
.popup-container {
z-index: 10000;
}
Que mettriez-vous dans la couche supérieure ? Avez-vous essayé dialog ? Ou avez-vous déjà consulté l'API OpenUI Popover ? Merci de nous tenir informés.