Каждый верстальщик и фронтенд-разработчик прекрасно помнит неловкое чувство, когда для создания простого выпадающего списка или плавного аккордеона приходилось либо подключать десятки строк JavaScript, либо прибегать к грязным CSS-хакам с max-height: 1000px. Проблема казалась вечной: браузерные движки на протяжении тридцати лет отказывались интерполировать размеры элементов, если конечной точкой перехода было ключевое слово auto или fit-content.
Выход тестовой сборки Safari Technology Preview 254 от инженеров Apple знаменует долгожданный перелом. Движок WebKit получил мощный блок современных спецификаций CSS: долгожданный шортхенд size, свойство interpolate-size и математическую функцию calc-size(). Вместе они избавляют веб от костыльного кода и переносят сложные геометрические трансформации на уровень видеокарты.
Прощайте, костыли с max-height: как interpolate-size открывает анимацию auto
Корневая причина проблемы крылась в механике компоновщика браузера: чтобы построить плавную CSS-анимацию transition: height 0.3s, движку требовались точные числовые значения в пикселях на каждом кадре. Но значение height: auto вычисляется только после того, как все дочерние элементы отрендерены, поэтому попытка анимировать переход от нуля к auto приводила к мгновенному скачку.
Хак с max-height создавал массу проблем: анимация начиналась с задержкой или дергалась, потому что тайминг-функция распределялась по виртуальной тысяче пикселей, а не по реальной высоте блока.
Свойство interpolate-size: allow-keywords полностью решает эту задачу. Достаточно объявить его на корневом элементе страницы или конкретном контейнере, и браузер берет на себя непрерывный расчет промежуточных кадров к натуральной высоте содержимого.
Шортхенд size и гибридные вычисления через функцию calc-size()
Второе долгожданное удобство — сокращенное свойство size. Сколько раз в стилизации аватарок, иконок и кнопок приходилось писать парные строки width: 40px; height: 40px;? Теперь синтаксис становится лаконичным:
/* Квадратный элемент: одно значение задает ширину и высоту */
.user-avatar {
size: 48px;
border-radius: 50%;
}
/* Прямоугольный блок: два значения (ширина и высота) */
.hero-banner {
size: 100% 360px;
}
А если требуется задать высоту блока, равную содержимому, но добавить к ней фиксированный отступ снизу под кнопку? Обычная функция calc(auto + 20px) в CSS запрещена спецификацией. Для гибридных выражений вводится специальная функция calc-size(basis, calculation):
/* Включаем поддержку анимации ключевых слов */
:root {
interpolate-size: allow-keywords;
}
/* Идеальный аккордеон без единой строчки JavaScript */
.accordion-content {
height: 0;
overflow: hidden;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-item[open] .accordion-content {
/* Плавный переход прямо к реальной высоте контента плюс запас */
height: calc-size(auto, size + 16px);
}
Кроссбраузерный статус и прогрессивное улучшение через @supports
Появление этих возможностей в WebKit имеет критическое значение для экосистемы. Ранее поддержка interpolate-size и calc-size() уже была стабилизирована в Chromium (начиная с версий Chrome 129+), а команда Firefox активно работает над ней в рамках совместной инициативы Interop. Реализация в Safari означает, что поддержка охватывает подавляющее большинство пользовательских устройств, включая iOS и macOS.
Для безопасного внедрения в продакшен уже сегодня рекомендуется использовать директиву @supports:
/* Прогрессивное улучшение: плавный CSS там, где поддерживается */
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
}
Safari TP 254 также включает шортхенды скругления углов border-*-radius и стилизацию селектора ::picker-icon для нативного элемента <select>. Веб-платформа стремительно избавляется от необходимости во вспомогательных скриптах, возвращая верстке естественную легкость и 120 кадров в секунду на аппаратном ускорении.