Il livello superiore si trova sopra il relativo document correlato nell'area visibile del browser e a ogni document è associato un livello superiore. Ciò significa che gli elementi promossi al livello superiore non devono preoccuparsi della gerarchia z-index o DOM. Hanno anche uno pseudo-elemento ::backdrop con cui giocare. Le specifiche dell'API Fullscreen vengono ulteriormente dettagliate, poiché Schermo intero era un ottimo esempio del livello principale in uso prima che venisse introdotto il supporto dialog.
Il livello superiore consente di risolvere il problema del rendering dei contenuti sopra il resto del document.
Le cose importanti da ricordare:
- Il livello superiore si trova al di fuori del flusso document.
- z-index non ha alcun effetto nel livello superiore.
- Ogni elemento nel livello superiore ha uno pseudo-elemento ::backdrop stilizzabile.
- Ogni elemento e ::backdrop generano un nuovo contesto di stack.
- Gli elementi nel livello superiore vengono impilati nell'ordine in cui appaiono nel set. l'ultimo in alto. Se vuoi promuovere un elemento, rimuovilo e aggiungilo di nuovo.
Come abbiamo imitato lo strato superiore fino ad ora? Non è raro vedere sviluppatori che lasciano un elemento contenitore vuoto alla fine di body. Poi verrà utilizzato come livello superiore "falso". L'idea è che questo container venga posizionato al di sopra di tutto il resto nell'elenco. Quando vuoi promuovere qualcosa di più importante, aggiungilo al contenitore. Possiamo vederlo in pacchetti popolari come SweetAlert, reactjs-popup, Magnific Popup e altri.
Con i nuovi componenti integrati e le nuove API come <dialog> e "Popover", non dovrai ricorrere a queste soluzioni alternative. Puoi promuovere i contenuti al livello superiore.
I framework dell'interfaccia utente ci consentono di collocare gli elementi promossi con le relative controparti. Tuttavia, spesso vengono separati nel DOM quando si tratta di rendering.
Se utilizzi il livello superiore, gli elementi sponsorizzati sono il punto in cui li inserisci nel tuo codice sorgente (ad esempio, un <dialog>). Non ha importanza quanti livelli nel DOM si trovano nell'elemento. Verrà promosso al livello superiore e puoi ispezionarlo dove previsto, insieme al codice HTML del componente. In questo modo è più facile esaminare contemporaneamente sia l'elemento attivatore che l'elemento promosso nel DOM. È particolarmente utile, ad esempio, se l'elemento attivatore aggiorna gli attributi. Anche questo presenta un ulteriore vantaggio in termini di accessibilità, ora che gli elementi si trovano nella posizione condivisa.
Per illustrare il livello superiore rispetto a un valore elevato di z-index, prendi in considerazione questa demo.
In questa demo puoi aprire un popup SweetAlert e aprire anche un livello superiore <dialog>. Apri <dialog>, quindi prova ad aprire il popup SweetAlert. Vedrai che viene visualizzato sotto l'elemento del livello superiore. La radice del popup SweetAlert si basa sull'utilizzo di z-index di 10.000 con position: fixed.
.swal-overlay {
z-index: 10000;
position: fixed;
}
Non è necessario applicare alcuno stile a <dialog> per farlo apparire sopra tutti gli altri contenuti.
DevTools
Passiamo così al supporto di DevTools. In Chrome DevTools verrà aggiunto il supporto per gli elementi del livello superiore, in modo da poter esaminare il livello superiore. In questo modo è più facile eseguire il debug e visualizzare l'ordine degli elementi nel livello superiore o persino il livello superiore.
Alina Varkki ha pubblicato un ottimo articolo che spiega nel dettaglio l'utilizzo di questi strumenti. Attualmente sono disponibili come funzionalità in anteprima nella versione 105 di Chrome Canary.
È tutto!
Una breve introduzione al livello superiore. Consentono di dire "Arrivederci!" a domande come:
.popup-container {
z-index: 10000;
}
Cosa inseriresti nel livello superiore? Hai provato dialog? Oppure hai controllato l'API OpenUI Popover? Facci sapere.