Прощайте, фиксированные инпуты: Укрощаем field-sizing
Признайся, сколько раз ты писал JS-костыль, чтобы текстовое поле растягивалось вслед за вводимым текстом? Это классическая боль: либо ты оставляешь пользователю крохотное окошко textarea с бесячим скроллом, либо вешаешь обработчик на событие input, считаешь scrollHeight и вручную меняешь высоту. В 2026 году пора оставить эти танцы с бубном в прошлом. Мы наконец-то получили нативное решение, которое делает всю грязную работу за нас.
Как мы страдали раньше: Эпоха JS-костылей и клонирования
Раньше задача «резинового» инпута решалась двумя путями, и оба они пахли плохим кодом. Первый — это тот самый JS-обработчик, который постоянно дергал DOM, вызывая перерисовки при каждом нажатии клавиши. Второй — еще более изощренный: создание невидимого зеркального div с теми же стилями, измерение его размеров и перенос их на инпут.
Если ты уже читал про стилизацию форм на чистом CSS в современном вебе, то знаешь, что мы давно стремимся к декларативности. Но до появления field-sizing автоматический размер был «святым граалем», недоступным без скриптов. Любая попытка сделать это на чистом CSS превращалась в месиво из contenteditable элементов, которые не умеют нормально работать с формами и автозаполнением.
Как делать правильно в 2026 году: Одна строка вместо десятков строк кода
Свойство field-sizing — это настоящий киллер-фича для UX. Оно говорит браузеру: «Эй, забудь про фиксированные размеры по умолчанию, просто подстраивайся под контент». Больше никаких пустых пространств в инпутах или обрезанных слов.
Самое приятное, что это работает не только для textarea, но и для обычных input и даже для select. Это особенно полезно, когда ты используешь логические свойства CSS, чтобы твоя верстка идеально выглядела на любых языках — длинное немецкое слово больше не «сломает» твой дизайн, а просто аккуратно растянет поле.
Готовый сниппет кода
Всё, что тебе нужно — это добавить одно магическое свойство. Посмотри, как лаконично это выглядит в современном CSS:
/* Магия автоматического размера */
.auto-resize-field {
field-sizing: content;
/* Ограничиваем рост, чтобы поле не ушло в бесконечность */
min-width: 150px;
max-width: 100%;
/* Для textarea ограничиваем высоту, если нужно */
min-height: 40px;
}
/* Базовая стилизация для красоты */
input, textarea {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
font-size: 1rem;
}
Частая ошибка новичков: Когда поле «улетает» за горизонт
Главная ошибка при использовании field-sizing: content — это забыть про ограничители. Поскольку элемент теперь буквально живет своим контентом, он будет расширяться до тех пор, пока пользователь не перестанет печатать. Если в textarea влепят текст на три экрана, твой лейаут может просто разъехаться.
Запомни правило: всегда используй max-width и max-height вместе с этим свойством. Это позволит полю расти органично, но в определенных рамках. Как только текст дойдет до лимита, внутри поля просто появится привычный скролл. Это сохраняет баланс между удобством пользователя и целостностью твоего дизайна.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!