10 novos recursos do HTML 5.1 e como usá-los IRL

A especificação HTML tem um grande vistoria um par de semanas atrás, quando o W3C publicou o seu nova recomendação HTML 5.1 em novembro de 2016. Em seu recente post no blog, o W3C chamou a nova versão principal de padrão-ouro, como HTML 5.1 nos fornecer novas maneiras de como podemos usar HTML para criar experiências web mais flexíveis.

Neste artigo, vamos dar uma olhada em seus novos recursos que você pode usar sem tocar em JavaScript, no entanto, as melhorias do fundo JavaScript também são notáveis, como você pode ver no log oficial de alterações.

Note que atualmente nem todos os navegadores suportam todos esses recursos, então não esqueça de verifique o suporte ao navegador antes de usá-los na produção. Se você está interessado no desenvolvimento adicional do padrão HTML, você pode conferir o rascunho de trabalho do HTML 5.2 também.

1. Definir vários recursos de imagem para design responsivo

No HTML 5.1, você pode usar tag junto com o srcset atributo para fazer seleção de imagem responsiva possível. o tag representa um recipiente de imagem que permite aos desenvolvedores declarar diferentes recursos de imagem a fim de se adaptar ao UAO tamanho da janela de visualização, a densidade de pixels da tela, o tipo de tela e outros parâmetros usados design responsivo.

o tag em si não exibe nada, funciona apenas como contexto para os vários recursos de imagem. Você precisa declarar o recurso de imagem padrão como o valor do src atributo do tag e recursos de imagem alternativa vá dentro do srcset atributos do e elementos.

Exemplo de código:

2. Mostrar ou ocultar informações extras

Com o

e

tags, você pode adicionar informações estendidas para uma peça de conteúdo. A informação extra não é mostrado por padrão, mas se os usuários estiverem interessados, eles tem a opção de dar uma olhada. Em seu código, você deveria Coloque o

tag dentro

. Depois de

tag você pode adicione a informação extra você quer esconder.

Exemplo de código:

 
 
Mensagem de erro
 
 
Não foi possível terminar o download deste vídeo.
 
 
Nome do arquivo:
seuarquivo.mp4
 
Tamanho do arquivo:
100 MB
 
Duração:
00:05:27
 
 
 
 

É assim que este exemplo de código se parece no Firefox 50.0.2:

3. Adicionar funcionalidade ao menu de contexto do navegador

Com o elemento e sua type = "contexto" atributo, você pode adicionar funcionalidade personalizada ao menu de contexto do navegador. Você precisa atribuir como o elemento filho do

tag. o identidade do elemento precisa carregam o mesmo valor que o menu contextual atributo do elemento ao qual queremos adicionar o menu de contexto (que é o elemento no exemplo abaixo).

Exemplo de código:

Clique direito me

o tag pode tem três tipos diferentes, "checkbox", "comando" (ao qual você precisa adicionar uma ação com JavaScript) e rádio. É possível adicionar mais de um item de menu a um menu de contexto. suporte ao navegador para este recurso é ainda não é muito bom. O Chrome 54 não oferece suporte e o Firefox 50 permite apenas a presença de um menu de contexto extra. Abaixo você pode ver como o exemplo de código funciona no Firefox 50.

4. Cabeçalhos e rodapés de ninho

HTML 5.1 permite que você cabeçalhos e rodapés de ninho se cada nível é contido no conteúdo de seccionamento. A nota abaixo é uma captura de tela dos documentos do W3C e aconselha os desenvolvedores sobre o modo correto de aninhamento de cabeçalho e rodapé.

Esse recurso pode ser útil se você quiser adicionar cabeçalhos elaborados para elementos de corte semântico, tal como

e

. O exemplo de código abaixo cria uma barra lateral dentro do cabeçalho, o