CSS-Feldgröße

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

Adam Argyle

Ohne field-sizing mussten Sie, um ein Eingabefeld mit der richtigen Größe zu erstellen, entweder die durchschnittliche Größe eines Textfelds schätzen oder JavaScript verwenden, um die Zeichen zu zählen und die Höhe oder Breite des Elements zu erhöhen, während der Nutzer Text eingab. Mit anderen Worten: Es war nicht einfach und fehleranfällig, den Inhalt zu verfolgen, den ein Nutzer in ein Eingabefeld eingegeben hatte.

Mit field-sizing benötigen Sie nur eine Zeile CSS, um die Größenanpassung basierend auf dem Inhalt zu aktivieren. Diese inhaltsbasierte Größenanpassung funktioniert nicht nur für Textbereiche.

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

Quick Links

Spezifikation | Erklärer

Du magst Kurzvideos?

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

Welche Elemente sind von „field-sizing“ betroffen?

Hier ist eine Liste der <form>-Elemente, auf die sich field-sizing auswirkt, mit einer Zusammenfassung der Auswirkungen auf die einzelnen Elemente.

<textarea>

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

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

<select> und <select multiple>

Das Auswahlelement wird verkleinert, damit es zur ausgewählten Option passt.

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

<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 Inline-Richtung vergrößert, bis sie eine max-inline-size erreicht. Ab diesem Punkt wird der Eingabewert abgeschnitten.

<input type="file">

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

Nach dem Hochladen einer Datei wird die Eingabe so breit wie die Schaltfläche plus der Dateiname.

Ergebnisse ansehen, testen und vergleichen

Hier ist ein interaktives und minimales Beispiel für das Verhalten der einzelnen Formularelemente vor und nach der Änderung durch field-sizing.

Auf Codepen ausprobieren

Genauere Analyse

Wenn Sie einen [placeholder] verwenden, wird der Platzhalter zum Inhalt. Dies wurde bereits erwähnt, wird hier aber noch einmal hervorgehoben, da es für die Gestaltung eines Formulars wichtig ist. 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 zusätzliche Arbeit leisten müssen. Ahmad Shadeed nennt dies „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. Zuvor hatten Eingaben eine angemessene Anzahl fester Größen, aber nach der Anwendung von field-sizing: content können die Eingaben viel zu klein oder viel zu groß werden.

Die folgenden Stile sind ein guter Ausgangspunkt. Sie verhindern, dass die Elemente in eine zu kleine Box schrumpfen, und im Fall von textarea, 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ößenangaben 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 von „field-sizing“?

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