field-sizing: content — авторазмер полей форм без единого скрипта**Всё ещё тянете высоту textarea через
scrollHeight, строчите обёртки со скрытыми дивами и ResizeObserver? Выкидывайте. В CSS завезли нативное решение для авторазмера элементов форм.**Как это работает**
Свойство
field-sizing говорит браузеру: подгони размер поля под его контент. Значение по умолчанию — fixed (все привычно), нас интересует content.textarea {
field-sizing: content;
/* без этого textarea схлопнется в точку,
а с длинным текстом улетит в бесконечность */
min-height: 4em;
max-height: 20em;
resize: none; /* ресайз мышью теперь не нужен */
}Поле растёт при вводе и уменьшается, когда строк стало меньше. Без анимаций layout-сдвигов и обработчиков на каждый
keyup.**Это работает не только с textarea**
Свойство определено для всех элементов форм и подстраивает размер по контенту:
input,
select {
field-sizing: content;
}
-
input[type="text"] — ширина подстраивается под введённый текст;-
select — размер подгоняется под выбранную опцию, а не под самую длинную;-
input[type="file"], input[type="number"] — тоже подхватывают.**Подводные камни**
1. Всегда задавайте
min-height или стартовые размеры. Сломанный (или пустой) элемент схлопнется до нуля.2. Для input по умолчанию задан
size, и если не сбросить CSS-ширину, рост незаметен. Элементу нужно «дышать»: никаких width: 100%, если ждёте автоширину.3. Это свойство — не фича, которая ломает интерфейс, если браузер не поддерживает. Оно просто проигнорируется, и поле останется со стандартным
rows, cols и size. Идеально для прогрессивного улучшения.**Поддержка**
- Chrome / Edge — с 123 версии;
- Firefox — долго был за флагом, проверяйте актуальный статус на caniuse;
- Safari — нет.
Среднестатистический пользователь Chrome уже живёт с этим. Можно смело применять на проектах, где не нужно поддерживать древний Safari.
**Зачем это фронту**
- минус JS-костыли: ни
scrollHeight, ни скрытых дублей контента, ни обсерверов;- скорость: ростом поля управляет браузерный layout, а не перезапись DOM;
- доступность и простота: «коробка» всегда соответствует контенту, в том числе при вставке текста мышью и автозаполнении (на чём часто падают самописные решения).
Берите в работу и потихоньку вычищайте старые наколенки. Ссылку на спецификацию не даю — она и так гуглится за секунду.
#css #forms
