La zone de commentaire qui fait quatre lignes de haut et une ligne avec du texte : chaque site avec une zone de texte a livré le JavaScript qui mesure les entrées et agrandit la boîte. CSS a absorbé le travail.
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 12lh;
}Ce que ça change
- field-sizing : le contenu dimensionne le contrôle en fonction de son contenu, texte inclus, de sorte que la boîte ne soit jamais vide ou serrée.
- min-height et max-height deviennent les rails : passé le maximum, une barre de défilement apparaît comme il se doit.
- L'unité lh maintient les rails honnêtes en lignes de texte, pas en pixels que vous regretterez sous une taille de police différente.
- Cela s'applique également à la saisie et à la sélection, où la sélection avec de nombreuses options cesse d'exiger une hauteur fixe.
La seule mise en garde à énoncer clairement
- Les navigateurs sans propriété conservent le comportement classique : hauteur fixe et défilement manuel, qui est l'état actuel de chaque site aujourd'hui, donc rien ne régresse.
- Associez-le à un nombre de caractères visible pour les limites appliquées ; la croissance automatique est un confort visuel, pas une validation.
- Testez avec le contenu régional le plus élevé que vous prenez en charge ; ce site écrit en quatre langues et la copie française est sûrement plus haute que l'anglais.
Un détail de formulaire qui supprime son propre JavaScript, conserve le comportement de focus et fonctionne avec le remplissage automatique : exactement le genre de travail de plate-forme qui donne l'impression que les petits sites sont réglés de manière professionnelle, très gacor pour une seule déclaration.