Pseudo-classe CSS :fullscreen
Use o seletor CSS :fullscreen para selecionar o elemento apresentado em modo de ecrã inteiro. Saiba mais sobre a pseudo-classe e pratique com os exemplos.
A pseudo-classe :fullscreen seleciona e aplica estilos a um elemento que está a ser apresentado em modo de ecrã inteiro.
O seletor :fullscreen funciona quando se entra no modo de ecrã inteiro.
Os browsers modernos suportam a pseudo-classe :fullscreen sem prefixo. Os prefixos legados -webkit- e -moz- estão, na sua maioria, obsoletos e -ms- já não é suportado.
Versão
Sintaxe
Exemplo de sintaxe CSS :fullscreen
:fullscreen {
css declarations;
}Nota: para entrar no modo de ecrã inteiro é necessário um gesto do utilizador. Neste exemplo, o botão fornece corretamente esse despoletador.
Exemplo do seletor :fullscreen:
Exemplo de código 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>Também pode utilizar o pseudo-elemento :backdrop para aplicar estilo ao fundo por trás do elemento em ecrã inteiro (por exemplo, :fullscreen::backdrop { background: #000; }).