Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

API Fullscreen

Publicado em: 2012-07-16 — 8.981 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 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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 http://www.maujor.com/blog/2012/07/16/api-fullscreen/trackback no seu site.

3 comentários na matéria: “API Fullscreen”

  1. Sérgio PiresNo Gravatar disse:

    Como faço pra assim que a página carregar ela já ficar fullscreen direto, sem precisar de click?

    Desde já, obrigado.

  2. emidioNo Gravatar disse:

    Esta nova opção é muito positiva para todos os webmasters. Resta saber aproveitá-la ao máximo.

  3. Flávio AraújoNo Gravatar disse:

    Uma pena que a Mozilla novamente implementa um recurso com prefixos proprietários.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo