Textarea senza “magic numbers”: lh e field-sizing rendono lo styling finalmente stabile

Styling delle textarea: spesso sembra una di quelle cose banali che diventano irritanti al primo cambio di requisito.

Scenario tipico: il design chiede una textarea “alta tre righe”. Tu scegli un’altezza che sembra giusta, magari a colpi di height: 72px o simili. Funziona… finché qualcuno cambia font-size (o line-height, o font-family) e improvvisamente non sono più tre righe: il controllo risulta troppo alto o troppo basso. Il classico problema dei magic numbers.

Di seguito due feature CSS che rendono questa parte molto più robusta: l’unità lh e field-sizing: content.

---

1) Usare lh per misurare in “righe” e non in pixel

L’unità lh rappresenta la line-height dell’elemento. Tradotto: 1lh equivale all’altezza di una riga di testo nel contesto corrente.

Questo è perfetto per una textarea “da 3 righe”, perché puoi scrivere:

textarea {
  font-size: 1rem;
  line-height: 1.4;
  min-height: 3lh;
}

Risultato: se domani aumenti font-size (o il calcolo effettivo della line-height cambia), l’altezza rimane coerente con “tre righe” senza ritoccare nulla.

Perché min-height (o meglio min-block-size) invece di height

Impostare una height fissa può essere limitante: rischi di forzare scroll interno anche quando avrebbe senso lasciare un po’ di respiro, oppure di impedire strategie più moderne di autosizing.

Meglio quindi:

• min-height: vincolo minimo, lasciando libertà di crescere.
• min-block-size: equivalente logico di min-height (asse block, cioè verticale in layout standard).

Esempio consigliato:

textarea {
  min-block-size: 3lh;
}

Le logical properties (block/inline) sono una buona abitudine perché si adattano meglio a modalità di scrittura e layout diversi.

---

2) field-sizing: content: textarea che cresce con le righe inserite

Storicamente, far espandere una textarea mentre l’utente scrive richiedeva JavaScript: ascoltare input, misurare scrollHeight, impostare style.height, gestire edge case.

Oggi esiste un’alternativa CSS: field sizing basato sul contenuto.

textarea {
  field-sizing: content;
}

Con questa regola, quando l’utente va a capo e il contenuto aumenta, la textarea può espandersi automaticamente invece di mostrare subito la scrollbar interna. È particolarmente utile per:

• chat e messaggistica
• commenti
• moduli con note “brevi ma variabili”

La combinazione pratica: minimo a righe + crescita automatica

Le due feature insieme sono molto potenti:

textarea {
  min-block-size: 3lh;  /* parte da 3 righe */
  field-sizing: content; /* cresce con il contenuto */
}

Così ottieni:

• una base coerente con il design (“3 righe” reali)
• un controllo che non costringe l’utente a combattere con lo scroll interno appena il testo aumenta

---

Sintesi e implicazione pratica

Per smettere di inseguire l’altezza “giusta” delle textarea, conviene spostare il ragionamento dal pixel al testo:

• lh ti permette di definire dimensioni in funzione delle righe (robusto ai cambi di font/size).
• field-sizing: content abilita un autosizing nativo che riduce (o elimina) la necessità di JavaScript.

Il risultato è un componente più stabile, più aderente al design e più comodo per chi scrive. In un sistema UI, queste piccole scelte fanno la differenza: meno manutenzione, meno bug “visivi” e un’esperienza più naturale.