La couche supérieure se trouve au-dessus de l'document associée 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 ne doivent pas se soucier de la hiérarchie z-index ou DOM. Ils obtiennent également un pseudo-élément ::backdrop intéressant avec lequel jouer. La spécification de l'API Fullscreen donne plus de détails, car le mode plein écran était un excellent exemple de couche supérieure utilisée avant la prise en charge de dialog.
La couche supérieure permet de résoudre le problème d'affichage du contenu au-dessus des autres éléments document.
Points importants à retenir :
- La couche supérieure se trouve en dehors du flux document.
- z-index n'a aucun effet dans la couche supérieure.
- 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 arrivé, 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 suppriment un élément de conteneur vide à la fin de body. On l'utilisera ensuite comme une « fausse » couche supérieure. L'idée est de placer ce conteneur au-dessus de tout le reste de la pile. Pour promouvoir un élément avant tout, vous devez l'ajouter à ce conteneur. Nous le voyons dans des packages populaires comme SweetAlert, reactjs-popup, Magnific Popup, etc.
Avec les nouveaux composants et API intégrés tels que <dialog> et "Popover", vous n'avez pas besoin d'utiliser ces solutions de contournement. Vous pouvez promouvoir du contenu sur la couche supérieure.
Les frameworks d'UI nous permettent de colocaliser les éléments promus avec leurs équivalents. Toutefois, elles sont souvent séparées dans le DOM lors du rendu.
Lorsque vous utilisez la couche supérieure, les éléments mis en avant sont placés là où vous les placez dans votre code source (par exemple, un <dialog>). Le nombre de couches inférieures dans le DOM pour l'élément n'a pas d'importance. Il est placé dans la couche supérieure, et vous pouvez l'inspecter à l'emplacement souhaité en colocalisant l'élément avec 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 fonctionnalité est particulièrement utile si votre é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 au même endroit.
Pour illustrer la couche supérieure et la couche z-index élevée, prenons cette démonstration.
Dans cette démonstration, vous pouvez ouvrir un pop-up SweetAlert et également ouvrir une couche supérieure <dialog>. Ouvrez <dialog>, puis essayez d'ouvrir le pop-up SweetAlert. Vous verrez qu'elle apparaît sous notre élément de calque supérieur. Et la racine de notre pop-up SweetAlert utilise un z-index de 10000 avec position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Il n'est pas nécessaire d'appliquer des styles à la <dialog> pour qu'elle s'affiche au-dessus de tout autre contenu.
DevTools
Cela nous amène à la prise en charge des outils de développement. Les outils pour les développeurs Chrome prennent désormais en charge les éléments de la couche supérieure afin que vous puissiez inspecter la couche supérieure. Il est ainsi plus facile de déboguer et de visualiser comment les choses s'empilent dans la couche supérieure ou même ce qui se trouve dans la couche supérieure.
Alina Varkki propose un excellent article qui explique en détail l'utilisation de ces outils. Ils sont actuellement disponibles en tant que fonctionnalité d'aperçu dans la version 105 de Chrome Canary.
Et voilà !
Brève présentation de la couche supérieure Vous pouvez dire "Au revoir !" à des choses comme:
.popup-container {
z-index: 10000;
}
Que devez-vous insérer dans la couche supérieure ? Avez-vous essayé dialog ? Ou consultez l'API OpenUI Popover ? Contactez-nous.