L'article explore comment remplacer certaines fonctionnalités JavaScript par des solutions natives HTML et CSS. Il met en avant des exemples concrets comme les accordéons avec les éléments <details> et <summary>, les champs de saisie avec suggestions filtrées via <datalist>, et d'autres composants web. L'objectif est de réduire la dépendance au JavaScript pour des tâches simples, améliorant ainsi les performances et l'expérience utilisateur. L'article inclut des exemples de code et des ressources pour approfondir.
L'article explore l'élément HTML <details> et son partenaire <summary>, souvent sous-estimé mais puissant. Cet élément sémantique permet de créer des widgets de divulgation (disclosure) sans nécessiter de CSS ou de JavaScript, offrant ainsi des avantages en termes de SEO, d'accessibilité, de performance et d'interactivité. L'auteur explique comment styliser et animer cet élément, ainsi que les possibilités d'interaction via JavaScript. De plus, il souligne des fonctionnalités natives comme le lien profond (deep linking) qui ouvre automatiquement les détails lorsque l'utilisateur navigue vers une ancre. Une ressource précieuse pour mieux comprendre et utiliser cet élément HTML.
Tout est dans le titre
Tout est dans le titre
Plusieurs solutions sont proposées : l'élément details, l'élément dialog, et l'API popover
L'auteur présente ces 2 balises HTML5
Tout est dans le titre
L'auteur détaille pas-à-pas la création d'une arborescence en CSS, en combinant CSS et éléments HTML bien choisis
Tout est dans le titre
Il s'agit des balises details, dialog, data, base, meter et progress... Leur utilité est bien expliquée dans l'article :)