Свойство field-sizing в CSS

Одна строка кода для автоматического изменения размера элементов с редактируемым контентом.

Adam Argyle

Без field-sizing, чтобы создать поле ввода подходящего размера, вам приходилось либо угадывать средний размер ввода текстового поля, либо использовать JavaScript для подсчета символов и увеличения высоты или ширины элемента по мере ввода текста пользователем. Другими словами, это было непросто и приводило к ошибкам при попытке отследить контент, который пользователь ввел в поле ввода.

С помощью field-sizing вы можете включить изменение размера на основе контента, добавив всего одну строку CSS. Этот стиль изменения размера на основе контента также работает не только для текстовой области!

textarea, select, input {
  field-sizing: content;
}

Browser Support

• 123
• 123
• 152
• 26.2

Source

Быстрые ссылки

Спецификация | Пояснение

Нравятся короткие видео?

Уэс Бос (Wes Bos) и Джей (Jhey) опубликовали в Твиттере отличные видео, в которых рассказывают о field-sizing.

Какие элементы затронуты размером поля?

Ниже приведен список элементов <form>, на которые влияет field-sizing, и краткое описание этого влияния.

<textarea>

Поле ввода уменьшается до min-inline-size или до размера плейсхолдера.

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

<select> и <select multiple>

Элемент select уменьшается, чтобы соответствовать выбранному варианту.

Элемент select с атрибутом multiple увеличивается, чтобы вместить самый широкий вариант и все варианты по высоте.

<input type="text">, <input type="email"> и <input type="number">

Поле ввода уменьшается до min-inline-size или до размера плейсхолдера.

По мере ввода текста поле ввода увеличивается в направлении строки, пока не достигнет max-inline-size, после чего значение ввода обрезается.

<input type="file">

Поле ввода сворачивается до кнопки и автоматически заполненного названия файла.

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

Просмотр, тестирование и сравнение результатов

Ниже приведен интерактивный и минимальный пример поведения каждого элемента формы до и после, на которое влияет field-sizing.

Попробовать в Codepen

Изучение деталей…

При использовании [placeholder] плейсхолдер становится контентом. Об этом уже говорилось ранее, но мы решили напомнить, поскольку это важно при оформлении формы. Длинный или короткий плейсхолдер изменит внутренний размер полей ввода с field-sizing: content.

Попробовать в Codepen

Обработка пустых и переполненных стилей

Использование field-sizing требует дополнительных действий. Ахмад Шадид (Ahmad Shadeed) называет это защитным CSS. Его цель – не столько точно описать, как должен выглядеть или вести себя элемент, сколько защитить его от нежелательного визуального состояния. Раньше у полей ввода было довольно много фиксированных размеров, но после применения field-sizing: content поля ввода могут стать слишком маленькими или слишком большими.

Ниже приведены стили, которые можно использовать в качестве отправной точки. Они помогают элементам не сжиматься в слишком маленькое поле, а также, в случае с textarea, не увеличиваться слишком сильно.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

В этом CSS-коде для указания размеров используются относительные единицы. Новая единица измерения lh идеально подходит для размеров блоков, а ch – для размеров встроенных элементов.

Какое значение свойства field-sizing используется по умолчанию?

Значение по умолчанию для field-sizing – fixed. Допустимы только два значения: fixed и content.