Dimensioni dei campi CSS

Una riga di codice per il ridimensionamento automatico degli elementi con contenuti modificabili.

Adam Argyle

Senza field-sizing, per creare un campo di immissione di dimensioni adeguate, dovevi stimare le dimensioni medie di un campo di immissione di testo o utilizzare JavaScript per conteggiare i caratteri e aumentare l'altezza o la larghezza dell'elemento man mano che l'utente inseriva il testo. In altre parole, non era facile ed era soggetta a errori quando si cercava di seguire i contenuti inseriti da un utente in un input.

Con field-sizing, hai bisogno di una riga di CSS per attivare le dimensioni in base ai contenuti. Questo stile di dimensionamento basato sui contenuti funziona anche per più di un'area di testo.

textarea, select, input {
  field-sizing: content;
}

Supporto dei browser

• 123
• 123
• x
• x

Origine

Link rapidi

Specifiche | Spiegazione

Ti piacciono i video nel formato breve?

Wes Bos e Jhey hanno entrambi un ottimo video su Twitter che ti introduce a field-sizing.

Quali elementi sono interessati dalla dimensione dei campi?

Di seguito è riportato un elenco degli elementi <form> su cui agisce field-sizing, con un riepilogo degli effetti che ha su ciascuno.

<textarea>

L'input viene compresso fino a min-inline-size o per adattarsi al segnaposto.

Man mano che gli utenti digitano, l'input cresce nella direzione in linea fino a raggiungere la dimensione massima in linea, dopodiché il testo andrà a capo e la dimensione del blocco dell'input aumenterà per adattarsi alla nuova riga.

<select> e <select multiple>

L'elemento di selezione si riduce per adattarsi all'opzione selezionata.

Un elemento di tipo select con l'attributo multiple si espande per adattarsi all'opzione più ampia e per avere l'altezza necessaria per adattarsi al numero di opzioni.

<input type="text">, <input type="email"> e <input type="number">

L'input viene compresso fino a min-inline-size o per adattarsi al segnaposto.

Man mano che gli utenti digitano, l'input cresce nella direzione in linea fino a raggiungere un max-inline-size, a quel punto l'overflow comporta il clip del valore di input.

<input type="file">

L'input viene compresso fino al pulsante e al testo del nome file precompilato.

Dopo aver caricato un file, l'input diventa largo quanto il pulsante più il testo del nome del file.

Visualizzare, testare e confrontare i risultati

Ecco un esempio interattivo e minimale dei comportamenti prima e dopo di ciascun elemento del modulo, in base all'effetto di field-sizing.

Prova su Codepen

Uno sguardo più da vicino

Quando utilizzi un [placeholder], il segnaposto diventa il contenuto. Questo aspetto è stato menzionato in precedenza, ma è stato evidenziato qui perché è importante sapere quando applicare lo stile a un modulo. Un segnaposto lungo o breve modificherà le dimensioni intrinseche degli input con field-sizing: content.

Prova su Codepen

Gestione di stili vuoti e con overflow

L'utilizzo di field-sizing comporta alcuni passaggi aggiuntivi. Ahmad Shadeed lo chiama "CSS difensivo", in cui l'obiettivo non è necessariamente specificare esattamente come qualcosa deve comportarsi o apparire, ma proteggerlo da uno stato visivo indesiderato. In precedenza, gli input avevano una quantità ragionevole di dimensioni fisse, ma dopo l'applicazione di field-sizing: content, gli input possono diventare troppo piccoli o troppo grandi.

I seguenti stili sono un buon punto di partenza. Evitano che gli elementi si comprimano in una casella troppo piccola e, nel caso di textarea, non si espandano troppo.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

Questo CSS utilizza unità relative per le dimensioni. La nuova unità lh è perfetta per le dimensioni dei blocchi e ch funziona bene con le dimensioni in linea.

Qual è il valore predefinito di dimensionamento-campo?

Il valore predefinito di field-sizing è fixed e accetta solo i due valori fixed o content.