Una riga di codice per il dimensionamento automatico di elementi con contenuti modificabili.
Senza field-sizing, per creare un campo di immissione di dimensioni adeguate dovevi
prevedere le dimensioni medie di un campo di testo inserito o utilizzare JavaScript per contare
i caratteri e aumentare l'altezza o la larghezza dell'elemento rispetto al testo inserito dall'utente. In
altre parole, non era facile ed era soggetto a errori quando cercava di seguire i
contenuti inseriti da un utente in un input.
Con field-sizing, è necessaria una riga di CSS per attivare il ridimensionamento in base ai
contenuti. Questo stile di dimensionamento basato sui contenuti è compatibile anche con altre aree di testo.
textarea, select, input {
field-sizing: content;
}
Link rapidi
Ti piacciono i video nel formato breve?
Wes Bos e Jhey hanno entrambi un bel video su Twitter che vi presenta field-sizing.
Quali elementi sono interessati dal dimensionamento dei campi?
Ecco un elenco degli elementi di <form> su cui field-sizing lavora, con un riepilogo degli effetti che ha su ciascuno.
<textarea>
L'input viene compresso a un valore min-inline-size o per adattarsi al segnaposto.
Man mano che gli utenti digitano, l'input cresce in direzione in linea fino a raggiungere la dimensione massima in linea, dopodiché il testo andrà a capo e la dimensione del blocco dell'input cresce per adattarsi alla nuova riga.
<select> e <select multiple>
L'elemento selezionato si riduce per adattarsi all'opzione selezionata.
Un elemento selezionato con l'attributo multiple si adatta all'opzione più ampia ed è alto quanto necessario per adattarsi al numero di opzioni.
<input type="text">, <input type="email"> e <input type="number">
L'input viene compresso a un valore min-inline-size o per adattarsi al segnaposto.
Man mano che gli utenti digitano, l'input aumenta in linea fino a raggiungere un
max-inline-size, dopodiché l'overflow taglia il valore di input.
<input type="file">
L'input viene compresso in un pulsante e viene visualizzato il testo del nome file precompilato.
Durante il caricamento di un file, l'input assume le dimensioni del pulsante più il testo del nome del file.
Visualizzazione, test e confronto dei risultati
Ecco un esempio interattivo e minimo dei comportamenti prima e dopo di
ogni elemento del modulo, interessati da field-sizing.
Guarda più da vicino
Quando utilizzi un elemento [placeholder], il segnaposto diventa il contenuto. Questo è stato detto in precedenza, ma qui
è stato accennato, perché è importante saperlo quando si assegna uno stile a un modulo. Un segnaposto lungo o breve modificherà la dimensione intrinseca degli input con field-sizing:
content.
Gestione degli stili vuoti e in overflow
Se utilizzi field-sizing, devi eseguire altre operazioni. Ahmad
Shadeed lo definisce "CSS difensivo", in cui l'obiettivo non
è necessariamente spiegare esattamente il comportamento o l'aspetto
di qualcosa, ma evita che resti in uno stato visivo indesiderato. In precedenza, gli input avevano
una quantità discreta 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. Consentono agli elementi di non comprimersi in un riquadro troppo piccolo e, nel caso di textarea, di non crescere 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 per le dimensioni in linea.
Qual è il valore predefinito per il dimensionamento dei campi?
Il valore predefinito di field-sizing è fixed e accetta solo i due
valori fixed o content.