CSS : la pseudo-classe :fullscreen
La pseudo-classe :fullscreen sélectionne et met en forme un élément affiché en mode plein écran.
Le sélecteur :fullscreen s'active lorsque le mode plein écran est activé.
INFO
Les navigateurs modernes prennent en charge la pseudo-classe :fullscreen sans préfixe. Les anciens préfixes -webkit- et -moz- sont largement obsolètes, et -ms- n'est plus pris en charge.
Version
Syntaxe
Exemple de syntaxe CSS :fullscreen
:fullscreen {
css declarations;
}Remarque : L'activation du mode plein écran nécessite une interaction de l'utilisateur. Le bouton dans cet exemple fournit correctement ce déclencheur.
Exemple du sélecteur :fullscreen :
Exemple de code CSS :fullscreen
<!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>note
Vous pouvez également utiliser le pseudo-élément
:backdroppour mettre en forme l'arrière-plan derrière l'élément en plein écran (par exemple,:fullscreen::backdrop { background: #000; }).
Pratique
Quelles sont les méthodes pour passer une page web en plein écran mentionnées dans l'article de W3Docs ?