CSS field-sizing — синтаксис и примеры
CSS-свойство field-sizing: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Назначение и границы
Практический смысл «field-sizing» связан с тем, чтобы уточнять один из этапов расчёта или отрисовки CSS-бокса. Свойство field-sizing относится к области «визуальное поведение элемента» и участвует в каскаде, получает вычисленное значение и применяется в подходящем контексте. Контрольная проверка «field-sizing» проходит на странице при отключённых изображениях, а наблюдаемой точкой служит результат при отключённом JavaScript.
Рабочий критерий для «field-sizing»: проверьте вычисленное значение field-sizing, наследование и контекст родителя. Если результат «field-sizing» меняется вместе с посторонним условием, пример ещё не изолирован.
Синтаксис field-sizing
Пример «field-sizing» оставляет только контекст, необходимый для области «визуальное поведение элемента». Измените одно значение и проследите результат в браузере.
.demo {
field-sizing: inherit;
}Как работает field-sizing
Свойство field-sizing относится к области «визуальное поведение элемента» и участвует в каскаде, получает вычисленное значение и применяется в подходящем контексте. Для «field-sizing» проверьте две контрольные точки — результат при отключённом JavaScript и поведение без пользовательской таблицы стилей: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Проверьте вычисленное значение field-sizing, наследование и контекст родителя; результат относится непосредственно к «field-sizing».
- Убедиться, что решение не зависит от случайной высоты viewport при разборе «field-sizing».
- Проверьте «field-sizing» на странице при отключённых изображениях через результат при отключённом JavaScript и запишите наблюдаемое изменение.
Оставляйте «field-sizing» в решении только после проверки на странице при отключённых изображениях. Если нативная конструкция решает задачу «field-sizing» с меньшим числом условий, используйте её.
Практика с field-sizing
Проверьте «field-sizing» на небольшом макете с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «field-sizing»: проверьте вычисленное значение field-sizing, наследование и контекст родителя.
Сценарий: на странице при отключённых изображениях.
Ошибки при работе с field-sizing
Доступность
Изолированная декларация field-sizing без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «field-sizing».
Каскад
Загрузка тяжёлого ресурса до того, как он нужен пользователю при использовании «field-sizing».
Поддержка
Копирование свойства без необходимого родительского контекста; для «field-sizing» проверьте это отдельно.
Поддержка field-sizing
Для «field-sizing» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «field-sizing»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о field-sizing
Как понять, что «field-sizing» выбрано правильно?
«field-sizing» выбрано правильно, когда оно решает задачу «уточнять один из этапов расчёта или отрисовки CSS-бокса», сохраняет результат на странице при отключённых изображениях и проходит предметную проверку: проверьте вычисленное значение field-sizing, наследование и контекст родителя.
Нужен ли запасной вариант для «field-sizing»?
Запасной вариант для «field-sizing» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «field-sizing» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.