Le blog

Le W3C (World Wide Web Consortium) à officialisé le 1er novembre 2016 la version 5.1 du HTML. Le développement de cette version 5.1 avait débuté le 17 décembre 2012 et été validé le 1er novembre 2016. Nous allons voir dans ce post les principales nouveautés disponibles avec la version 5.1.

Tout d'abord vous pouvez accéder ici à un tableau qui récapitule les nouveautés et les améliorations sur les anciens composants.

Les nouveautés

srcset et <picture>

Cette nouveauté va faire plaisir au économe de la bande passante. En effet cette fonctionnalité va vous permettre de définir l'affichage d'une image spécifique en fonction de la résolution de l'écran du client.

<picture>
  <source media="(max-width: 480px)"
            srcset="http://blog.netapsys.fr/logo-small.jpg">
  <source media="(max-width: 640px)"
            srcset="http://blog.netapsys.fr/logo-medium.jpg">
  <source media="(max-width: 1024px)"
            srcset="http://blog.netapsys..fr/logo-large.jpg">
  <img src="http://blog.netapsys.fr/logo-large.jpg" alt="Netapsys">
</picture>

La condition de la taille est définie par l'attribut "media" qui aura pour valeur des media queries.

On peut donc définir différentes images selon la résolution et en définir une par défaut à afficher si aucune résolution ne rentre dans le scope pris en compte.

Nouveaux types pour les input :

• week

<input type="week"> permet de sélectionner une semaine spécifique pour une année donnée sous la forme : numéro de la semaine / année.

• month

<input type="month"> permet de sélectionner un mois spécifique pour une année donnée sous la forme de : mois / année.

• datetime-local

<input type="datetime-local"> permet de sélectionner une date spécifique sous la forme : jour / mois / année / heure / minute.

Menu contextuel (uniquement sur firefox)

Cette nouvelle fonctionnalité va vous permettre de définir un menu en fonction de l'utilisateur, donc un menu contextuel. Il vous sera ainsi possible de rajouter des éléments à afficher dans le menu lors d'un clic droit sur un élément HTML de la page. Ceci ce traduit par l'utilisation de la balise <menu> avec l'attribut "type" qui aura pour valeur "context".

<p contextmenu="custom-menu">
  Faites un clic droit sur ce paragraphe pour ouvrir le menu personnalisé, fonctionne uniquement sur firefox
</p>

<menu type="context" id="custom-menu">
  <menuitem type="checkbox" checked="true">Je suis une checkbox</menuitem>
  <menuitem type="command" icon="https://blog.netapsys.fr/wp-content/themes/netapsys/images/logo_netapsys_sodifrance.png" onclick="window.open('https://blog.netapsys.fr', 'shareWindow');">Page d'accueil</menuitem>
</menu>

Une petite démo sera plus compréhensible ici

Details et summary

Avec ces nouvelles balises, fini l'utilisation du Javascript pour afficher et masquer du contenu. La balise <details> représentera les informations non visibles par défaut, puis en cliquant, le contenu se déroule et devient visible. Attention si la balise <summary> est absente alors le contenu de <details> sera affiché par défaut

<details>
   <summary>
    On aime le Lorem :)
  </summary>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum iaculis leo, quis convallis nibh euismod a. Pellentesque suscipit venenatis pretium. Morbi cursus urna sed efficitur condimentum. Ut id aliquet ante. Aliquam maximus dapibus lacinia. Pellentesque viverra dui in massa venenatis laoreet. Phasellus convallis sit amet orci sed convallis. Aenean ac magna erat. Nullam lacinia libero sapien, quis interdum velit ullamcorper quis. Quisque interdum id elit quis vulputate. Quisque urna nisl, gravida id tincidunt vel, finibus a magna. Maecenas dignissim est sit amet erat tristique, ac laoreet turpis auctor. Curabitur interdum risus ut ultrices ultrices. In semper tincidunt tincidunt. Duis imperdiet dignissim lorem eu accumsan.
</details>

Petite demo ici

sources :

https://www.grafikart.fr/blog/w3C-html-5-1

https://www.louistiti.fr/nouveautes-html-5-1/55

https://www.w3.org/TR/html/