Nouveautés dans les éléments HTML natifs

Si vous consultez la liste des éléments, à moins d’être expert vous pouvez être à peu près sûr d’en découvrir un certain nombre. (Les plus fascinants pour moi ? <ruby> et kbd.)

Si on étend la liste à tous les éléments proposés pour ajout à la norme HTML, elle sera bien plus longue. Et cela soulève des débat passionnants : quel pattern mérite d’être un élément à part entière, ou juste un attribut d’un élément existant, ou juste un Composant Web fourni par une bibliothèque ?

Plus fondamentalement la question : quel sont les mots de base du langage qu’est le web ? Est-ce qu’un toaster est suffisamment commun et standardisé pour mériter un élément ? et un bloc de spoiler ? Comme tout langage, il faut partir des usages réels ; le groupe de travail OpenUI a d’ailleurs fait un travail impressionnant de recensement en ce sens. Mais il faut aussi ajouter une dose de prescription : y a-t-il vraiment besoin d’ajouter une mauvaise idée telle qu’un accordéon exclusif sous prétexte qu’on peut trouver quelques occurrences ? <⁠spoiler⁠> Pour moi, non <⁠/⁠spoiler⁠>.

Bref, voici un tour d’horizon, dans la lignée de mon précédent article orienté CSS.

§︎ Ancre pour le titre : Éléments récemment ajoutés dans les navigateurs modernes Éléments récemment ajoutés dans les navigateurs modernes

Sauf erreur de ma part il y en a deux.

Recherche

Similaire à un élément <nav> mais pour un composant de recherche, l’élément <search> ajoute un point de repère à la page (landmark, utile notamment pour les technologies d’assistance), comme si on ajoutait role=search à un conteneur. À tester pour vérifier si c’est bien reconnu par les lecteurs d’écran, donc il faut mieux doublonner <search role="search"> comme pour main.

Popin

L’élément dialog permet d’afficher un panneau modal au sein d’une page, avec juste un peu de Javascript et de bons comportements par défaut (notamment la navigation au clavier). Exemple :

Bonjour ! je suis une boite de dialogue

Ouvrir la boite de dialogue

Dispo depuis longtemps sur Chrome, mais très lent d’adoption car il posait plein de problèmes d’accessibilité, dont la plupart ont été résolus.

Accordéon

Allez je triche et j’ajoute le pas tout jeune mais méconnu élément <details>, pratique pour ajouter un accordéon basique si vous n’avez pas besoin de personnalisation. Exemple :

Membres des Beatles

• John Lennon
• Paul McCartney
• George Harrison
• Ringo Starr
• Yoko Ono

§︎ Ancre pour le titre : Pas encore disponibles Pas encore disponibles

Interrupteur (switch, toggle)

Il semble y avoir deux propositions différentes : l’une pour qu’un interrupteur soit un type particulier de case à cocher, l’autre pour créer un nouvel élément plus complet et personnalisable. Le cas d’usage étant de représenter des paramètres à prise d’effet instantanée, à l’opposé des cases à cocher d’un formulaire déclaratif.

<input type="checkbox" switch>

<!-- VERSUS -->

<switch>
  <track>
    <toggled></toggled>
    <untoggled></untoggled>
  </track>
  <thumb></thumb>
</switch>

Menu déroulant stylable

Il y avait une proposition pour créer un nouvel élément, indépendant du <select> actuel qui serait conservé pour des raisons de rétro-comptabilité : selectmenu ou selectlist.

Finalement la proposition parait être d’ajouter un attribut au <select> et qui ouvrirait plein de possibilités de personnalisation.

Portail

Permet d’embarquer une version non-interactive d’une page dans une autre page, typiquement pour afficher une prévisualisation de la page au clic sur un lien.

À ne pas confondre avec <fencedframe>, qui est en gros la version moderne et sécurisée du bon vieux iframe.

Autocomplétion

L’élément datalist étant très limité, laissez-moi vous présenter le futur potentiel élément <combobox>.

Modèle

Mentionnons aussi rapidement <model>, utilisé pour afficher des modèles 3D et standardiser certains comportements (interactivité, etc.). C’est la partie émergée d’une initiative plus large pour apporter la réalité virtuelle et augmentée sur le web.

§︎ Ancre pour le titre : Bonus : popover Bonus : popover

Techniquement ce n’est pas un élément mais un attribut et une API mais Firefox vient de rejoindre les navigateurs compatibles et ça s’annonce sacrément utile. La fonctionnalité permet d’ajout un panneau non-modal en gérant finement le positionnement ainsi qu’en facilitant la gestion de la fermeture, de la navigation au clavier et du z-index.