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;
}

Unterstützte Browser

• 123
• 123
• x
• x

Quelle

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 der Nutzer tippt, wächst die Eingabe in die Inline-Richtung, bis sie max-inline-size erreicht. An diesem Punkt wird der Eingabewert vom Überlauf abgeschnitten.

<input type="file">

Die Eingabe wird bis zur Schaltfläche und zum vorausgefüllten Dateinamentext minimiert.

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, das von field-sizing beeinflusst wird.

Auf Codepen testen

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 intrinsische Größe der Eingaben mit field-sizing: content.

Auf Codepen testen

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 sich etwas verhalten oder aussehen soll, sondern es soll vor einem unerwünschten visuellen Zustand geschützt werden. Früher hatten die Eingaben ziemlich viele feste Größen, aber nach Anwendung 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 in einem zu kleinen Feld zusammenbrechen 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 werden nur die beiden Werte fixed und content akzeptiert.