CSS :fullscreen Pseudo Classe
Usa il selettore CSS :fullscreen per selezionare l'elemento in modalità a schermo intero. Leggi la pseudo-classe e pratica con esempi.
La pseudo-classe :fullscreen seleziona un elemento attualmente visualizzato in modalità a schermo intero. Permette di applicare un insieme separato di stili per lo stato a schermo intero senza modificare gli stili normali dell'elemento.
Questa pagina spiega a cosa serve :fullscreen, come si relaziona con la JavaScript Fullscreen API, come scrivere stili validi solo a schermo intero e le problematiche comuni da tenere a mente.
A cosa serve :fullscreen
Una pagina web non entra in modalità a schermo intero da sola. Lo schermo intero viene richiesto tramite la JavaScript Fullscreen API (element.requestFullscreen()), e tale chiamata deve avvenire in risposta a un gesto dell'utente come un clic — altrimenti i browser la bloccano per prevenire abusi.
Una volta che un elemento è a schermo intero, il browser imposta lo stato :fullscreen su di esso. Questo è il segnale in CSS: le regole scritte sotto :fullscreen si applicano solo mentre l'elemento riempie lo schermo, e si ripristinano automaticamente nel momento in cui l'utente esce (ad esempio premendo Esc).
Questo è utile quando il layout a schermo intero deve differire da quello inline — un lettore video che nasconde il chrome circostante, una galleria di immagini che si estende da bordo a bordo, o una presentazione che passa a uno sfondo scuro.
I browser moderni supportano la pseudo-classe :fullscreen senza prefisso. I prefissi legacy -webkit- e -moz- sono in gran parte obsoleti, e -ms- non è più supportato. La scorciatoia da tastiera F11 del browser mette l'intera finestra a schermo intero ma non attiva lo stato :fullscreen su un elemento specifico — solo la Fullscreen API lo fa.
Specifica
Sintassi
:fullscreen {
/* styles that apply only in fullscreen mode */
}Puoi anche limitarlo a un elemento specifico in modo che gli elementi non correlati non siano influenzati:
.player:fullscreen {
background-color: #000;
}
/* descendants of the fullscreen element */
.player:fullscreen .controls {
display: flex;
}Poiché si entra in modalità a schermo intero tramite script, si abbina quasi sempre lo stile :fullscreen a un pulsante che chiama requestFullscreen(), come mostrato di seguito.
Esempio del selettore :fullscreen
Il contenitore è piccolo in modalità inline. Quando il pulsante lo porta a schermo intero, la regola :fullscreen ne cambia il colore, lo allunga per riempire lo schermo e rivela il testo precedentemente nascosto.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
padding: 10px;
height: 200px;
width: 95%;
background-color: #1c87c9;
}
.example p {
visibility: hidden;
text-align: center;
color: #eeeeee;
font-size: 3em;
}
.example:fullscreen {
background-color: #8ebf42;
width: 100vw;
height: 100vh;
}
.example:fullscreen p {
visibility: visible;
}
</style>
</head>
<body>
<h2>:fullscreen pseudo-class example</h2>
<div class="container">
<div class="example" id="example">
<p>Fullscreen mode</p>
</div>
<br />
<button onclick="document.getElementById('example').requestFullscreen();">Click here</button>
</div>
</body>
</html>Applicare stili al backdrop
Quando un elemento va a schermo intero, il browser disegna un ::backdrop dietro di esso che riempie qualsiasi area non coperta dall'elemento (di default è nero). Puoi modificarne lo stile con lo pseudo-elemento ::backdrop:
.example:fullscreen::backdrop {
background-color: #1c87c9;
}::backdrop è utilizzato anche da altri elementi del top-layer come <dialog> aperto con showModal(), quindi è utile anche al di fuori dello schermo intero.
Problematiche comuni
- Non succede nulla al caricamento della pagina.
:fullscreencorrisponde solo dopo l'esecuzione direquestFullscreen(); non esiste un modo solo CSS per entrare in modalità a schermo intero. - La richiesta deve provenire da un gesto dell'utente. Chiamare
requestFullscreen()al di fuori di un clic, una pressione di tasto o un evento simile viene rifiutato dal browser. - Usa le unità viewport per il dimensionamento. In modalità a schermo intero, l'elemento dovrebbe di solito essere
width: 100vw; height: 100vhper riempire effettivamente lo schermo. F11non è la stessa cosa. Porta a schermo intero la finestra del browser, non un elemento specifico, e non attiva:fullscreen.
Selettori correlati
- Selettore CSS :hover — applica stili a un elemento al passaggio del puntatore.
- Selettore CSS :focus — applica stili a un elemento che ha il focus da tastiera.
- Selettore CSS :active — applica stili a un elemento mentre viene attivato.
- Proprietà CSS visibility — mostra o nasconde il contenuto, come utilizzato nell'esempio precedente.