Il livello superiore si trova sopra il relativo document nel viewport del browser e ogni document ha un livello superiore associato. Ciò significa che gli elementi promossi al livello superiore non devono preoccuparsi della gerarchia z-index o DOM. Hanno anche a disposizione un pratico pseudo-elemento ::backdrop. La specifica dell'API Fullscreen fornisce ulteriori dettagli, in quanto Fullscreen era un ottimo esempio del livello superiore in uso prima dell'arrivo del supporto dialog.
Il livello superiore aiuta a risolvere il problema di visualizzazione dei contenuti sopra il resto del document.
Ecco gli aspetti importanti da ricordare:
- Il livello superiore è esterno al flusso document.
- z-index non ha alcun effetto nel livello superiore.
- Ogni elemento nel livello superiore ha uno pseudo-elemento ::backdrop stile.
- Ogni elemento e ::backdrop genera un nuovo contesto di sovrapposizione.
- Gli elementi del livello superiore sono impilati nell'ordine in cui appaiono nel set. L'ultima inserita viene visualizzata in alto. Se vuoi promuovere un elemento, rimuovilo e aggiungilo di nuovo.
Come abbiamo simulato il livello superiore finora? Non è raro che gli sviluppatori inseriscano un elemento contenitore vuoto alla fine del body. che verrà poi utilizzato come livello superiore "falso". L'idea è che questo contenitore venga posizionato sopra tutto il resto nella pila. Quando vuoi promuovere qualcosa più di tutto il resto, lo aggiungi a quel contenitore. Lo possiamo vedere in pacchetti popolari come SweetAlert, reactjs-popup, Magnific Popup e altri.
Con i nuovi componenti e le API integrate come <dialog> e "Popover", non dovrai ricorrere a queste soluzioni alternative. Puoi promuovere i contenuti nel livello superiore.
I framework UI ci consentono di collocare gli elementi promossi insieme alle relative controparti dei componenti. Tuttavia, spesso vengono separati nel DOM in fase di rendering.
Utilizzando il livello superiore, gli elementi sponsorizzati sono il punto in cui li inserisci nel codice sorgente (ad esempio, un <dialog>). Non è importante quanti livelli si trovano nel DOM. L'elemento verrà promosso al livello superiore e potrai controllarlo dove previsto, posizionato insieme all'HTML del componente. In questo modo è più facile ispezionare contemporaneamente sia l'elemento attivatore sia l'elemento promosso nel DOM. Particolarmente utile se l'elemento di attivazione esegue aggiornamenti degli attributi, ad esempio. Questo approccio offre anche un ulteriore vantaggio per l'accessibilità, ora che gli elementi sono nella stessa posizione.
Per illustrare il livello superiore rispetto a z-index elevato, considera questa demo.
In questa demo, puoi aprire un popup SweetAlert e anche un livello superiore <dialog>. Apri <dialog> e prova ad aprire il popup SweetAlert. Vedrai che viene visualizzato sotto l'elemento del livello superiore. E la radice del popup SweetAlert utilizza un valore z-index pari a 10000 con position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Non è necessario applicare stili a <dialog> per far sì che venga visualizzato sopra tutti gli altri contenuti.
DevTools
E questo ci porta all'assistenza di DevTools. Chrome DevTools aggiunge il supporto per gli elementi del livello superiore, in modo da poter ispezionare il livello superiore. In questo modo è più facile eseguire il debug e visualizzare l'organizzazione delle risorse nel livello superiore o anche cosa si trova al suo interno.
Alina Varkki ha scritto un ottimo articolo che illustra in dettaglio l'utilizzo di questi strumenti. Al momento sono disponibili come funzionalità di anteprima nella versione 105 di Chrome Canary.
È tutto!
Una breve introduzione al livello superiore. Sarà possibile dire "Arrivederci!" ad esempio a:
.popup-container {
z-index: 10000;
}
Cosa invieresti nel livello superiore? Hai provato dialog? Oppure hai controllato l'API OpenUI Popover? Facci sapere.