CSS-Feldgröße

Eine Codezeile für die automatische Größenanpassung von Elementen mit bearbeitbaren Inhalten.

Adam Argyle

Ohne field-sizing mussten Sie entweder eine durchschnittliche Größe für ein Textfeld schätzen oder mit JavaScript Zeichen zählen und die Höhe oder Breite des Elements erhöhen, während der Nutzer Text eingab. Mit anderen Worten: Es war nicht einfach und es gab viele Fehler, wenn versucht wurde, den Inhalt zu verfolgen, den ein Nutzer in eine Eingabe eingegeben hatte.

Bei field-sizing ist eine Zeile CSS erforderlich, um die Größe basierend auf dem Inhalt zu ermöglichen. Dieser inhaltsbasierte Größenstil funktioniert nicht nur für Textfelder.

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

Quick Links

Spezifikation | Erläuterung

Du magst Kurzvideos?

Wes Bos und Jhey haben jeweils ein tolles Video auf Twitter veröffentlicht, in dem sie field-sizing vorstellen.

Welche Elemente sind von der Feldgröße betroffen?

Hier ist eine Liste der <form>-Elemente, auf die field-sizing angewendet werden kann, mit einer Zusammenfassung der Auswirkungen auf jedes Element.

<textarea>

Die Eingabe wird auf min-inline-size oder auf die Größe des Platzhalters minimiert.

Während Nutzer tippen, wird die Eingabe in der Inline-Richtung vergrößert, bis eine maximale Inline-Größe erreicht wird. An diesem Punkt wird der Text umgebrochen und die Blockgröße der Eingabe wird so angepasst, dass sie in die neue Zeile passt.

<select> und <select multiple>

Das Auswahlelement schrumpft, um der ausgewählten Option zu entsprechen.

Ein Auswahlfeld mit dem Attribut multiple wird so groß, dass es die breiteste Option umschließt, und so hoch, dass es die Anzahl der Optionen umschließt.

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

Die Eingabe wird auf min-inline-size oder auf die Größe des Platzhalters minimiert.

Während Nutzer tippen, wird die Eingabe in Richtung Inline erweitert, bis sie eine max-inline-size erreicht. An diesem Punkt wird der Eingabewert durch Überlauf abgeschnitten.

<input type="file">

Die Eingabe wird auf die Schaltfläche und den vorab ausgefüllten Dateinamen reduziert.

Nach dem Hochladen einer Datei wird das Eingabefeld so breit wie die Schaltfläche und der Dateiname.

Ergebnisse ansehen, testen und vergleichen

Hier ist ein interaktives und minimalistisches Beispiel für das Verhalten vor und nach der Änderung jedes Formularelements, die durch field-sizing beeinflusst wird.

Näheres dazu

Wenn Sie [placeholder] verwenden, wird der Platzhalter zum Inhalt. Dies wurde bereits erwähnt, ist aber hier noch einmal hervorgehoben, da es wichtig ist, dies zu wissen, wenn Sie ein Formular gestalten. Ein langer oder kurzer Platzhalter ändert die Eigengröße von Eingaben mit field-sizing: content.

Umgang mit leeren und überlaufenden Stilen

Wenn Sie field-sizing verwenden, müssen Sie einige zusätzliche Schritte ausführen. Ahmad Shadeed nennt es „defensives CSS“. Dabei geht es nicht unbedingt darum, genau festzulegen, wie etwas funktionieren oder aussehen soll, sondern es soll vor einem unerwünschten visuellen Zustand geschützt werden. Bisher hatten Eingaben eine relativ feste Größe. Nach dem Anwenden von field-sizing: content können sie jedoch viel zu klein oder viel zu groß werden.

Die folgenden Stile sind ein guter Ausgangspunkt. Sie sorgen dafür, dass die Elemente nicht in einen zu kleinen Bereich zusammenschrumpfen und im Fall von textarea 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;
}

In diesem CSS werden relative Einheiten für die Größe verwendet. Die neue Einheit lh eignet sich perfekt für die Blockgrößen und ch eignet sich gut für die Inline-Größen.

Was ist der Standardwert für „Feldgröße“?

Der Standardwert von field-sizing ist fixed. Es sind nur die beiden Werte fixed oder content zulässig.