Per far crescere una <textarea> mentre si scrive, senza aggiornarne l’altezza con JavaScript, usa field-sizing: content e definisci limiti con lh per l’altezza e, se utile, ch per la larghezza. Il campo può adattarsi al testo, ma ha comunque bisogno di dimensioni minime e massime, di un’etichetta accessibile e di un fallback per i browser non supportati.
Come rendere una textarea flessibile senza dimensioni arbitrarie
field-sizing controlla come alcuni campi dei moduli ricavano le dimensioni dal contenuto. Il valore iniziale è fixed; con content, una textarea può adattarsi al testo inserito. Per evitare che diventi troppo piccola o invada il layout, imposta un intervallo di dimensioni invece di fissare larghezza e altezza.
As an Amazon Associate I earn from qualifying purchases.
textarea {
field-sizing: content;
min-inline-size: 20ch;
max-inline-size: 50ch;
min-block-size: 3.5lh;
max-block-size: 12lh;
}È un punto di partenza, non una combinazione universale: scegli i limiti in base allo spazio disponibile e a quanto testo ti aspetti che l’utente inserisca. Chrome for Developers mostra anche un esempio con 3.5rlh e limiti inline di 20ch e 50ch nella sua guida a CSS field-sizing.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesChe cosa succede mentre si digita
Con field-sizing: content, la textarea cresce prima in larghezza, finché non raggiunge il vincolo inline disponibile. Quando il testo va a capo, cresce in altezza per mostrare più righe. Se raggiunge la dimensione massima, il contenuto ulteriore resta raggiungibile scorrendo nel campo. Perciò il limite massimo va scelto anche considerando come si comporta lo scorrimento e se il campo rischia di coprire elementi vicini.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Una larghezza o un’altezza fisse possono imporre nuovamente una dimensione rigida e vanificare l’adattamento voluto. Usa piuttosto min-inline-size, max-inline-size, min-block-size e max-block-size per stabilire un intervallo flessibile. Secondo MDN, con field-sizing: content gli attributi rows e cols non determinano la dimensione preferita della textarea come fanno nel comportamento a dimensione fissa.
Perché usare lh per i limiti in altezza
lh è un’unità relativa all’altezza della riga dell’elemento. Un limite espresso, per esempio, in più unità lh comunica che il campo deve avere spazio per un certo numero approssimativo di righe; se cambia la tipografia e quindi l’interlinea calcolata, il limite segue quel cambiamento. Il risultato effettivo dipende comunque dall’interlinea calcolata e dal moltiplicatore scelto: lh non rende identico il rendering dei controlli nativi in tutti i browser, con tutti i font o a ogni livello di zoom.
Per le dimensioni orizzontali, ch offre un riferimento relativo ai caratteri ed è usato negli esempi documentati da Chrome. Né lh né ch eliminano la necessità di verificare il campo nel layout reale: descrivono vincoli relativi, non garantiscono una larghezza visuale identica per ogni font.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Supporto dei browser e fallback
Al 9 ottobre 2026, MDN contrassegna field-sizing come Baseline 2026, disponibile da giugno 2026, ma avverte che browser e dispositivi meno recenti potrebbero non supportarlo. La tabella di compatibilità della documentazione MDN riporta Chrome ed Edge dalla versione 123, Firefox dalla 152 e Safari dalla 26.2. Sono indicazioni per le versioni elencate, non una garanzia per ogni webview o dispositivo meno recente: verifica la matrice di browser prevista dal tuo progetto.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Se il browser ignora la dichiarazione, il campo deve comunque partire da una dimensione utilizzabile. Mantieni quindi una base convenzionale nel CSS o nell’HTML e tratta l’adattamento come miglioramento progressivo. Non affidarti a rows e cols per fissare la dimensione quando field-sizing: content è attivo; MDN documenta che in quel caso non determinano la dimensione preferita.
Etichetta, segnaposto e ridimensionamento manuale
Associa la textarea a un’etichetta descrittiva tramite <label>. Il placeholder può offrire un esempio o un suggerimento, ma non sostituisce l’etichetta. La documentazione MDN sull’elemento <textarea> spiega anche che rows indica il numero di righe visibili e che, se omesso, il valore predefinito è due; questo comportamento va distinto dal dimensionamento preferito con field-sizing: content.
Le textarea native sono ridimensionabili dall’utente nella maggior parte dei browser. Decidi se la maniglia di ridimensionamento è adatta all’interfaccia e imposta la proprietà CSS resize soltanto quando serve. Se la disattivi, assicurati che i limiti automatici e lo scorrimento lascino comunque accessibile il testo.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Best Value
Un controllo pratico prima di pubblicare
- Prova il campo vuoto, con una riga lunga e con testo che va a capo.
- Verifica che al raggiungimento del limite massimo il contenuto resti accessibile tramite scorrimento.
- Controlla il layout con la larghezza minima e massima previste, inclusi gli elementi adiacenti.
- Verifica la resa nei browser e nelle webview effettivamente supportati dal progetto.
- Prova l’interfaccia con zoom e impostazioni tipografiche differenti: le unità relative seguono la tipografia, ma non uniformano il rendering nativo.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
