Pseudoklasse fullscreen

De pseudoklasse fullscreen bepaalt de stijl van elementen voor de volledig schermmodus van de browser. Om van de standaard weergavemodus van de pagina naar de volledig schermmodus te gaan en terug, moet je op de toets F11 op het toetsenbord drukken.

Syntaxis

selector:fullscreen {
	
}

Voorbeeld

Laten we bij een klik het element met tekst uitvouwen naar de volledig schermmodus en de achtergrondkleur veranderen:

<div id="txt">
	Full screen
</div>
<p>
	<button onclick="fullScreen()">Klik</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'); // We krijgen het element
	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();
}

Zie ook

pseudoklasse :default,
die de stijl bepaalt voor standaardelementen