O primeiro rascunho do trabalho para a especificação denominada Fullscreen (tela cheia) foi publicado no dia 26 de abril deste anos 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.

Esse artigo 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 (como dimensões, cores do fundo, posicionamento).

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.

***

Oferta exclusiva para os leitores iMasters deste artigo: todos os livros do Maujor com 25% de desconto no site da Novatec Editora! Insira o código promocional maujor25 no carrinho de compras para gerar o desconto. (Válido até 18/09/2012)