Dimensioni dei campi CSS

Una riga di codice per ridimensionare automaticamente gli elementi con contenuti modificabili.

Adam Argyle

Senza field-sizing, per creare un campo di input di dimensioni adeguate dovevi indovinare una dimensione media di un input del 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 verificavano errori quando si cercava di seguire i contenuti inseriti da un utente in un input.

Con field-sizing, è necessaria una riga di CSS per attivare il dimensionamento in base al contenuto. Questo stile di dimensionamento basato sui contenuti funziona anche per più di un'area di testo.

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

Browser Support

• 123
• 123
• x
• 26.2

Source

Link rapidi

Specifiche | Spiegazione

Ti piacciono i video nel formato breve?

Wes Bos e Jhey hanno realizzato un video su Twitter che introduce field-sizing.

Quali elementi sono interessati dal dimensionamento dei campi?

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

<textarea>

L'input si comprime fino a min-inline-size o per adattarsi al segnaposto.

Man mano che gli utenti digitano, l'input cresce in direzione in linea finché non raggiunge una dimensione in linea massima, a quel punto il testo va a capo e le dimensioni del blocco dell'input crescono per adattarsi alla nuova riga.

<select> e <select multiple>

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

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

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

L'input si comprime fino a min-inline-size o per adattarsi al segnaposto.

Man mano che gli utenti digitano, l'input aumenta in direzione in linea finché non raggiunge un max-inline-size, a quel punto l'overflow taglia il valore di input.

<input type="file">

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

Dopo il caricamento di 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, come interessato da field-sizing.

Provalo su Codepen

Un'occhiata più da vicino

Quando utilizzi un [placeholder], il segnaposto diventa il contenuto. Questo aspetto è stato menzionato in precedenza, ma viene riportato qui perché è importante conoscerlo quando si definisce lo stile di un modulo. Un segnaposto lungo o corto modifica le dimensioni intrinseche degli input con field-sizing: content.

Provalo 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 quello di definire esattamente come deve comportarsi o apparire qualcosa, ma piuttosto di proteggerlo dal raggiungimento di uno stato visivo indesiderato. In precedenza, gli input avevano una discreta quantità 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. Aiutano gli elementi a non restringersi 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 dei blocchi e ch funziona bene per le dimensioni in linea.

Qual è il valore predefinito del dimensionamento dei campi?

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