Categories: html5todas

API Fullscreen

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 el do 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.

Maujor

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.

Share
Published by
Maujor

Recent Posts

Teste seu conhecimento #20

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…

7 anos ago

Teste seu conhecimento #19

Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…

10 anos ago

JavaScript bubbling e capturing

Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…

10 anos ago

HTML5 – W3C versus WHATWG

HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…

10 anos ago

Seria esse o futuro das imagens responsivas?

Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…

11 anos ago

BrazilJS Conf 2013

Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…

11 anos ago