L’article présente la propriété CSS field-sizing: content, qui permet de dimensionner dynamiquement les champs de formulaire (comme les <select> ou <input>) en fonction de leur contenu, sans recourir à JavaScript. Actuellement supportée uniquement par Chrome, cette propriété offre une solution élégante pour adapter la largeur des champs à leur contenu, tout en respectant les placeholders comme largeur minimale. L’auteur illustre son utilité à travers plusieurs cas d’usage : interfaces conversationnelles (formulaires plus naturels), pagination (menus déroulants adaptés), saisie d’URL (champs de sous-domaines ou identifiants), ou encore sections héroïques avec filtres dynamiques. L’article souligne aussi l’importance de définir des largeurs minimales et maximales pour éviter les problèmes d’affichage, et encourage son adoption comme amélioration progressive, compatible avec les navigateurs ne la supportant pas encore. Une propriété prometteuse pour des designs plus fluides et intuitifs.
25944 shaares