::backdrop

Il pseudo-elemento ::backdrop il CSS consente di creare un fondale (backdrop) che copre l’intera visuale della pagina ed è visualizzato immediatamente dietro un <dialog> o qualsiasi altro elemento che vada in modalità a schermo intero utilizzando la Fullscreen API.

dialog::backdrop: {
  background-color: yellow;
}

Questo pseudo-elemento ci consente di modificare lo stile dell’intero sfondo dietro agli elementi quando il browser è in modalità a schermo intero. Si noti che con “modalità a schermo intero” si parla di quando il browser occupa l’intero schermo del computer, non va confuso con il viewport del browser. Spesso la modalità a schermo intero viene attivata da un’opzione del sistema operativo per espandere la finestra.

Il ::backdrop non eredita lo stile da nessun elemento, così come il suo stile non viene ereditato da niente. Non si verifica quindi nessun effetto a cascata in cui lo sfondo di due elementi potrebbe entrare in conflitto.

Stile dello sfondo di una finestra di dialogo

Consideriamo il seguente elemento <dialog> in HTML:

<dialog>
  <h3>Benvenuto in un Dialogo!</h3>
  <p>Questo è il testo del fantastico dialogo che stai visualizzando.</p>
  <button onclick="closeDialog()">Chiudi</button>
</dialog>

<button onclick="openDialog()">Apri dialog</button>

Lo stile di ::backdrop può essere utilizzato per applicare uno stile dietro a un <dialog> quando la finestra di dialogo viene visualizzata con HTMLDialogElement.showModal(), che è attualmente una funzione sperimentale, ma è ciò che attiva il backdrop.

const dialog = document.querySelector('dialog');

function openDialog() {
  dialog.showModal();
}

function closeDialog() {
  dialog.close();
}

Ora, se premiamo sul pulsante aprendo di conseguenza la finestra di dialogo, il seguente codice CSS verrà applicato all’elemento:

dialog::backdrop {
  background-color: yellow;
}

Puoi provare ad osservare tu stesso il comportamento che abbiamo appena descritto provando ad aprire la finestra di dialogo nel seguente esempio:

Sfondo dei contenuti multimediali a schermo intero

Quando i contenuti multimediali, come immagini o video, entrano in modalità a schermo intero, è possibile che non coprano l’intera area dello schermo, per esempio potrebbero lasciare dello spazio vuoto intorno ad essi.

Attualmente lo stile predefinito del browser Google Chrome per il backdrop è il seguente:

dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

Con ::backdrop possiamo andare a modificare questo comportamento oppure sovrascriverlo completamente. Potremmo per esempio impostare il seguente sfondo per i video:

video::backdrop {
  background-color: red;
}

Nel seguente esempio, quando il video sarà messo a schermo intero, sarà possibile vedere lo sfondo rosso dato che il video non copre tutta l’area dello schermo:

Trasformazioni, animazioni e stati al passaggio del mouse

Dal momento che non ci sono restrizioni sulle proprietà che possiamo dichiarare su questo pseudo-elemento, è possibile aggiungere animazioni e trasformazioni a uno sfondo o persino modificare lo stile dei vari stati, come per esempio al passaggio del mouse:

.element::backdrop {
  animation: move 5s infinite linear paused both;
  background: conic-gradient(red, orange, yellow, green, blue);
}

.element:hover::backdrop {
  animation-play-state: running;
}

@keyframes move {
  50% {
    transform: scale(0.9);
  }  
}