field-sizing: размер поля по содержимому
Field-sizing позволяет некоторым полям подстраивать размер под содержимое. Значение content может сократить необходимость скрипта для растущего textarea, если целевые браузеры поддерживают такое поведение.
Назначение
Field-sizing позволяет некоторым полям подстраивать размер под содержимое. Значение content может сократить необходимость скрипта для растущего textarea, если целевые браузеры поддерживают такое поведение.
Как это работает
Сначала задайте обычный работоспособный textarea с rows и ограниченной шириной. Поддерживаемое улучшение включите через @supports. Min-block-size и max-block-size ограничивают рост, сохраняя возможность прокрутки большого текста.
Пример
<style>.sized-field{box-sizing:border-box;inline-size:100%;max-inline-size:30rem;min-block-size:5rem;max-block-size:15rem;font:inherit;padding:.7rem}@supports(field-sizing:content){.sized-field{field-sizing:content}}</style>
<label for="sized-comment">Учебный комментарий</label><textarea class="sized-field" id="sized-comment" rows="4">Добавьте несколько строк и сравните высоту.</textarea>Что должно получиться
В поддерживающей среде высота реагирует на текст в пределах ограничений. Без поддержки остаётся обычное поле с возможностью ввода; нужная функциональность не зависит от улучшения.
Граница применения и частая ошибка
Не утверждайте одинаковое поведение во всех браузерах. При content привычное влияние rows и cols меняется, а placeholder тоже может участвовать в определении размера. Нужны проверки длинного текста, пустого поля и ручного изменения размеров.
Самостоятельная проверка
Вставьте десять строк, затем удалите их. Отключите правило @supports и убедитесь, что запасной вариант удобен. Проверьте, не прыгают ли соседние элементы настолько, что пользователь теряет текущую точку ввода.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.