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.
el.requestFullscreen();
el
do DOM em modo tela cheia.el.exitFullscreen();
document.fullscreenElement;
document.fullscreenEnabled;
document.addEventListener('fullscreenchange', function() {},false);
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.
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 |
Desenvolvi uma página exemplo para demonstrar a API fullscreen em ação. Consulte o código fonte da página para detalhes.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
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.