← Article précédent Article suivant →
Publié le 26 décembre 2016

Aujourd'hui nous allons voir ce qu'il y a de nouveau dans la nouvelle recommandation du langage HTML.

Introduction


Le World Wide Web Consortium (W3C) qui est une communauté internationale qui développe des standards pour l'évolution du Web a officialisé la version 5.1 du langage HTML. En effet le développement de cette spécification a débuté en décembre 2012 et a été validée en tant que recommandation par le W3C le 1er novembre 2016. Nous allons voir ensemble les ajouts importants de cette recommandation.

Les nouveautés


<picture> et srcset


Ceux-ci font plaisir à la bande passante de notre serveur car ils permettent de charger les images en fonction d'une taille d'écran. On utilise une media query sur l'élément fils "source" via l'attribut "media".
Dans le cas où un navigateur n'est pas compatible, alors on affiche une image par défaut via <img>.

Accéder à la démo.

<details> et <summary>


Plus besoin de JavaScript pour déplier un contenu, en effet <details> a pour but de représenter des informations non visibles par défaut, en cliquant, le contenu devient visible. <summary> est un enfant de <details>, lorsque <summary> est absent, alors "Détails" est affiché par défaut.
Il faut savoir que <details> peut être déplié par défaut via l'attribut "open".

Accéder à la démo.

<menuitem> et type="context"


Ceux-ci permettent d'ajouter des fonctionnalités au menu context de votre navigateur (clic droit). En effet, il est possible de lier un élément de notre page à un menu personnalisé via "contextmenu" et <menu type="context">.
En faisant un clic droit sur l'élément ayant l'attribut "contextmenu", un menu personnalisé s'affiche, ici nous pouvons voir qu'on a une checkbox et un "menuitem" qui redirige sur mon site, remarquons également l'attribut "icon" sur ce dernier.

N.B. en date du 22/12/2016, cette fonctionnalité est disponible que sur Firefox.

Accéder à la démo.

Types pour les champs de formulaires : week, month et datetime-local


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

Accéder à la démo.

Autres


Bien entendu, il y a d'autres changements comme l'amélioration de l'API "requestAnimationFrame" pour faire des animations plus efficaces, la suppression de l'attribut "multiple" pour les inputs de type "range", l'ajout de la méthode "reportValidity()" qui retourne immédiatement à l'affichage d'une page si un formulaire est valide ou non, etc.

Vers HTML 5.2


Le W3C travaille déjà sur la prochaine version et a sorti le premier brouillon public le 18 août 2016. Ils aimeraient passer cette version en recommandation, fin 2017.

En savoir plus


Hep, hep ! Uber Like


Pour ceux qui me suivent sur Twitter ou font attention au statut sur mon site (maaaais si le message qui se trouve dans l'en-tête de l'accueil) le savent déjà mais je suis en train de développer un Uber Like via Node.js pour le back et Angular 2 pour le front. Le code est sur GitHub : https://bit.ly/uberlike-app.

Ah et aussi j'espère que vous avez passé un bon Noël. En tout cas je vous souhaite une bonne année par avance, j'ai plusieurs idées de projets pour vous en 2017 !

Retrouvez-moi sur les réseaux sociaux