Remplacer JavaScript par du HTML seul

• Présentation de méthodes récentes pour remplacer dans le web des fonctionnalités dépendantes de JS par du HTML/CSS
• Mise en œuvre d’accordéons, d’autocomplétion, de modales et de navigation hors écran à l’aide d’éléments standard comme details·summary, datalist et popover
• Cette approche réduit le téléchargement, l’évaluation et l’usage mémoire, ce qui améliore les performances et l’expérience utilisateur
• Pour chaque fonctionnalité, des exemples CodePen, documents MDN et informations de compatibilité navigateur sont fournis
• Il faut réserver JS aux zones réellement nécessaires et exploiter activement les fonctionnalités avancées de HTML/CSS

---

Remplacer des fonctionnalités JS par HTML et CSS

• Pendant longtemps, JavaScript a pris en charge des fonctionnalités impossibles à implémenter avec HTML et CSS
  • Mais à mesure que HTML et CSS se sont enrichis, certaines fonctionnalités JS peuvent être remplacées par des technologies web natives
• Comme JS doit être téléchargé, décompressé, évalué et conservé en mémoire, il est plus efficace de basculer vers HTML/CSS chaque fois que c’est possible
• L’idée proposée est de concentrer JS sur la logique complexe et de confier les contrôles d’interface simples à HTML/CSS

Accordéon / panneau de contenu extensible

• Les éléments details et summary permettent d’implémenter un accordéon sans JS
  • Le contenu peut être ouvert et fermé par clic, et l’état par défaut se définit avec l’attribut open
  • En utilisant le même attribut name, un seul panneau peut rester ouvert
• Il est aussi possible de le styliser avec CSS ou de piloter l’ouverture/fermeture avec JS
• Ressources associées : documentation MDN sur details, exemple CodePen, tableau de compatibilité navigateur

Champ de saisie avec suggestions d’autocomplétion

• La combinaison de input et datalist permet de créer une liste déroulante filtrée automatiquement
  • Lors de la saisie, la liste de suggestions est filtrée automatiquement
  • En plus du texte, différents types de saisie comme number ou time sont pris en charge
• Firefox ne prend actuellement en charge que les champs de type texte, et il existe des limites d’accessibilité sur mobile
• Ressources associées : documentation MDN sur datalist, tutoriel SitePoint, tableau de compatibilité navigateur

Modale / popover

• Les attributs popover et popovertarget permettent de créer des modales et popovers sans JS
  • Trois modes sont proposés : auto, hint et manual
  • auto se ferme via un clic à l’extérieur ou avec Échap, tandis que manual ne se ferme que manuellement
• Firefox et iOS ne prennent pas en charge le mode hint
• Ressources associées : documentation MDN sur popover, blog Chrome, exemple CodePen, vidéo sur l’accessibilité

Navigation / contenu hors écran

• La fonctionnalité popover permet aussi d’implémenter un menu de navigation hors écran
  • L’élément nav apporte une sémantique adaptée, et translate en CSS permet de faire entrer ou sortir le menu de l’écran
  • Le menu se ferme lors d’un clic extérieur, et popover="manual" permet de configurer une fermeture manuelle
  • Le pseudo-élément ::backdrop permet d’appliquer un fond semi-transparent
• Ressources associées : API Popover de MDN, blog Chrome, exemple CodePen

Conclusion

• Il faut reconnaître la puissance de JS, mais ne l’utiliser que là où c’est nécessaire
• Les avancées récentes de HTML/CSS ont fait émerger de nombreuses alternatives sans JS
• Davantage d’exemples sont disponibles dans le billet de blog de l’auteur, “Replace JS with No-JS or Lo-JS Options”
• Accent mis sur l’amélioration de l’expérience utilisateur grâce à la réduction de JS et à l’optimisation des performances