CSS @starting-style 2026: статические состояния ввода HTML, выход из Safari, облачный Mac

Маркетинговые команды по-прежнему выпускают статические микросайты HTML, где меню, ящики и баннеры согласия «всплывают» на свои места без среды выполнения фреймворка. До@starting-style, авторы подделывали первые кадры с дублированными классами, встроеннымиopacity:0хаки или JavaScript, который переключал атрибуты в следующем кадре анимации. Новое правило позволяет вам указывать, как выглядит элемент.beforeпервое обновление стиля после того, как оно станет видимым, а в остальном полагайтесь на обычные переходы. Это руководство предназначено для составлениястатический HTML/CSSсвязывает эту функцию сШаблоны API Popover, которые вы уже отправляетеи объясняет, почемуSafari/WebKitПодтверждение аппаратного обеспечения остается обязательным.

Вы уйдете с матрицей браузера, цифровыми ограничителями (ограничения продолжительности, максимальное расстояние перевода), политикой ограниченного движения и еженедельным контрольным списком Safari, который соответствует арендованномуМак мини budget.

Ментальная модель: первый кадр против открытого состояния

Когда всплывающее окно открывается, движок перемещает его на верхний уровень и применяет открытые стили. Без @starting-style первый нарисованный кадр уже показывает «открытую» непрозрачность и трансформацию, поэтому любой переход из скрытого состояния должен быть имитирован. @starting-style представляет синтетическую отправную точку только для этого первого кадра. После рисования каскад пересчитывает обычные открытые правила иtransitionсвойства анимируют дельту.

Это важно для статических сайтов, поскольку вы можете сохранить идентичность DOM между предварительной версией CMS и рабочей версией: никаких дополнительных действий..is-enteringкласс, управляемый специальным JS. Доступность улучшается, поскольку контуры, видимые в фокусе, могут выравниваться по тому же времени, что и непрозрачность.

Ограничение: @starting-style не изобретает макет. Если элемент былdisplay:none, он по-прежнему подчиняется тем же правилам дерева ящиков, что и раньше; вы стилизуете первый кадр, как только он станет отображен.

Телеметрия из систем общественного проектирования в начале 2026 года предполагает примерно5–8%сеансов по-прежнему выполняются в браузерах без поддержки — планируйте постепенное улучшение.

Дизайнеры должны аннотировать временные шкалы Figma токенами «старт» и «постоянный», чтобы инженеры сопоставляли их непосредственно с блоками CSS, а не угадывали кривые замедления.

Авторский синтаксис с переходами

Минимальный шаблон для всплывающей панели:

.panel {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
}
@starting-style {
  .panel {
    opacity: 0;
    transform: translateY(8px);
  }
}

Держите продолжительность ниже320 мсдля поверхностей пользовательского интерфейса; более длинные затухания кажутся вялыми на дисплеях iPhone с высокой частотой обновления. Ограничьте вертикальное перемещение до8–12 пикселейдля меню и16 пикселейдля модальных листов, чтобы движение оставалось подсознательным.

При сочетании сpopover="auto"Помните о времени отключения света: Safari может объединять кадры иначе, чем Chromium, если включены фоновые фильтры — проверьте оба механизма.

Для элементов диалога сочетайте их с::backdropпереходы осуществляются осторожно; Фон рисуется на своем собственном слое и может рассинхронизироваться с движением панели, если длительность отличается более чем на40 мс.

Статические генераторы должны генерировать эти блоки один раз для каждого компонента; избегайте дублирования одинаковых разделов в стиле @starting на десятках страниц с разными именами классов.

Браузерная матрица 2026 года

Engine	@starting-style	Статический фокус контроля качества
Хром 117+	Supported	DevTools показывает стартовое и открытое состояния в инспекторе анимации.
Фаерфокс 129+	Supported	Строгие предупреждения, когда свойства списка переходов не могут быть анимированы из начальных значений.
Сафари 17.4+	Supported	Повторно протестируйте каждый второстепенный выпуск; STP может отличаться для комбинаций фон+поповер.
Устаревший веб-кит	None	Обеспечьте только непрозрачность или мгновенный резервный вариант открытия.

Контроль качества Safari на облачном Mac mini

Playwright WebKit улавливает ошибки синтаксического анализа, но не мелькает один кадр, когда динамический тип масштабирует шрифты. Выделить25–40 минутза выпуск для Apple Silicon: стабильная версия Safari для подписания контракта, Safari Technology Preview при разделении регрессий пополам.

Если закупка оборудования идет медленно, арендуйте облакоМак минидля спринта. MacHTML Хосты Apple Silicon обычно стоят около16,9 долларов США/день, включают SSH для отправки статических пакетов и VNC для интерактивного просмотра анимации — дешевле, чем брать в аренду ноутбуки на ночь.

Производство зеркалfont-display, URL-адреса веб-шрифтов иbackdrop-filterнастройки предварительного просмотра; несовпадающие шрифты изменяют метрики глифов и делают преобразования «неправильными», даже если CSS соответствует побайтно.

Захватывайте замедленные записи экрана на120 кадров в секундукогда маркетинг оспаривает «одинарную вспышку»; Компоновщик графического процессора Safari иногда выдает один яркий кадр при продвижении слоев.

Операции должны связывать ключи кэша CDN с хэшем CSS, содержащим правила @starting-style, чтобы при частичном развертывании никогда не соединялся устаревший HTML с новыми токенами анимации.

Ограничение движений и вестибулярная безопасность.

Оберните большие переводы в@media (prefers-reduced-motion: reduce)и движение кепки, чтобы2–4 пикселяс более короткими сроками. Предлагайте мгновенное открытие для пользователей, которые также включили функцию увеличения контрастности в macOS.

Не полагайтесь только на @starting-style для соответствия рекомендациям WCAG по движению — вам все равно необходимо соблюдать пользовательские настройки.

Контрольный список тестирования: убедитесь, что кольца фокусировки остаются видимыми в течение начального кадра, убедитесь, что программы чтения с экрана слышат изменения состояния, даже если непрозрачность равна нулю для одного кадра, и запускайте VoiceOver после каждого рефакторинга анимации.

Интернационализация: разрывы строк CJK могут изменять высоту панели между локалями; убедитесь, что преобразования не обрезают нижние элементы, когдаtranslateYприменяется.

Рецензенты безопасности иногда беспокоятся о кликджекинге, когда непрозрачность начинается с нуля — убедитесь, что окна проверки попадания не используются неправильно; @starting-style не меняет семантику таргетинга на события.

Каскадные слои и ловушки специфичности

Разместите блоки @starting-style в одном месте.@layerкак стили вашего компонента. Если утилиты находятся на более высоком уровне, они могут случайно переопределить начальную непрозрачность и нарушить эффект. Порядок слоев документа в руководстве по стилю:reset, components, utilitiesявляется общей базовой линией.

Когда маркетинг вводит встроенные стили на случай чрезвычайных ситуаций, научите их никогда не устанавливатьtransition:noneв анимированных оболочках — он отключает мост между стартовым стилем и открытым состоянием.

Версируйте свои частичные файлы: добавляйте заголовок комментария при каждом изменении блоков @starting-style, чтобы вина Git оставалась читабельной во время аудита.

Комбинируйте с запросами контейнера только после измерения: вложенное вложение может вызвать дополнительные проходы макета, которые смещают синхронизацию первого кадра на несколько миллисекунд — обычно это нормально, но заметно на устройствах с низким энергопотреблением.

Наконец, добавьте правило lint, запрещающееanimationсокращение того же селектора, что и @starting-style, если продолжительность не просматривается явно — сброс сокращений может незаметно уничтожить списки переходов.

Производительность и дисциплина основного потока

Каждая новая анимированная поверхность увеличивает объем работы композитора. На кремниевых ноутбуках Apple это редко бывает катастрофическим, но на безвентиляторных мини-ноутбуках, на которых отображаются скриншоты Safari QA и CI, сохраняйте одновременные анимированные всплывающие окна ниже.threeна область просмотра, чтобы избежать падения кадров выше8 мсво время прокрутки.

Prefer transform and opacityдля объявлений @starting-style; избегайте анимацииbox-shadowрадиус размытия от начального блока, потому что он заставляет перерисовывать пути в WebKit.

Когда маркетинг требует эффектов «размытия», имитируйте их с помощью непрозрачности псевдоэлемента, который уже содержит статическое размытие — это дешевле, чем покадровая анимация ядер фильтров.

Задокументируйте эти бюджеты в README вашего компонента, чтобы будущие ребренды наследовали тот же контракт производительности вместо повторного изучения ограничений наборщика в сжатые сроки.

FAQ

Заменяет ли @starting-style API Popover?

Нет — всплывающее окно управляет взаимодействием и верхним слоем; @starting-style обрабатывает отрисовку первого кадра.

Готово ли Safari к выпуску?

Да, для поддерживаемых версий — по-прежнему планируйте контроль качества оборудования для каждого выпуска.

Сколько времени занимает контроль качества?

Запланируйте 25–40 минут сафари-фокусировки плюс 15 минут на сокращение движений.

Apple Silicon Mac miniостается самым быстрым способом разрешения споров об анимации WebKit: встроенная композиция, предсказуемые термические параметры во время длительных сеансов записи и переключатели доступности macOS, которые виртуальные машины Linux не могут эмулировать.MacHTMLарендует облачные хосты Mac mini с SSH/VNC, чтобы команды статических сайтов могли проверять стеки @starting-style, popover и диалогов без еще одного цикла капитальных затрат — обеспечить спринт, собрать доказательства, снести, когда зеленый.