Vous n’avez pas besoin de JavaScript pour ça

Principe fondamental du développement web : le principe du moindre pouvoir

• L’un des principes fondamentaux du développement web, le « principe du moindre pouvoir », consiste à choisir le langage de plus bas niveau adapté à l’objectif visé.
• Parmi HTML, CSS et JS, HTML est à privilégier en premier, puis CSS, et enfin JS.
• JS est le plus polyvalent, mais il comporte des risques comme l’échec du chargement, une consommation supplémentaire de ressources et des problèmes d’accessibilité.

Commutateur personnalisé

• Lorsqu’il faut implémenter un commutateur personnalisé à la place d’une case à cocher classique pour des raisons de design, il est possible de le faire en HTML et CSS avec la pseudo-classe :checked, sans recourir à JS.
• Le navigateur associe automatiquement l’élément d’entrée situé à l’intérieur d’un label et le rend cliquable, ce qui permet une fonction de bascule sans gestionnaire JS supplémentaire.

Fonction d’autocomplétion native : datalist

• Au lieu de JavaScript, on peut utiliser datalist, une fonctionnalité intégrée du navigateur, pour afficher et filtrer automatiquement les options à mesure que l’utilisateur saisit du texte.
• L’utilisateur peut entrer la valeur de son choix ou cliquer sur l’icône de liste déroulante ajoutée par le navigateur pour voir toutes les options.

Sélecteur de couleur natif

• Au lieu d’un sélecteur de couleur complexe en JS, on peut utiliser un sélecteur de couleur natif implémenté en une seule ligne de HTML.
• Dans les navigateurs basés sur Chromium, une fonction supplémentaire permet de choisir une couleur n’importe où à l’écran.

Accordéon

• Les éléments details et summary permettent de masquer du contenu jusqu’à ce que l’utilisateur en ait besoin et d’améliorer la structure de la page.
• L’attribut open permet de laisser l’un des éléments de l’accordéon ouvert par défaut.

Modale interactive

• L’élément dialog permet d’implémenter une modale pour informer l’utilisateur ou lui demander une saisie.
• JS est utilisé pour ouvrir la modale, mais tout le reste est géré nativement par HTML et CSS.

Conclusion

• Cet article montre qu’on peut créer de meilleurs sites web en utilisant moins de JS et en tirant parti des fonctionnalités de CSS et HTML.
• Il est important de tester de nouvelles approches d’implémentation en tenant compte de l’accessibilité.

Avis de GN⁺

• Le point le plus important de cet article est qu’en développement web, on peut améliorer les performances et l’accessibilité en s’appuyant le moins possible sur JS et en exploitant au maximum les capacités de HTML et CSS.
• Ce sujet est intéressant pour les développeurs web, car il présente de nouvelles façons, plus simples et plus efficaces, d’implémenter des fonctionnalités que l’on pensait auparavant possibles uniquement avec JS.

[GN⁺]

Commentaires Hacker News

• Remarque signalant l’absence de mention du fait que JavaScript bénéficie d’une meilleure compatibilité, ce qui justifie son usage dans certains domaines

  • On peut utiliser les nouvelles fonctionnalités de JavaScript via le transpiling, mais polyfiller des fonctionnalités manquantes de CSS et HTML est bien plus difficile, voire parfois impossible
  • Lors de l’utilisation de la propriété appearance, MDN présente de nombreuses mises en garde et recommande des tests approfondis, en particulier pour appearance: none
  • datalist ne fonctionne pas sur Firefox Android et n’apparaît que comme un simple champ de saisie
  • Le sélecteur de couleur est très peu standardisé, ce qui le rend difficile à utiliser pour la plupart des entreprises
  • L’article lui-même reconnaît le manque de cohérence de details et dialog
  • On espère l’arrivée d’une époque où les navigateurs prendront ces fonctionnalités en charge de manière cohérente, mais d’ici là elles seront surtout utilisées dans des projets personnels

• Étonnement face au fait qu’en 2023 on rencontre encore des problèmes généraux d’expérience utilisateur (UX) avec les formulaires et la saisie de données

  • Il est difficile de comprendre pourquoi ce problème n’a pas été résolu
  • Il y a eu une tentative de tout régler d’un coup avec XForms, mais cela n’a pas été implémenté dans les navigateurs, et à la place les frameworks de composants CSS/JS proposent un ensemble limité d’éléments de formulaire

• Découverte de datalist, mais il semble ne pas fonctionner correctement sur Chrome Android

  • On peut voir les options sur le clavier, mais c’est la première fois que cette fonctionnalité est observée dans l’UI web mobile, et il n’y a pas vraiment de confiance dans le fait que les utilisateurs ordinaires comprendront comment s’en servir
  • Il n’est pas du tout pris en charge sur Firefox Android

• Mention du défilement fluide natif avec scroll-behavior: smooth, des carrousels natifs avec scroll-snap et des animations basées sur le défilement

  • Recommandation de limiter l’usage de ces fonctionnalités et de les employer avec prudence, car elles provoquent souvent des effets secondaires négatifs

• Avec <details>, on peut rechercher le contenu avec Ctrl+F, et contrairement aux accordéons JavaScript qu’on ne peut pas ouvrir ainsi, <details> peut l’être

• Avis selon lequel datalist n’est pas un choix approprié, sauf peut-être pour des outils internes

  • Les valeurs par défaut sont mauvaises, on ne peut pas modifier le style, et lorsque le style ou le comportement doivent être personnalisés, JavaScript est souvent le seul choix possible

• Avis selon lequel, si l’on suit le standard HTML, tout reste cohérent et peut facilement s’appliquer à des sujets comme l’accessibilité ou la traduction

  • Critique du fait que les sites modernes chargent les pages dynamiquement au point que même le bouton retour ne fonctionne plus

• Remarque indiquant que le CSS peut être utilisé comme un outil qui rend les pages web difficiles à lire

  • Avis selon lequel il faudrait revenir à des navigateurs où l’utilisateur peut contrôler tous les aspects de la mise en page et de la typographie

• Mention de la « règle de la moindre puissance » (Rule of Least Power) comme l’un des principes fondamentaux du développement web

  • Avis d’un développeur disant n’avoir jamais entendu parler de ce principe, tout en se demandant s’il existe encore des développeurs front-end qui cherchent à faire les choses aussi simplement que possible