Web - découvrez le 'bon HTML' et économisez du JS et du CSS

Conférence présentée par Gaël Poupard

Son site : ffoodd.fr. Et.. son slide du DevFest est par-ici : ffoodd.fr/devfest 😍

Dans cette conf, Gaël nous a expliqué que maintenant, on peut faire beaucoup de choses en HTML alors qu’historiquement, on le faisait en Javascript.

Avant, c’était en Javascript parce qu’on ne pouvait par faire autrement.

Pour être plus green, avant de concevoir quelque chose, il faut voir si c’est gérable :

• juste en HTML
• si non, on ajoute du CSS en plus
• si ça ne suffit toujours pas, on ajoute du javacript
• ensuite on regarde du côté de aria
• puis du Polyfill
• et à la fin seulement, on pense au framework.

Avec le HTML5, des possibilités sont venues s’ajouter à ce qu’il y avait dans le passé. Ainsi, on peut utiliser <datalist> pour proposer des suggestions dans l’input. Par exemple, si on fait un color-picker, on peut suggérer des couleurs. Le <datalist> fonctionne avec de nombreuses choses. C’est juste Firefox qui n’accepte que le type="text".

L’auto-remplissage, ou autocomplete est à utiliser le plus possible : il aide l’utilisateur. En plus, il améliore l’accessibilité et fait partie des critères RGAA.

pattern permet de remplacer les masques de saisie. Pour éviter l’exfiltration de données et la correction orthographique, on va ajouter spellcheck="false".

autocorrect="false" et autocapitalize="false" éviteront quant à eux l’autocorrection par le navigateur. Si le navigateur ne connaît pas, ce n’est pas grave, car il ne s’en sert tout simplement pas.

inputmode est génial pour les smartphones, car il permet de déterminer quel clavier afficher. C’est plutôt bien d’avoir le clavier numérique affiché lorsqu’on vous demande de saisir votre numéro de téléphone ! ;-)

<details><summary></summary></details> : c’est super pour afficher/masquer le texte qui se trouve dans un élément. Par contre, si on l’utilise pour faire un accordéon, il faudra lui ajouter du javacript pour l’accessibilité.

Parmi les choses récentes, on peut découvrir <form method="dialog"> qui provoquera l’ouverture de la fenêtre modale <dialog>. Il y a juste besoin de l’action JS pour le clic sur le bouton qui ouvrira la modale. Attention toutefois : c’est à utiliser pour l’instant avec modération. Ce n’est pas encore supporté partout et il peut encore y avoir des évolutions avec le code.

<output> permet d’associer le contenu de plusieurs <input>. Il faudra lui ajouter le role="status". Il permet par exemple de mettre à jour un total.

<progress>, comme son nom l’indique, permet d’avoir une barre de progression, de même que <meter> permettra d’indiquer un niveau.

<kbd>, <var> et <samp> sont très pratiques pour écrire de la documentation de code !

On peut également aller découvrir les autres attributs universels tels que <template>, <slot>,<is>, <part>, <exportparts, data-*…

Avec contenteditable on peut s’amuser à faire des choses éditables, comme du live coding !

A noter : Chrome, Edge, Safari et Firefox sont en train de travailler ensemble pour les futures améliorations des navigateurs. 🥳 Pour en savoir +, vous pouvez consulter interop2022.

et… un article ne suffit pas à lister tout ce que Gaël nous a montré ! Je vous invite donc à aller consulter ses slides qui sont accompagnés des liens vers les différentes choses qu’il nous a présentées.