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

Vantagens na utilização do WordPress
Artigos
8 visualizações
Artigos
8 visualizações

Vantagens na utilização do WordPress

Carlos L. A. da Silva - 20 de setembro de 2018

Uma hospedagem com um sistema de gerenciamento de conteúdo pode ser a melhor solução para a sua necessidade e a combinação da plataforma WordPress com o um serviço de hospedagem pensado nessa plataforma é a nossa melhor sugestão.

Manifesto Ágil: Uma Discussão sobre Aprendizado em Equipes
Artigos
389 compartilhamentos7,550 visualizações
Artigos
389 compartilhamentos7,550 visualizações

Manifesto Ágil: Uma Discussão sobre Aprendizado em Equipes

Plataformatec - 20 de setembro de 2018

Caso você tenha assistido alguma palestra sobre ágil na sua vida ou participado de algum treinamento sobre o assunto, é bem provável que tenha se deparado com o conceito de Shu Ha Ri. Para quem não conhece, o nome tem origem no Aikido e foi introduzido no ambiente de desenvolvimento de software por Alistair Cockburn, […]

Evento Seniortec Experience vai debater tendências da área de Desenvolvimento e TI
Notícias
9 visualizações
Notícias
9 visualizações

Evento Seniortec Experience vai debater tendências da área de Desenvolvimento e TI

Carlos L. A. da Silva - 18 de setembro de 2018

Décima edição do evento acontece no dia 21 de setembro (6.ª feira), em Blumenau (SC), e o Código Fonte vai estar lá para conferir!

Deixe um Comentário

Your email address will not be published.

Mais publicações

20 anos de Google
Artigos
10 visualizações
10 visualizações

20 anos de Google

Carlos L. A. da Silva - 17 de setembro de 2018
Promoções de Jogos do Final de Semana (14/09)
Notícias
15 visualizações
15 visualizações

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

Carlos L. A. da Silva - 14 de setembro de 2018
Jogos independentes: o segredo do sucesso não existe mas…
Artigos
20 visualizações
20 visualizações

Jogos independentes: o segredo do sucesso não existe mas…

Carlos L. A. da Silva - 12 de setembro de 2018
Como blindar sua conta no Twitter contra bots
Dicas
17 visualizações
17 visualizações

Como blindar sua conta no Twitter contra bots

Carlos L. A. da Silva - 10 de setembro de 2018