CSS :fullscreen Pseudo Class
Utilisez le sélecteur CSS :fullscreen pour cibler un élément affiché en plein écran. Apprenez la pseudo-classe et pratiquez avec des exemples.
La pseudo-classe :fullscreen correspond à un élément actuellement affiché en mode plein écran. Elle vous permet d'appliquer un ensemble de styles distincts pour l'état plein écran sans toucher aux styles normaux de l'élément.
Cette page explique ce que fait :fullscreen, comment elle s'articule avec l'API Fullscreen JavaScript, comment écrire des styles réservés au plein écran et les pièges courants à surveiller.
À quoi sert :fullscreen
Une page web ne passe pas en plein écran d'elle-même. Le plein écran est demandé via l'API Fullscreen JavaScript (element.requestFullscreen()), et cet appel doit survenir en réponse à un geste utilisateur tel qu'un clic — les navigateurs le bloquent sinon pour prévenir les abus.
Dès qu'un élément est en plein écran, le navigateur active l'état :fullscreen sur lui. C'est votre signal en CSS : les règles écrites sous :fullscreen s'appliquent uniquement lorsque l'élément remplit l'écran, et sont automatiquement annulées dès que l'utilisateur quitte (par exemple en appuyant sur Esc).
Cela est utile lorsque la mise en page en plein écran doit différer de la mise en page en ligne — un lecteur vidéo qui masque son interface environnante, une galerie d'images qui s'étend jusqu'aux bords, ou un diaporama qui passe sur un fond sombre.
Les navigateurs modernes prennent en charge la pseudo-classe :fullscreen sans préfixe. Les préfixes hérités -webkit- et -moz- sont largement obsolètes, et -ms- n'est plus pris en charge. Le raccourci navigateur F11 met toute la fenêtre en plein écran mais ne déclenche pas l'état :fullscreen sur un élément spécifique — seule l'API Fullscreen le fait.
Spécification
Syntaxe
:fullscreen {
/* styles that apply only in fullscreen mode */
}Vous pouvez également le limiter à un élément spécifique pour ne pas affecter les éléments non concernés :
.player:fullscreen {
background-color: #000;
}
/* descendants of the fullscreen element */
.player:fullscreen .controls {
display: flex;
}Comme le plein écran est déclenché par un script, vous associez presque toujours le style :fullscreen à un bouton qui appelle requestFullscreen(), comme indiqué ci-dessous.
Exemple du sélecteur :fullscreen
Le conteneur est petit en mode normal. Lorsque le bouton le passe en plein écran, la règle :fullscreen modifie sa couleur, l'étire pour remplir l'écran et révèle le texte précédemment masqué.
<!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>Mettre en forme le fond (backdrop)
Lorsqu'un élément passe en plein écran, le navigateur peint un ::backdrop derrière lui qui remplit toute zone non couverte par l'élément (il est noir par défaut). Vous pouvez le restyliser avec le pseudo-élément ::backdrop :
.example:fullscreen::backdrop {
background-color: #1c87c9;
}::backdrop est également utilisé par d'autres éléments de la couche supérieure comme <dialog> ouvert avec showModal(), il est donc utile au-delà du plein écran.
Pièges courants
- Rien ne se passe au chargement de la page.
:fullscreenne correspond à un élément qu'après l'exécution derequestFullscreen(); il n'existe pas de moyen CSS seul d'entrer en plein écran. - La demande doit provenir d'un geste utilisateur. Appeler
requestFullscreen()en dehors d'un clic, d'une pression de touche ou d'un événement similaire est rejeté par le navigateur. - Utilisez des unités viewport pour le dimensionnement. En plein écran, l'élément doit généralement avoir
width: 100vw; height: 100vhpour remplir réellement l'écran. F11n'est pas la même chose. Il met la fenêtre du navigateur en plein écran, pas un élément choisi, et ne déclenche pas:fullscreen.
Sélecteurs associés
- Sélecteur CSS :hover — mettre en forme un élément lors du survol du pointeur.
- Sélecteur CSS :focus — mettre en forme un élément qui a le focus clavier.
- Sélecteur CSS :active — mettre en forme un élément pendant qu'il est activé.
- Propriété CSS visibility — afficher ou masquer du contenu, comme utilisé dans l'exemple ci-dessus.