CSS-Feldgröße

Eine Zeile Code für die automatische Größenanpassung von Elementen mit bearbeitbarem Inhalt.

Adam Argyle

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

Mit field-sizing benötigen Sie nur eine Zeile CSS-Code, um die Größe basierend auf dem Inhalt festzulegen. Diese Methode zur Größenanpassung auf Grundlage von Inhalten funktioniert auch für mehr als nur ein Textfeld.

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, in dem sie field-sizing vorstellen.

Welche Elemente sind von der Feldgrößenanpassung betroffen?

Hier finden Sie eine Liste der <form>-Elemente, für die field-sizing verwendet werden kann, sowie eine Zusammenfassung der Auswirkungen auf die einzelnen Elemente.

<textarea>

Die Eingabe wird auf min-inline-size reduziert oder an den Platzhalter angepasst.

Während Nutzer tippen, wird die Eingabe in Inline-Richtung größer, bis sie eine maximale Inline-Größe erreicht. Dann wird der Text umgebrochen und die Blockgröße der Eingabe wird an die neue Zeile angepasst.

<select> und <select multiple>

Das select-Element wird verkleinert, um der ausgewählten Option zu entsprechen.

Ein Select-Feld mit dem Attribut multiple wird so breit wie die breiteste Option und so hoch wie nötig, um die Anzahl der Optionen aufzunehmen.

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

Die Eingabe wird auf min-inline-size reduziert oder an den Platzhalter angepasst.

Während der Nutzer tippt, wird die Eingabe in Inline-Richtung erweitert, bis sie eine max-inline-size erreicht. Dann wird der Eingabewert durch den Überlauf abgeschnitten.

<input type="file">

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

Beim Hochladen einer Datei wird die Eingabe so breit wie die Schaltfläche plus der Text des Dateinamens.

Ergebnisse ansehen, testen und vergleichen

Hier sehen Sie ein interaktives und minimales Beispiel für das Verhalten der einzelnen Formularelemente vor und nach der Anwendung von field-sizing.

Genauer betrachtet

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

Umgang mit leeren und überlaufenden Stilen

Die Verwendung von field-sizing bedeutet, dass Sie einige zusätzliche Schritte ausführen müssen. Ahmad Shadeed nennt es defensives CSS. Dabei geht es nicht unbedingt darum, genau festzulegen, wie sich etwas verhalten oder aussehen soll, sondern darum, es vor einem unerwünschten visuellen Zustand zu schützen. Bisher hatten Eingaben eine Reihe von festen Größen. Nach der Anwendung von field-sizing: content können die Eingaben jedoch viel zu klein oder viel zu groß werden.

Die folgenden Stile sind ein guter Ausgangspunkt. Sie verhindern, dass die Elemente in einem zu kleinen Feld zusammenfallen, und bei textarea auch, dass sie 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ößenanpassung verwendet. Die neue Einheit lh eignet sich perfekt für die Blockgrößen und ch für die Inline-Größen.

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

Der Standardwert von field-sizing ist fixed. Es werden nur die beiden Werte fixed und content akzeptiert.