⁣field-sizing: content — как убить JS-костыли для авто-высоты textarea и input

Раньше, чтобы поле ввода росло динамически, приходилось тащить скрипты, высчитывать scrollHeight или плясать с contenteditable. В production — лендинги, кабинеты, формы в дизайн-системах — это всегда лишний код. Теперь хватит одной строки CSS.

Как это работает

Для textarea:

textarea {
  field-sizing: content;
  min-height: 3em;
  width: 100%;
}

Поле само расширяется вниз. Для input — по ширине:

input[type="text"] {
  field-sizing: content;
  min-width: 150px;
  max-width: 500px;
}

Без свойства элемент фиксированного размера. С ним — подстраивается под содержимое.

Нюансы и типичная ошибка

Ключевой момент: field-sizing сбрасывает height и width в auto. Если задать height: 50px, это не сработает. Ставьте только min-height и max-height, иначе форма схлопнется по контенту.

Свойство дружит с resize: vertical — пользователь может вручную тянуть высоту, автомасштабирование не ломается.

Production-пример для форм

.auto-textarea {
  field-sizing: content;
  min-height: 2.5em;
  max-height: 15em;
  width: 100%;
  resize: vertical;
  overflow-y: auto;
}

Браузерная поддержка: Chrome 123+ и Edge — да (работает в продакшене). Safari пока в Technology Preview, Firefox — в Nightly под флагом. Используйте как прогрессивное улучшение: старые браузеры увидят фиксированный размер — не критично.

Вывод:
Одна строка CSS вместо целого скрипта — чище код, быстрее загрузка, меньше багов в формах.