Pseudo-classe fullscreen

La pseudo-classe fullscreen définit le style des éléments pour le mode plein écran du navigateur. Pour passer du mode d'affichage standard de la page au mode plein écran et vice versa, il faut appuyer sur la touche F11 du clavier.

Syntaxe

sélecteur:fullscreen {
	
}

Exemple

Au clic, agrandissons un élément contenant du texte en mode plein écran et changeons lui la couleur de fond :

<div id="txt">
	Full screen
</div>
<p>
	<button onclick="fullScreen()">Click</button>
</p>

body {
	margin: 0;
}
#txt {
	padding: 10px;
	background: #467CBC;
	color: white;
	width: 200px;
}
#txt:-webkit-full-screen {
	background: #E37D76;
}
#txt:-moz-full-screen {
	background: #E37D76;
}
#txt:-ms-fullscreen {
	background: #E37D76;
}

function fullScreen() {
	let elem = document.getElementById('txt'); // On obtient l'élément
	if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen(); // Chrome, Opera, Safari
	else if (elem.mozRequestFullScreen) elem.mozRequestFullScreen(); // Firefox
	else if (elem.msRequestFullscreen) elem.msRequestFullscreen(); // Internet Explorer, Edge
	else if (elem.requestFullscreen) elem.requestFullscreen();
}

Voir aussi

la pseudo-classe :default,
qui définit le style des éléments par défaut