Одно CSS-свойство только что избавило от необходимости писать JavaScript для каждого FAQ-аккордеона, который вы когда-либо делали.

Серьёзно.

Это свойство — interpolate-size: allow-keywords.

Годами в CSS нельзя было анимировать переход от height: 0 к height: auto.

Браузер просто не мог вычислить переход между числовым значением и ключевым словом.

Поэтому разработчики писали JavaScript, измеряли scrollHeight, использовали requestAnimationFrame и подобные вещи.

Теперь это можно сделать одной строкой:

interpolate-size: allow-keywords;

Что оно делает

Сообщает браузеру, что ему разрешено интерполировать между числовыми значениями и ключевыми словами вроде auto, min-content, max-content и т.д.

Как это работает

Добавьте это свойство к элементу (часто к :root). Затем используйте обычные CSS-transition для height, и браузер сам обработает остальное.

Контент будет плавно раскрываться от 0 до своей фактической высоты.

И всё. Без JavaScript.

:root {
  interpolate-size: allow-keywords;
}

.content {
  height: 0;
  overflow: clip;
  transition: height 0.3s ease;
}

.content.is-open {
  height: auto;
}

Небольшое замечание про аккордеоны

Да, я знаю, что accordion-компоненты имеют довольно спорную репутацию в кругах UX и accessibility.

Но это отличный пример, чтобы показать, как работает interpolate-size.

Поддержка браузерами

Пока поддержка не идеальная — около 70%.

- Chrome 129+
- Edge 129+
- Opera 115+ ✅

Firefox и Safari — пока нет.

Отдельная благодарность команде Chrome за внедрение этой возможности. Она решает проблему, которая существовала с момента появления CSS transitions.

@WebDev_Plus