NOVIDADES NO HTML 5.1:
Enquanto o HTML 5.1 ainda estava em desenvolvimento, o W3C já começou a trabalhar num rascunho do HTML 5.2, que deverá ser lançado no final de 2017. Entretanto, aqui está uma visão geral de alguns dos novos recursos interessantes e melhorias introduzidas para a versão 5.1.
1
– UM OLHAR SOBRE O HTML 5.1:
A divulgação do padrão de HTML5 à dois anos foi importante na comunidade do desenvolvimento web. Não só porque veio divulgar uma impressionante lista de novos recursos, mas também porque foi a primeira grande atualização para HTML desde que o HTML 4.01 foi lançado em 1999.
Felizmente, não tivemos que esperar muito tempo para a próxima atualização de HTML. Em outubro de 2015, o W3C começou a trabalhar no rascunho do HTML 5.1 com o objetivo de corrigir alguns dos problemas deixados em aberto no HTML5. Depois de muitas tentativas, alcançou o estado de "Recomendação de Candidato" em junho de 2016, "Recomendação Proposta" em setembro de 2016 e, finalmente, uma Recomendação do W3C em novembro de 2016. Aqueles que seguiram esse desenvolvimento provavelmente perceberam que era uma viagem acidentada. Muitos dos recursos iniciais do HTML 5.1 foram descartados devido ao design deficiente ou à falta de suporte do navegador.
Enquanto o HTML 5.1 ainda estava em desenvolvimento, o W3C já começou a trabalhar num rascunho do HTML 5.2, que deverá ser lançado no final de 2017. Entretanto, aqui está uma visão geral de alguns dos novos recursos interessantes e melhorias introduzidas em 5.1. O suporte para o navegador ainda não é suficiente para esses recursos, mas vamos encaminhá-lo para pelo menos alguns navegadores que podem ser usados para testar cada exemplo.
2
– MENUS DE CONTEXTO COM ELEMENTOS “CONTEXT” E ”TOOLBAR”:
A nova versão introduziu dois elementos de menu: “context”
e “toolbar”. O primeiro é utilizado para apresentar o contexto dos menus,
utilizando o botão direito do rato, e o segundo para definir os componentes
desse menu. Neste processo de desenvolvimento, a toolbar foi descartada mas o
menu contexto ainda se mantém.
Ainda podemos utilizar a etiqueta “menu” para definir um ou
vários elementos “menuitem” e depois vinculá-los a outro elemento utilizando o
atributo “contextmenu”.
Cada “menuitem” pode ser de 3 tipos:
- checkbox – permite selecionar e retirar a seleção a uma opção.
- command – permite excluir uma ação através de um clique.
- radio – permite selecionar uma opção de um grupo
Um exemplo de menu contexto com item, a funcionar no Firefox, mas não funciona no Chrome.
3
– ELEMENTOS “DETAILS” E “SUMMARY”:
Os novos elementos “details” e “summary” implementam a capacidade de mostrar e ocultar um bloco de informações adicionais clicando em um elemento. Isso é algo que muitas vezes é feito através de JavaScript que agora pode ser feito usando o elemento “details” com um elemento “summary” dentro dele. Clicar no summary altera a visibilidade do restante conteúdo do elemento details.
Este exemplo funciona no Chrome e Firefox:
4
– MAIS ELEMENTOS DE INPUT:
Os dois primeiros permitem-lhe selecionar uma semana ou um mês. No Chrome, ambos são visualizados como um calendário suspenso que permite que selecione um determinado mês do ano ou uma semana. Quando acede aos valores de JavaScript, irá receber uma sequência de caracteres semelhante à seguinte: "2016-W43" para a entrada da semana e "2016-10" para a entrada do mês.
Inicialmente, os rascunhos de 5.1 introduziram duas entradas de data e hora - datetime e datetime-local. A diferença era que datetime-local sempre selecionava o tempo no fuso horário do utilizador, enquanto a entrada de data/hora também permitia selecionar um fuso horário diferente. Durante o desenvolvimento, o tipo de data e hora foi descartado e agora resta apenas o local de data e hora. A entrada datetime-local consiste em duas partes - a data, que pode ser selecionada de maneira semelhante à semana ou monthinput, e a parte do tempo, que pode ser digitada separadamente.
Funciona no Chrome mas não funciona no Firefox:
5
– IMAGENS RESPONSIVAS:
O HTML 5.1 inclui vários novos recursos para implementar
imagens responsivas sem o uso de CSS.
O
atributo de imagem srcset
O atributo srcset permite listar várias fontes alternativas
de imagem que variam consoante a densidade de pixels. Isso permite que o
navegador escolha uma imagem da qualidade apropriada para o dispositivo do utilizador
(determinada pela sua própria densidade de pixels, nível de zoom ou velocidade
da rede). Por exemplo, você pode querer fornecer uma imagem de menor resolução
para utilizadores com telefones pequenos em redes móveis mais lentas.
O atributo srcset aceita uma lista de imagens separada por
vírgulas cada uma com seu próprio modificador x, que descreve a proporção de
pixels (quantidade de pixels físicos em um pixel CSS) mais apropriada para cada
imagem. Um exemplo simples será:
<img src="images/low-res.jpg"
srcset="
images/low-res.jpg
1x,
images/high-res.jpg 2x,
images/ultra-high-res.jpg 3x" >
Nesse caso, se a proporção de pixel dos utilizadores for igual a 1, a imagem de baixa resolução será exibida, para 2, serão exibidos valores de alta resolução e para 3 e acima, será escolhida a ultra-alta resolução.
Como alternativa, você pode optar por exibir imagens de diferentes tamanhos em vez de diferentes proporções de pixels. Isso pode ser feito usando o modificador w:
<img src="images/low-res.jpg"
srcset="
images/low-res.jpg
600w,
images/high-res.jpg 1000w,
images/ultra-high-res.jpg 1400w" >
Neste caso, a imagem de baixa resolução é definida como sendo de 600px de largura, de alta resolução para ser de 1000px e ultra-alta de 1400px.
O atributo sizes
Você pode querer exibir imagens de forma diferente, dependendo do tamanho de tela do utilizador. Por exemplo, você pode mostrar uma série de imagens dispostas em duas colunas para telas de largura e dispostas em apenas uma para telas mais estreitas. Isso pode ser obtido usando o atributo sizes. Ele permite que você traduza a largura da tela para o espaço alocado para uma imagem e, em seguida, escolher a imagem apropriada usando o atributo srcset. Aqui está um exemplo:
<img src="images/low-res.jpg"
sizes="(max-width:
40em) 100vw, 50vw"
srcset="images/low-res.jpg
600w,
images/high-res.jpg 1000w,
images/ultra-high-res.jpg 1400w" >
O atributo sizes define a largura da imagem como 50% da largura da tela quando a largura da tela for maior que 40em ou 100% da largura quando menor ou igual a 40em.
O elemento picture
Se não for suficiente alterar o tamanho das imagens para cada tela e precisar de ter a capacidade de mostrar imagens completamente diferentes, então pode usar o elemento de imagem. Ele permite que você defina imagens com várias fontes para diferentes tamanhos de tela, envolvendo seu “img” com um elemento “picture” e especificando vários elementos filho “source”. O elemento “source” então age como a fonte de URLs para carregar as imagens.
<picture>
<source media="(max-width: 20em)" srcset="
images/small/low-res.jpg 1x,
images/small/high-res.jpg 2x,
images/small/ultra-high-res.jpg 3x "
>
<source media="(max-width: 40em)" srcset="
images/large/low-res.jpg 1x,
images/large/high-res.jpg 2x,
images/large/ultra-high-res.jpg 3x
" >
<img src="images/large/low-res.jpg">
</picture>
6
– VALIDAR FORMULÁRIOS COM “form.reportValidity()”:
HTML5 define o método form.checkValidity() que permite verificar as entradas de um formulário contra os validadores definidos e retorna um valor booleano como resultado. O novo reportValidity() é muito semelhante - ele também permite validar um formulário e recuperar o resultado, mas também relata os erros diretamente para o utilizador no navegador.
A entrada "Primeiro nome" deve ser marcada com um erro, uma vez que é obrigatório mas encontra-se vazio. Ao trabalhar como esperado, parece assim:
7
– ECRÃ TOTAL PARA FRAMES:
O novo atributo booleano allowfullscreen para Frames permite que você
controle se seu conteúdo que irá ser apresentado em tela cheia usando o método requestFullscreen
().
8
– CORREÇÃO ORTOGRÁFICA COM “element.forceSpellCheck()”:
Este novo método element.forceSpellCheck () permite que você acione a verificação ortográfica em elementos de texto. Este é também o primeiro recurso desta lista que ainda não está disponível em nenhum dos navegadores. Potencialmente, isso poderia ser usado para realizar verificação ortográfica em elementos que não foram editados diretamente pelo utilizador.
CONCLUSÃO:
Com estas novas alterações, será possível criar
menus de contexto e detalhes sem utilizar JS. Os novos elementos de input e
correção ortográfica são um bom melhoramento mas parece-me que as alterações mais
importantes serão as imagens responsivas e a validação dos formulários.
