Modifiche all'ereditarietà ::backdrop del CSS

Bramus

La cronologia di ::backdrop

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

• Il livello superiore è un nuovo livello di sovrapposizione visualizzato più vicino all'utente all'interno di un'area visibile. Ha le dimensioni dell'area visibile e appare sopra tutti gli altri livelli.
• Lo pseudoelemento CSS ::backdrop è una scatola delle dimensioni dell'area visibile, visualizzata immediatamente sotto qualsiasi elemento presentato nel livello superiore.

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

Non eredita da alcun elemento e non viene ereditato.

Sebbene questo sia stato utile per isolare lo stile di ::backdrop, significava anche che ::backdrop non aveva accesso ad alcuna proprietà personalizzata dichiarata il giorno :root. Ciò ha creato un po' di confusione tra gli sviluppatori web.

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

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

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

Un aggiornamento a ::backdrop

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

Oltre a spostare la definizione in una nuova specifica, le definizioni sono state perfezionate.

Un perfezionamento che ha un impatto diretto sugli sviluppatori web è che l'elemento ::backdrop ora è un elemento conforme all'albero, il che significa che eredita tutte le proprietà ereditabili dall'elemento di origine.

Grazie a questa modifica, è possibile sostituire i valori delle proprietà personalizzate in elementi specifici e ::backdrop avrà accesso a questi valori. Ad esempio, il ::backdrop associato a un elemento <dialog> aperto ora può accedere alle proprietà personalizzate disponibili in quel <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);
}