CSS :fullscreen Pseudo Classe
Use o seletor CSS :fullscreen para selecionar o elemento exibido em modo tela cheia. Leia sobre a pseudo-classe e pratique com exemplos.
A pseudo-classe :fullscreen corresponde a um elemento que está sendo exibido atualmente no modo tela cheia. Ela permite aplicar um conjunto separado de estilos para o estado de tela cheia sem alterar os estilos normais do elemento.
Esta página explica o que :fullscreen faz, como ela se relaciona com a JavaScript Fullscreen API, como escrever estilos exclusivos para tela cheia e os problemas comuns a observar.
Para que serve o :fullscreen
Uma página web não entra em tela cheia por conta própria. A tela cheia é solicitada por meio da Fullscreen API do JavaScript (element.requestFullscreen()), e essa chamada deve ocorrer em resposta a um gesto do usuário, como um clique — caso contrário, os navegadores a bloqueiam para evitar abusos.
Assim que um elemento entra em tela cheia, o navegador define o estado :fullscreen nele. Esse é o seu sinal no CSS: regras escritas sob :fullscreen se aplicam somente enquanto o elemento preenche a tela, e são revertidas automaticamente no momento em que o usuário sai (por exemplo, pressionando Esc).
Isso é útil quando o layout em tela cheia deve ser diferente do inline — um player de vídeo que oculta o chrome ao redor, uma galeria de imagens que vai de borda a borda, ou um slideshow que muda para um fundo escuro.
Os navegadores modernos suportam a pseudo-classe :fullscreen sem prefixo. Os prefixos legados -webkit- e -moz- estão amplamente obsoletos, e -ms- não é mais suportado. O atalho F11 do navegador coloca a janela inteira em tela cheia, mas não aciona o estado :fullscreen em um elemento específico — somente a Fullscreen API faz isso.
Especificação
Sintaxe
:fullscreen {
/* styles that apply only in fullscreen mode */
}Você também pode restringir a um elemento específico para que elementos não relacionados não sejam afetados:
.player:fullscreen {
background-color: #000;
}
/* descendants of the fullscreen element */
.player:fullscreen .controls {
display: flex;
}Como a tela cheia é ativada por script, você quase sempre combina o estilo :fullscreen com um botão que chama requestFullscreen(), como mostrado abaixo.
Exemplo do seletor :fullscreen
O container é pequeno quando está inline. Quando o botão o coloca em tela cheia, a regra :fullscreen muda sua cor, estica-o para preencher a tela e revela o texto anteriormente oculto.
<!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>Estilizando o backdrop
Quando um elemento entra em tela cheia, o navegador pinta um ::backdrop atrás dele que preenche qualquer área que o elemento não cobre (o padrão é preto). Você pode reestilizá-lo com o pseudo-elemento ::backdrop:
.example:fullscreen::backdrop {
background-color: #1c87c9;
}::backdrop também é usado por outros elementos da camada superior, como <dialog> aberto com showModal(), portanto é útil além da tela cheia também.
Problemas comuns
- Nada acontece no carregamento da página.
:fullscreensó corresponde após a execução derequestFullscreen(); não há uma forma de entrar em tela cheia apenas com CSS. - A solicitação deve vir de um gesto do usuário. Chamar
requestFullscreen()fora de um clique, pressionamento de tecla ou evento semelhante é rejeitado pelo navegador. - Use unidades de viewport para dimensionamento. Em tela cheia, o elemento deve normalmente ter
width: 100vw; height: 100vhpara realmente preencher a tela. F11não é a mesma coisa. Ele coloca a janela do navegador em tela cheia, não um elemento escolhido, e não aciona:fullscreen.
Seletores relacionados
- Seletor CSS :hover — estiliza um elemento ao passar o ponteiro sobre ele.
- Seletor CSS :focus — estiliza um elemento que tem foco de teclado.
- Seletor CSS :active — estiliza um elemento enquanto ele está sendo ativado.
- Propriedade CSS visibility — mostra ou oculta conteúdo, como usado no exemplo acima.