Улучшение UX форм с CSS свойством field-sizing
field-sizing и то, как оно может улучшить удобство взаимодействия с веб формой.Оглавление
Одно из самых болезненных ощущений, с которым я сталкивался в Интернете, — заполнение поля формы с фиксированной шириной. Всё, что я набрал, обрезается, и я не вижу, что именно набрал или набираю.
На компьютере я обычно кликаю и перетаскиваю, чтобы выделить его и увидеть обрезанный текст. В мобильных устройствах это может быть ещё более раздражающим, в результате чего приходится копировать и вставлять текст, чтобы убедиться, что я ничего не напутал и не добавил лишний пробел.
Вы можете написать скрипт на JavaScript для автоматического изменения размера ввода в соответствии с вводимым содержимым, но я полагаю, что это не так часто используется. Или же просто болезненные взаимодействия запоминаются мне больше, чем простые.
CSS свойство field-sizing
Инженеры из команды Chrome предложили и работают над решением этой проблемы с помощью CSS свойства field-sizing.
Новое свойство может быть применено к следующим элементам:
<textarea><input type="text"><input type="number"><input type="file"><select> список<select> выпадающий список
Значения свойства field-sizing
Для реализации предлагаются два значения.
field-sizing: fixed; сохранит текущее поведение, и поле ввода формы не будет изменяться в размерах. Вероятно, целесообразно сохранить текущее поведение, если вы уверены, что длина вводимого текста будет соответствовать определённому количеству символов, которые не будут обрезаться.
field-sizing: content; отключит текущее поведение и позволит подстраивать размер поля формы в зависимости от содержимого.
Если вы используете <input type="text">, то вам необходимо задать минимальную и максимальную ширину элемента… иначе это будет выглядеть так, как будто элемент может расширяться по горизонтали до бесконечности, что само по себе не очень удобно для пользователя.
Однако вертикальное расширение <textarea> создаёт гораздо лучшие впечатления, особенно на небольших экранах.
Пример кода
Эта функция находится в стадии тестирования разработчиками под флагом (Experimental Web Platform features) — в Chrome и Microsoft Edge. Ожидается, что она будет доступна в Chrome 123 (однако Chrome Status не был обновлён, чтобы подтвердить, так это или нет).
Откройте Canary или Dev браузер (я использую Edge Canary), убедитесь, что флаг experimental включён, и проверьте codepen размещённый ниже, добавив контент в input. Первый input не будет расширяться, а второй — будет.
Ресурсы и доступность
Я не могу найти сообщений от Safari или Firefox об этой функции, но она доступна в Dev Trial в Chrome и Edge. Страница документации в MDN пока не опубликована, но когда она появится, добавлю её сюда.
Я думаю, что это улучшит UX формы, но в зависимости от формы вам придётся уделить внимание ширине. И я всегда за то, чтобы заменять JavaScript функциональностью CSS, если это имеет смысл, а в данном случае это так. Меньше JavaScript — это всегда хорошо.