API Fullscreen
Publicado em: 2012-07-16 — 14.329 visualizacoes
O primeiro Rascunho de Trabalho para a especificação denominada Fullscreen (tela cheia) foi publicado em 26/04/2012 pelo WHATCG (Web Hypertext Application Technology Community Group).
Trata-se de uma especificação destinada a definir uma API para a funcionalidade tela cheia para a plataforma web. Atualmente os navegadores Firefox, Chrome e Safari suportam os métodos e propriedades da API com uso de prefixos proprietários.
Essa matéria tem por objetivo apresentar a API descrevendo seus métodos e propriedades e mostrar um exemplo prático do seu funcionamento.
Afinal, para que uma API fullscreen se os navegadorees são capazes de apresentar a página em modo fullscreen quando o usuário pressiona a tecla F11?
A API estende a funcionalidade nativa do navegador possibilitando mostrar em modo tela cheia uma seção ou elemento da página isoladamente e não toda a página.
Métodos
- requestFullscreen
- Sintaxe:
el.requestFullscreen(); - Finalidade: Esse método destina-se a apresentar o elemento
eldo DOM em modo tela cheia. - exitFullscreen
- Sintaxe:
el.exitFullscreen(); - Finalidade: Esse método destina-se a retirar o documento do modo tela cheia.
Propriedades
- fullscreenElement
- Sintaxe:
document.fullscreenElement; - Finalidade: Essa propriedade retorna o elemento do documento que está em modo tela cheia. Se não houver um elemento em modo tela cheia retorna null
- fullscreenEnabled
- Sintaxe:
document.fullscreenEnabled; - Finalidade: Essa propriedade retorna true se o doocumento é capaz de mostrar elementos em modo tela cheia. Retorna false caso contrário.
Evento
- fullscreenchange
- Sintaxe:
document.addEventListener('fullscreenchange', function() {},false); - Finalidade: Esse evento ocorre sempre que que se entra ou se sai do modo tela cheia.
Pseudoclasse CSS
Quando um elemento ou seção de uma página entra em modo tela cheia é a ele atribuída uma pseudo classe denominada :fullscreen destinada a definir os parâmetros de estilização do conteúdo em modo tela cheia, tais como, dimensões, cores do fundo, posicionamento etc.
Prefixos proprietários
Na tabela a seguir apresentamos os prefixos proprietários para o modo Fullscreen nos navegadores que hoje o suportam.
| Standard | Chrome/Safari | Firefox |
|---|---|---|
| requestFullScreen() | webkitRequestFullScreen() | mozRequestFullScreen() |
| exitFullScreen() | webkitCancelFullScreen() | mozCancelFullScreen() |
| fullscreenEnabled | webkitFullscreenEnabled | mozFullScreenEnabled |
| fullscreenchange | webkitfullscreenchange | mozfullscreenchange |
| :full-screen | :-webkit-full-screen | :-moz-full-screen |
Página exemplo
Desenvolvi uma página exemplo para demonstrar a API fullscreen em ação. Consulte o código fonte da página para detalhes.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2012-07-16 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2012/07/16/api-fullscreen/trackback no seu site.
Como faço pra assim que a página carregar ela já ficar fullscreen direto, sem precisar de click?
Desde já, obrigado.
Esta nova opção é muito positiva para todos os webmasters. Resta saber aproveitá-la ao máximo.
Uma pena que a Mozilla novamente implementa um recurso com prefixos proprietários.