Une petite révolution UX

Vous avez sûrement déjà implémenté un script JS pour qu'un <textarea> s'agrandisse à mesure que l'utilisateur tape du texte. C'est une fonctionnalité UX basique, mais qui demandait de calculer le scrollHeight en JS.

C'est terminé grâce à la propriété field-sizing.

Le code

textarea {
  /* La magie opère ici */
  field-sizing: content;

  /* On garde une taille min et max pour éviter de casser le layout */
  min-height: 100px;
  max-height: 300px;
}

Impact Accessibilité

Au-delà du confort visuel, cela aide les utilisateurs qui naviguent avec des loupes d'écran. Le contenu ne disparaît pas derrière une barre de défilement interne minuscule, il reste toujours visible et étendu.