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:


 

Cabeçalho do modal

Conteúdo do modal, podendo incluir texto, imagens, links, vídeos etc.

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:





Cabeçalho do modal

Conteúdo do modal, podendo incluir texto, imagens, links, vídeos etc.

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:

Conteúdo, conteúdo...
Outro conteúdo, conteúdo...
Outro conteúdo, conteúdo...

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: