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 die Eingabe in ein Textfeld schätzen oder mit JavaScript 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 ist nur eine Zeile CSS erforderlich, um die Größenanpassung basierend auf dem Inhalt zu aktivieren. Diese Methode zur Größenanpassung auf Grundlage von Inhalten funktioniert auch für mehr als nur ein Textfeld.

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

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 funktioniert, mit einer 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 Nutzer tippen, 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 den Button und den vorab ausgefüllten Dateinamen reduziert.

Nach dem Hochladen einer Datei wird das Eingabefeld 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.

Auf Codepen ausprobieren

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.

Auf Codepen ausprobieren

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. Ziel ist es dabei nicht unbedingt, genau festzulegen, wie sich etwas verhalten oder aussehen soll, sondern 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 zusammengefasst werden 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öß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 oder content akzeptiert.