Плавное раскрытие блоков с динамическим контентом — одна из самых частых задач в production: аккордеоны, выпадающие меню, модалки. Раньше это решалось через
max-height с запасом, grid-трюками или ручным JS-расчётом, но каждый вариант имел компромиссы по предсказуемости layout или производительности. Новая возможность interpolate-size: allow-keywords меняет подход, позволяя анимировать height: auto напрямую.Как это работает
Свойство
interpolate-size: allow-keywords на контейнере разрешает браузеру интерполировать ключевые слова (auto, min-content, max-content, fit-content) как числовые значения. Например, для аккордеона:.accordion-item {
interpolate-size: allow-keywords;
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.accordion-item.open {
height: auto;
}При переключении класса высота плавно меняется от 0 до естественной — без магических чисел и лишней разметки. Это особенно важно для дизайн-систем, где компоненты должны адаптироваться к любому контенту.
Где применять и типичная ошибка
Используйте в UI-компонентах с непредсказуемой высотой: выпадающие списки, дроверы, панели с динамическими данными. Ошибка — применять
interpolate-size глобально на * или на всех элементах, где не нужна анимация ключевых слов. Это может сломать встроенную интерполяцию браузера в сложных layout, особенно при использовании min-height в сетках. Лучше ограничивать область действия конкретными компонентами.Production-контекст и trade-offs
Поддержка пока ограничена: Chrome 130+ и Safari Technology Preview. Firefox требует флага в
about:config. В production это только progressive enhancement — если браузер не поддерживает, блок раскроется без анимации. Используйте @supports:@supports (interpolate-size: allow-keywords) {
.panel { interpolate-size: allow-keywords; }
}Это не влияет на доступность (скринридеры видят контент сразу) и производительность (браузер оптимизирует анимацию нативного рефлоу). Но не подходит для случаев, где нужна анимация между двумя разными ключевыми словами (например,
auto к min-content) — это пока не реализовано.Вывод:
interpolate-size: allow-keywords убирает главный компромисс между живым контентом и плавными анимациями, но требует осторожного внедрения с фоллбэком для неподдерживающих браузеров.