Урок: проверить поле без поддержки field-sizing

Назначение

Современное CSS-улучшение должно оставлять поле пригодным для ввода в неподдерживающей среде. В уроке вы проверите запасное оформление отдельно от успешного срабатывания нового свойства.

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

Создайте textarea id fallback-note с rows, обычной шириной и ограничениями размера. Применяйте field-sizing:content только внутри @supports. Код читает признак поддержки и текущую геометрию, не меняя поле.

Пример

const field = document.querySelector("#fallback-note");
console.log("Поддержка:", CSS.supports("field-sizing", "content"));
console.log({height:field.getBoundingClientRect().height, scrollHeight:field.scrollHeight});

Что должно получиться

Поддержка синтаксиса выводится отдельно от размеров. После отключения улучшения в инспекторе обычное поле должно по-прежнему показывать текст и позволять добраться до его конца.

Граница применения и частая ошибка

CSS.supports не проверяет удобство компонента и не гарантирует отсутствие браузерных особенностей. Отключение одного правила в новом браузере не полностью заменяет тест старого движка. Не делайте доступность ввода зависимой от результата feature detection.

Самостоятельная проверка

Проверьте пустое поле, десять строк и длинное слово с включённым и выключенным правилом. Сравните ручное изменение размера, прокрутку и масштаб. Запишите оставшиеся ограничения проверки и протестируйте реальные целевые браузеры.

Связанные материалы

• Консоль
• Прототип формы
• Повторные проверки