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