Eine Codezeile für die automatische Größenanpassung von Elementen mit bearbeitbaren Inhalten.
Ohne field-sizing musste zum Erstellen eines bedarfsgerechten Eingabefelds entweder die durchschnittliche Größe eines Textfelds geschätzt oder JavaScript verwendet werden, um die Zeichen zu zählen und die Höhe oder Breite des Elements entsprechend dem vom Nutzer eingegebenen Text zu erhöhen. Mit anderen Worten: Es war nicht einfach und es war fehleranfällig, wenn es versuchte, dem Inhalt zu folgen, den ein Nutzer in eine Eingabe eingegeben hatte.
Bei field-sizing benötigen Sie eine CSS-Zeile, um die Größenanpassung an den Inhalt zu ermöglichen. Dieser inhaltsbasierte Größenanpassungs-Style funktioniert auch für mehr als nur einen Textbereich.
textarea, select, input {
field-sizing: content;
}
Quick Links
Du magst Kurzvideos?
Wes Bos und Jhey haben jeweils ein tolles Video auf Twitter, in dem euch field-sizing vorgestellt wird.
Auf welche Elemente wirkt sich die Größenanpassung aus?
Hier ist eine Liste von <form>-Elementen, mit denen field-sizing arbeitet, mit einer Zusammenfassung der Auswirkungen auf jedes Element.
<textarea>
Die Eingabe wird auf min-inline-size oder auf den Platzhalter minimiert.
Wenn der Nutzer etwas eingibt, wächst die Eingabe in Inline-Richtung, bis sie eine maximale Inline-Größe erreicht. An dieser Stelle wird der Text umgebrochen und die Blockgröße der Eingabe wird an die neue Zeile angepasst.
<select> und <select multiple>
Das Auswahlelement wird so verkleinert, dass es in die ausgewählte Option passt.
Eine Auswahl mit dem Attribut multiple wird so vergrößert, dass sie zur breitesten Option passt und so hoch ist, wie für die Anzahl der Optionen erforderlich ist.
<input type="text">, <input type="email"> und <input type="number">
Die Eingabe wird auf min-inline-size oder auf den Platzhalter minimiert.
Wenn der Nutzer etwas eingibt, wächst die Eingabe in Inline-Richtung, bis sie einen max-inline-size erreicht. An diesem Punkt wird der Eingabewert durch den Überlauf begrenzt.
<input type="file">
Die Eingabe wird auf die Schaltfläche und den vorausgefüllten Dateinamenstext minimiert.
Beim Hochladen einer Datei wird die Eingabe so breit wie die Schaltfläche und der Dateiname.
Ergebnisse ansehen, testen und vergleichen
Hier ist ein interaktives und minimales Beispiel für das Vorher-Nachher-Verhalten jedes Formularelements, das von field-sizing beeinflusst wird.
Bei genauerer Betrachtung
Wenn Sie einen [placeholder] verwenden, wird der Platzhalter zum Inhalt. Dies wurde bereits erwähnt, aber hier erwähnt,
weil es wichtig ist, dies zu beachten, wenn Sie ein Formular gestalten. Ein langer oder kurzer Platzhalter ändert die intrinsische Größe von Eingaben mit field-sizing:
content.
Umgang mit leeren oder überlaufenden Stilen
Wenn Sie field-sizing verwenden, bedeutet dies, dass Sie zusätzliche Arbeit leisten müssen. Ahmad Shadeed nennt es „defensives CSS“, bei dem das Ziel nicht unbedingt genau festlegen muss, wie sich etwas verhalten oder aussehen soll, sondern es vor einem unerwünschten visuellen Zustand versetzen soll. Früher hatten die Eingaben ziemlich viele feste Größen, aber nach dem Anwenden von field-sizing: content können die Eingaben viel zu klein oder zu groß werden.
Die folgenden Stile sind ein guter Ausgangspunkt. Sie sorgen dafür, dass die Elemente nicht zu einer zu kleinen Box zusammengefasst und im Fall von textarea auch nicht zu groß werden.
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;
}
Dieses CSS verwendet relative Einheiten für die Größe. Die neue lh-Einheit ist perfekt für die Blockgrößen und ch eignet sich gut für die Inline-Größen.
Wie lautet der Standardwert für die Feldgröße?
Der Standardwert von field-sizing ist fixed und akzeptiert nur die beiden Werte fixed oder content.