Автоматические размеры полей с field-sizing

19.06.2026 • css

Введение

На днях вышел Файерфокс 152, а это значит, что field-sizing теперь реализован во всех основных браузерах!

Свойство позволяет задать размер полей по их содержимому. То, что было похоже на эксперимент от Хрома год назад, теперь реализовано везде.

Давайте посмотрим, какие варианты использования есть, и что делать, если браузер не поддерживает свойство.

Использование в textarea

Да, именно в таком порядке. Мне кажется, это будет самый популярный вариант использование, поэтому с него и начнём.

<textarea></textarea>

textarea {
    field-sizing: content;
}

В случае <textarea> свойство работает в двух направлениях: и по горизонтали, и по вертикали. Это позволяет его использовать во всевозможных местах для ввода комментариев, отзывов, сообщений и так далее.

Чтобы контролировать размеры, можно указать свойства min-width / max-width и min-height / max-height, field-sizing будет с ними корректно работать. Указать width / height можно, но в этом случае “авторазмер” по соответствующей оси отключится.

Также вспомним и про resize. Это свойство позволяло пользователям увеличивать и уменьшать размеры <textarea> руками, если было нужно больше места. Свойство также учитывало ограничения от ширины / высоты.

Как взаимодействует resize и field-sizing? До тех пор, пока пользователь не трогает за угол <textarea>, работает field-sizing. Как только пользователь поменял размеры, <textarea> получает фиксированные значения width / height и field-sizing работать перестаёт. По итогу работает или одно, или второе.

Возможно, это хорошее улучшение для пользователей: поле будет увеличиваться само, а если пользователь захочет изменить размеры, у него это тоже получится. Расстраивает только то, что встроенного механизма “возврата” к авторазмерам нет, да и как объяснить пользователю такой скачок – тоже непонятно. Возможно, в будущем появятся варианты?

Использование с input

У <input> есть много разных видов, и field-sizing в первую очередь имеет смысл с теми, которые позволяют вводить текст (тексты, пароли, числа и так далее).

<input type="search" placeholder="Search...">

input {
    field-sizing: content;
}

Из важных нюансов можно заметить то, что пустое поле принимает размер плейсхолдера. Это порождает неприятный эффект: если ввести хотя бы один символ, то поле схлопнется до размеров этого символа! А указать значение по типу min-width: width(placeholder) мы, конечно же, не можем (я пошутил, правда, такого значения нет).

Что делать? Указывать минимальные / максимальные размеры, причём заведомо большие, чем плейсхолдер.

Другие варианты использования

Свойство также работает и с файловым инпутом, и с <select>, но смысла в нём не очень много. Подробнее можно почитать в статье на MDN.

Что делать со старыми браузерами

Чаще всего хотят сделать именно многострочное поле по высоте содержимого, и у нас несколько вариантов:

1) Сделать минимальную высоту для всех браузеров, а в старых браузерах она будет просто фиксированной. При необходимости пользователи смогут увеличить её через resize. Дёшево и сердито. Подойдёт для админок и прочих “внутренних” интерфейсов.

2) Аналогично, только для старых браузеров задать другую высоту (больше). Это можно сделать через rows (при наличии field-sizing: content старое свойство игнорируется) или через @supports.

3) Сделать решение на JS. Вариантов в интернете масса: можно и просто брать scrollHeight самой <textarea>, так и делать полную копию текста в <div> с измерением размеров (может пригодиться в более хитрых случаях).

textarea.addEventListener('input', () => {
    textarea.style.height = '';
    textarea.style.height = textarea.scrollHeight + 'px';
});

Итого

Как уже говорил год назад, field-sizing можно использовать уже сейчас! Ну, а сегодня так точно)

В случае, если вы делаете внутреннюю страничку, или какую-то админку, или у вас пользователи на новых браузерах – field-sizing за 30 секунд сделает интерфейс лучше.

В случае, если вы делаете интерфейс для внешних пользователей – вам тоже стоит подумать про field-sizing, и, например, подключать код на JS только в старых браузерах (а потом и вовсе когда-нибудь его выкинуть).

Отличное свойство, которое может появиться на большом числе сайтов. Пока только 1.6% использования (на момент написания статьи).

Почитать ещё посты