Wachsende Textfelder mit field-sizing: Grenzen gleich mitplanen

Einordnung zum Dokumentationsstand

Lange Nachrichten verschwinden in kleinen Textfeldern schnell hinter einer Scrollleiste. CSS bietet mit „field-sizing: content“ eine Möglichkeit, geeignete Formularfelder mit dem Inhalt wachsen zu lassen. MDN ordnet die Funktion beim heutigen Abruf Baseline 2026 zu und nennt Juni 2026 als Beginn der Verfügbarkeit in aktuellen Browsern. Das ist eine Entwicklung dieses Jahres, keine Meldung über eine Einführung am heutigen Veröffentlichungstag.

Die Eigenschaft betrifft unter anderem Textfelder und mehrzeilige Eingaben. Nach der MDN-Dokumentation bleiben Mindest- und Maximalgrößen wichtig: Ohne sinnvolle Untergrenze kann ein leeres Feld sehr klein ausfallen. Ältere Browser können eine ergänzende Gestaltung benötigen. Die Funktion ersetzt weder ein verständliches Label noch eine Prüfung der Formulareingabe.

Ein eigenes Kontaktformular planen

Unser Beispiel ist eine unveröffentlichte Kontaktseite für einen kleinen Kulturverein. Das Feld „Worum geht es?“ soll kurze Fragen und längere Beschreibungen aufnehmen. Als eigene Gestaltungsvorgabe wählen wir eine gut erkennbare Anfangshöhe und eine Breite, die vollständig in die mobile Seite passt. Die Nachricht darf wachsen, ohne den Sendenknopf dauerhaft aus dem Blick zu drängen.

Formuliere im Bauauftrag: „Ergänze field-sizing als progressive Verbesserung. Erhalte ein brauchbares mehrzeiliges Textfeld, wenn der Browser die Eigenschaft nicht unterstützt. Setze nachvollziehbare Größenbegrenzungen und beschrifte die Eingabe dauerhaft.“ Das ist eine Anforderung an dein Projekt; daraus folgt keine bereits eingebaute Funktion in Skrabi.

Drei Texte für den Versuch

Teste zunächst eine kurze Frage mit einem Satz. Danach füge einen längeren Absatz ein. Als dritten Fall verwendest du ein sehr langes Wort ohne Leerzeichen. Beobachte, ob das Feld die Seite verbreitert, ob der Text lesbar bleibt und ob du ihn mit der Tastatur vollständig bearbeiten kannst. Diese Fälle prüfen unterschiedliche Layoutprobleme.

Lösche anschließend den gesamten Inhalt wieder. Ein Feld sollte auch dann klar als Eingabemöglichkeit erkennbar bleiben. Vergrößere die Schrift und wiederhole die Prüfung auf einer schmalen Ansicht. Der Platzhalter allein darf nicht erklären müssen, welche Angaben erwartet werden, denn beim Tippen verschwindet er.

Eine Verbesserung mit Rückweg

Vergleiche die neue Variante mit dem bisherigen Feld. Wenn das Wachstum im konkreten Formular eher ablenkt, begrenze es stärker oder belasse die feste Größe. Das Ziel ist eine leichter bearbeitbare Nachricht. Ein modernes CSS-Merkmal ist dann sinnvoll, wenn es diesen praktischen Vorteil auch im eigenen Test zeigt.