0 Compartilhamentos 149 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

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

Promoções de Jogos do Final de Semana (14/12)

Carlos L. A. da Silva - 14 de dezembro de 2018

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

Rastros Digitais: A sua vida está na Internet
Artigos
9 visualizações
Artigos
9 visualizações

Rastros Digitais: A sua vida está na Internet

Redação - 14 de dezembro de 2018

Tudo aquilo que fazemos deixa marcas e, na internet, não é diferente. Saiba mais sobre os rastros digitais e os cuidados que você deve tomar!

IoT: Nossa Casa Automatizada // Unboxing Google Home Hub – Vlog #83
Vídeos
1,655 compartilhamentos6,814 visualizações
Vídeos
1,655 compartilhamentos6,814 visualizações

IoT: Nossa Casa Automatizada // Unboxing Google Home Hub – Vlog #83

Thais Cardoso de Mello - 13 de dezembro de 2018

Apresentamos Google Home Hub! Confira e descubra o que esse gadget pode fazer por você.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Retrospectiva 1998!
Artigos
19 visualizações
19 visualizações

Retrospectiva 1998!

Carlos L. A. da Silva - 13 de dezembro de 2018
RegExp // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,811 visualizações
1,655 compartilhamentos6,811 visualizações

RegExp // Dicionário do Programador

Thais Cardoso de Mello - 10 de dezembro de 2018
Promoções de Jogos do Final de Semana (07/12)
Notícias
26 visualizações
26 visualizações

Promoções de Jogos do Final de Semana (07/12)

Carlos L. A. da Silva - 7 de dezembro de 2018
Entenda o formato de imagem WebP
Artigos
21 visualizações
21 visualizações

Entenda o formato de imagem WebP

Carlos L. A. da Silva - 6 de dezembro de 2018