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 indovinare la dimensione media di un campo di testo o utilizzare JavaScript per contare 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 e si rischiavano errori quando si cercava di seguire i contenuti inseriti da un utente in un input.

Con field-sizing, è sufficiente una riga di CSS per attivare il dimensionamento in base ai contenuti. Questo stile di dimensionamento basato sui contenuti funziona anche per altri elementi oltre alle textarea.

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

Link rapidi

Specifica | Divulgatore

Ti piacciono i video nel formato breve?

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

Quali elementi sono interessati da field-sizing?

Ecco un elenco di elementi <form> su cui agisce field-sizing, con un riepilogo degli effetti che ha su ciascuno.

<textarea>

L'input viene compresso in un min-inline-size o per adattarsi al segnaposto.

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

<select> e <select multiple>

L'elemento select si riduce per adattarsi all'opzione selezionata.

Un elemento select con l'attributo multiple si espande per adattarsi all'opzione più ampia e per essere abbastanza alto da contenere il numero di opzioni.

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

L'input viene compresso in un min-inline-size o per adattarsi al segnaposto.

Man mano che gli utenti digitano, l'input cresce nella direzione inline fino a raggiungere un valore max-inline-size, dopodiché l'overflow ritaglia il valore di input.

<input type="file">

L'input si comprime nel pulsante e nel testo del nome file precompilato.

Quando carichi un file, l'input diventa largo quanto il pulsante più il testo del nome file.

Visualizzazione, test e confronto dei risultati

Ecco un esempio interattivo e minimo dei comportamenti prima e dopo di ogni elemento del modulo, in base all'impatto di field-sizing.

Prova su Codepen

Do un'occhiata più da vicino…

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

Prova su Codepen

Gestione degli stili vuoti e in overflow

L'utilizzo di field-sizing comporta un lavoro aggiuntivo. Ahmad Shadeed lo chiama "CSS difensivo", in cui l'obiettivo non è necessariamente spiegare esattamente come dovrebbe comportarsi o apparire un elemento, ma piuttosto proteggerlo dall'entrare in uno stato visivo indesiderato. In precedenza, gli input avevano 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. Aiutano gli elementi a non comprimersi in una casella troppo piccola e, nel caso di textarea, a non ingrandirsi 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 il dimensionamento. La nuova unità lh è perfetta per le dimensioni del blocco e ch funziona bene per le dimensioni in linea.

Qual è il valore predefinito di field-sizing?

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