Modifiche all'ereditarietà ::backdrop del CSS

Bramus

La storia di ::backdrop

L'API Fullscreen ha introdotto nuovi concetti, come il livello superiore e l'elemento ::backdrop.

• Il livello superiore è un nuovo livello impilabile visualizzato più vicino all'utente all'interno di un'area visibile. Ha le dimensioni dell'area visibile e viene mostrato sopra tutti gli altri livelli.
• Lo pseudo-elemento CSS ::backdrop è un riquadro delle dimensioni dell'area visibile, visualizzato immediatamente sotto ogni elemento presentato nel livello superiore.

Una funzionalità della specifica originale per ::backdrop era la seguente:

Non eredita da nessun elemento e non viene ereditato da.

Sebbene ciò sia stato utile per isolare lo stile di ::backdrop, significava anche che ::backdrop non aveva accesso ad alcuna proprietà personalizzata dichiarata su :root. Questo ha creato confusione tra gli sviluppatori web.

Come soluzione alternativa, dovevi dichiarare esplicitamente le tue proprietà personalizzate su ::backdrop e :root per renderle disponibili:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

Aggiornamento a ::backdrop

Per risolvere i problemi riscontrati in ::backdrop, il gruppo di lavoro CSS ha adottato questi concetti e ora li ha specificati nella specifica del layout posizionato in CSS.

Oltre al passaggio alla nuova specifica, le definizioni sono state perfezionate.

Un perfezionamento che ha un impatto diretto per gli sviluppatori web è che l'elemento ::backdrop ora è un elemento tree abiding, il che significa che eredita tutte le proprietà ereditabili dall'elemento di origine.

Supporto dei browser

• 122
• 122
• 120
• 17,4

Grazie a questa modifica è possibile sostituire i valori delle proprietà personalizzate su elementi specifici e ::backdrop vi avrà accesso. Ad esempio, gli elementi ::backdrop associati a un elemento <dialog> aperto possono ora accedere alle proprietà personalizzate disponibili in <dialog>.

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}

Esegui una demo con un <dialog> che si apre nel livello superiore. In Chrome 122 e versioni successive, ::backdrop può accedere alla variabile --backdrop-color e utilizzarla per colorare lo sfondo.