CSS interpolate-size — синтаксис и примеры
CSS-свойство interpolate-size: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
«interpolate-size» отмечено как экспериментальное в MDN Browser Compatibility Data. Предусмотрите базовый вариант и протестируйте целевые браузеры.
Суть темы
Назначение «interpolate-size» раскрывается через задачу «задавать внешние или внутренние размеры и управлять местом для содержимого». Свойство interpolate-size относится к области «размеры и блочная модель» и участвует в расчёте блочной модели с учётом режима письма, ограничений min/max и box-sizing. Для воспроизводимой проверки «interpolate-size» используйте пример в интерфейсе с направлением письма справа налево и наблюдайте изменение DOM в панели Elements.
Рабочий критерий для «interpolate-size»: проверьте вычисленное значение interpolate-size, наследование и контекст родителя. Если результат «interpolate-size» меняется вместе с посторонним условием, пример ещё не изолирован.
Синтаксис interpolate-size
Минимальная запись «interpolate-size» нужна для отделения самой возможности от стилей и разметки проекта. Проверьте фрагмент отдельно перед переносом.
.demo {
interpolate-size: min(100%, 60rem);
}Как работает interpolate-size
Свойство interpolate-size относится к области «размеры и блочная модель» и участвует в расчёте блочной модели с учётом режима письма, ограничений min/max и box-sizing. Для «interpolate-size» проверьте две контрольные точки — изменение DOM в панели Elements и победившую декларацию во вкладке Computed: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Проверьте вычисленное значение interpolate-size, наследование и контекст родителя; результат относится непосредственно к «interpolate-size».
- Сравнить дерево доступности до и после добавления конструкции при разборе «interpolate-size».
- Проверьте «interpolate-size» в интерфейсе с направлением письма справа налево через изменение DOM в панели Elements и запишите наблюдаемое изменение.
Выбор «interpolate-size» оправдан, если задача относится к области «размеры и блочная модель», а риск «изолированная декларация interpolate-size без связанных ограничений может дать другой результат в реальном компоненте» исключён проверкой. Для «interpolate-size» сравнивайте не внешний вид, а результат для пользователя.
Практика с interpolate-size
Создайте два варианта «interpolate-size» в тестовом шаблоне: корректный и с одной типичной ошибкой. Сравните варианты «interpolate-size» через изменение DOM в панели Elements и объясните различие.
Сценарий: в интерфейсе с направлением письма справа налево.
Ошибки при работе с interpolate-size
Поддержка
Изолированная декларация interpolate-size без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «interpolate-size».
Контекст
Смешивание данных, оформления и поведения в одной хрупкой конструкции при использовании «interpolate-size».
Устойчивость
Смешивание данных, оформления и поведения в одной хрупкой конструкции; для «interpolate-size» проверьте это отдельно.
Поддержка interpolate-size
Для «interpolate-size» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «interpolate-size»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о interpolate-size
Как понять, что «interpolate-size» выбрано правильно?
«interpolate-size» выбрано правильно, когда оно решает задачу «задавать внешние или внутренние размеры и управлять местом для содержимого», сохраняет результат в интерфейсе с направлением письма справа налево и проходит предметную проверку: проверьте вычисленное значение interpolate-size, наследование и контекст родителя.
Нужен ли запасной вариант для «interpolate-size»?
Для «interpolate-size» запасной вариант обязателен: возможность отмечена как экспериментальная. Сначала реализуйте базовое поведение «interpolate-size», затем подключайте улучшение после проверки поддержки.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.