0 Compartilhamentos 214 Views

Conheça o HTML 5.2

23 de fevereiro de 2018

Em 14 de Dezembro passado, a W3C finalmente soltou a versão definitiva da mais recente atualização do HTML, o HTML 5.2 e já iniciou imediatamente os trabalhos nos primeiros rascunhos de seu sucessor, o HTML 5.3.

Embora o HTML 5.2 não traga mudanças drásticas à forma como se produzem páginas em HTML (e tampouco era essa a proposta), ele introduz algumas novidades importantes enquanto torna obsoletas e inválidas outras práticas. Vamos dar uma olhada nesse Artigo nas alterações das especificações oficiais da W3C.

Novidades do HTML 5.2

Uma nova forma de fazer modais

De todas as novidades implementadas com a nova versão do HTML, a introdução do elemento<dialog> é de longe a mais interessante. Ele funciona como uma nova ferramenta para a criação de modais dentro da página web, desta vez de forma nativa.

Janelas modais são um recurso antigo no desenvolvimento web, mas sempre foram realizados através da extrapolação de outros elementos e exigiam uma quantidade de código elevada para funcionarem, sem oferecer uma alternativa semântica para navegadores não-visuais e outros cenários. Com a chegada do <dialog>, desenvolvedores podem implementar uma solução nativa e prática:

Por padrão, a caixa de diálogo fica oculta. Para visualizá-la, deve ser ativado o atributo open. Esse comando pode ser invocado através dos métodos show() e close(), por JavaScript:

Por enquanto, o suporte em desktops para o elemento <dialog> está limitado ao Google Chrome (a partir da versão 64 do navegador), enquanto o Firefox oferece somente suporte parcial, com previsão de implementação no futuro próximo. Nos dispositivos móveis, o elemento tem suporte pleno no Chrome, no navegador padrão do Android e no Samsung Internet, sem previsão de suporte para o Safari.

Múltiplos elementos principais

Anteriormente, cada página web só poderia conter um elemento <main> ou seria considerada inválida. A decisão está semanticamente correta, uma vez que main significa “principal” em Inglês e ele precisa ser único para a página ou ele não seria o principal. Entretanto, essa característica não era satisfatória para todos os cenários e, a partir do HTML 5.2, é possível introduzir mais de um elemento <main> no mesmo documento, desde que apenas um esteja visível de cada vez.

Essa mudança facilita a vida de desenvolvedores que criam aplicações que utilizam uma única página mas possuem diferentes estados e conteúdos:

Vale ressaltar que o uso explícito do atributo hidden é a única forma de ocultar de forma válida os outros elementos <main> presentes na página. O uso de display: none; ou visibility: hidden não é considerada uma forma válida de ocultar os outros elementos <main> de acordo com as especificações da W3C.

APIs de pagamentos em iframes

A  Payment Request API foi criada pela W3C como uma forma de padronizar os sistemas de confirmação de pagamento na web, removendo a necessidade de diferentes desenvolvedores precisarem criar diferentes tipos de formulários e colocando essa funcionalidade direto no navegador. Inicialmente, não era possível invocar esse recurso a partir de um <iframe> embutido no documento. Com o HTML 5.2, a API já pode ser utilizada a partir de um <iframe>.

Com o atributo allowpaymentrequest, o desenvolvedor pode utilizar soluções de pagamento embutidas em um <iframe> a partir das páginas que eles controlam:

Estilos no corpo da página

Embora definições de estilo sejam normalmente inseridas no <head> dos documentos, a partir do HTML 5.2 se torna válido definir estilos dentro do elemento <body> também, embora a própria W3C não recomende a prática.

Apesar da estrutura ser considerada válida, ela pode gerar uma queda de performance na experiência web, principalmente quando a definição de estilo acontece depois do elemento a qual se aplica. No exemplo acima, a cor azul seria aplicada a um parágrafo que já foi interpretado pelo navegador, gerando uma nova renderização do conteúdo.

Cabeçalhos em legendas

A partir do HTML 5.2, é possível introduzir cabeçalhos (<h1>até <h6>) em elementos <legend> de formulários. Anteriormente, só era possível utilizar texto puro nesse tipo de legenda para campos de formulários. Agora, desenvolvedores podem elaborar melhor o conteúdo:

O que se torna obsoleto ou inválido com o HTML 5.2

A partir dessa alteração das especificações do W3C, algumas práticas se tornaram obsoletas ou inválidas na linguagem.

O elemento <keygen>, anteriormente utilizado para gerar chaves públicas em formulários foi removido das especificações.

Os elementos <menu> e <menuitem> também não fazem mais parte das especificações do HTML. Eles eram utilizados até então para a criação de menus de navegação ou contexto.

A partir de agora, o elemento <p> só pode conter elementos inline como filhos válidos. Ou seja, elementos dos tipos inline-blockinline-table ou block não podem mais serem aninhados dentro de um elemento <p> de forma semanticamente válida.

Dois Strict Doctypes foram abolidos com o HTML 5.2, referentes aos obsoletos HTML 4.01 e XHTML 1:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Você pode se interessar

TypeScript // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,807 visualizações
Vídeos
1,655 compartilhamentos6,807 visualizações

TypeScript // Dicionário do Programador

Thais Cardoso de Mello - 18 de março de 2019

TypeScript é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

Promoções de Jogos do Final de Semana (15/03)
Notícias
9 visualizações
Notícias
9 visualizações

Promoções de Jogos do Final de Semana (15/03)

Carlos L. A. da Silva - 15 de março de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista
Vídeos
1,655 compartilhamentos6,811 visualizações
Vídeos
1,655 compartilhamentos6,811 visualizações

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista

Thais Cardoso de Mello - 14 de março de 2019

Batemos um papo muito divertido e informativo com o Igor Oliveira (do canal Programador BR).

Deixe um Comentário

Your email address will not be published.

Mais publicações

World Wide Web completa 30 anos!
Notícias
11 visualizações
11 visualizações

World Wide Web completa 30 anos!

Carlos L. A. da Silva - 12 de março de 2019
Ada Lovelace: o cérebro que nunca morre
Artigos
132 visualizações1
132 visualizações1

Ada Lovelace: o cérebro que nunca morre

Carlos L. A. da Silva - 12 de março de 2019
Scrum // Dicionário do Programador
Vídeos
13 visualizações
13 visualizações

Scrum // Dicionário do Programador

Thais Cardoso de Mello - 11 de março de 2019