マーケティング チームは、フレームワーク ランタイムなしでメニュー、ドロワー、同意バナーが所定の位置に「ポップ」する静的 HTML マイクロサイトを依然として出荷しています。それまで@starting-style、作成者は、重複したクラスを含む最初のフレームをインラインで偽装しましたopacity:0ハック、または次のアニメーション フレームで属性を切り替える JavaScript。新しいルールにより、要素の外観を宣言できるようになりますbefore表示された後の最初のスタイル更新は、残りは通常のトランジションに依存します。このガイドはコンパイルされたものを対象としています静的HTML/CSSバンドル、機能をペアリングしますすでに出荷されている Popover API パターン、その理由を説明しますSafari/WebKitハードウェアのサインオフは引き続き必須です。
ブラウザ マトリックス、数値によるガードレール (継続時間の上限、最大翻訳距離)、動きを減らすポリシー、およびレンタルした環境に適合する毎週の Safari チェックリストを携えて出発します。マックミニ budget.
メンタルモデル: 最初のフレームと開いた状態
ポップオーバーが開くと、エンジンはそれを最上位レイヤーに昇格させ、開いたスタイルを適用します。 @starting-style を使用しない場合、最初にペイントされたフレームはすでに「開いた」不透明度と変換を示しているため、非表示状態からの遷移は偽装する必要があります。 @starting-style は、最初のフレームのみに合成開始点を導入します。ペイント後、カスケードは通常のオープン ルールに基づいて再計算します。transitionプロパティはデルタをアニメーション化します。
CMS プレビューと本番環境の間で DOM を同一に保つことができるため、これは静的サイトにとって重要です。追加の追加は必要ありません。.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ミリ秒UI サーフェスの場合。長いフェードは、高リフレッシュの iPhone ディスプレイでは遅く感じられます。垂直移動を制限する8～12ピクセルメニューや16ピクセルモーダルシートの場合、動きがサブリミナルのままになります。
と組み合わせる場合は、popover="auto"、ライトを閉じるタイミングを覚えておいてください。背景フィルターが有効になっている場合、Safari は Chromium とは異なる方法でフレームを結合する可能性があります。両方のエンジンをテストしてください。
ダイアログ要素の場合は、次と組み合わせます。::backdrop慎重に移行します。背景は独自のレイヤーにペイントするため、継続時間が 2 倍以上異なる場合、パネルのモーションから非同期になる可能性があります。40ミリ秒.
静的ジェネレーターは、コンポーネントのパーシャルごとにこれらのブロックを 1 回発行する必要があります。異なるクラス名を持つ数十ページにわたって、同一の @starting-style セクションが重複することを避けてください。
2026 年のブラウザ マトリックス
| Engine | @starting-style | 静的 QA フォーカス |
|---|---|---|
| クロム117+ | Supported | DevTools は、アニメーション インスペクターで開始状態と開いた状態を表示します。 |
| Firefox 129+ | Supported | トランジションで開始値からアニメーション化できないプロパティをリストする場合、強力な警告が表示されます。 |
| サファリ 17.4+ | Supported | 各マイナー リリースを再テストします。 STPは、背景+ポップオーバーのコンボでは異なる場合があります。 |
| レガシー WebKit | None | 不透明度のみまたはインスタントオープンフォールバックを提供します。 |
クラウド Mac mini 上の Safari QA
Playwright WebKit は解析エラーを検出しますが、Dynamic Type がフォントを拡大縮小するときの微妙な 1 フレームの点滅は検出しません。割り当てる25～40分Apple シリコンのリリースごと: 契約上のサインオフには安定した Safari、回帰を二分する場合は Safari テクノロジー プレビュー。
ハードウェアの調達が遅い場合はクラウドをレンタルするマックミニスプリントに向けて。 MacHTML Apple Silicon ホストの価格は通常、ほぼ同じです$16.9/日、静的バンドルをプッシュするための SSH と、インタラクティブなアニメーション レビューのための VNC が含まれており、一晩レンタルするラップトップよりも安価です。
鏡の製作font-display、WebフォントのURL、およびbackdrop-filterプレビュー時の設定。フォントが一致しないと、グリフ メトリクスが変更され、CSS がバイトごとに一致する場合でも変換が「間違っている」ように見えます。
スローモーション画面録画をキャプチャします。120fpsマーケティングが「単一フレームのフラッシュ」に異議を唱えた場合。 Safari の GPU コンポジターは、レイヤーをプロモートするときに 1 つの明るいフレームを放出することがあります。
操作では CDN キャッシュ キーを @starting-style ルールを含む CSS ハッシュに結び付ける必要があるため、部分的なデプロイでは古い HTML と新しいアニメーション トークンがペアになることがありません。
動きの軽減と前庭の安全性
大きな翻訳をラップする@media (prefers-reduced-motion: reduce)そしてキャップの動きは2～4ピクセルより短い期間で。 macOS でコントラストの増加も有効にしているユーザーにインスタント オープンを提供します。
WCAG モーション ガイダンスを満たすために @starting-style だけに依存しないでください。やはりユーザー設定を尊重する必要があります。
テスト チェックリスト: 開始フレーム中にフォーカス リングが表示されたままであることを確認し、1 フレームの不透明度が 0 であってもスクリーン リーダーが状態の変化を認識することを確認し、各アニメーション リファクタリングの後に VoiceOver を実行します。
国際化: CJK 改行はロケール間でパネルの高さを変更できます。次の場合に変換がディセンダをクリップしないことを確認します。translateYが適用されます。
セキュリティレビュー担当者は、不透明度がゼロから始まる場合のクリックジャッキングを心配することがあります。ヒットテストウィンドウが悪用されないように注意してください。 @starting-style は、イベント ターゲティングのセマンティクスを変更しません。
カスケード層と特異性トラップ
@starting-style ブロックを同じ場所に配置します@layerコンポーネントのスタイルとして。ユーティリティが上位レイヤーに存在する場合、開始時の不透明度を誤ってオーバーライドし、効果を壊してしまう可能性があります。スタイルガイド内のドキュメントレイヤーの順序:reset, components, utilitiesは共通のベースラインです。
マーケティング部門が緊急事態に備えてインライン スタイルを導入する場合は、決して設定しないように指導してくださいtransition:noneアニメーション化されたシェルでは、@starting-styleとオープン状態の間のブリッジが無効になります。
パーシャルのバージョンを指定します。 @starting-style ブロックが変更されるたびにコメント ヘッダーをバンプして、監査中に Git の責任を読み取れるようにします。
測定後にのみコンテナ クエリと組み合わせます。ネストされたコンテインメントにより、最初のフレーム タイミングを数ミリ秒ずらす追加のレイアウト パスが強制される可能性があります。通常は問題ありませんが、低電力デバイスでは表示されます。
最後に、lint を禁止するルールを追加します。animation期間が明示的に確認されない限り、@starting-style と同じセレクターの短縮形。短縮形のリセットは、遷移リストを静かに破壊する可能性があります。
パフォーマンスとメインスレッドの規律
新しいアニメーション化されたサーフェスごとに、コンポジタの作業が増加します。 Apple シリコン ラップトップでは、これが致命的になることはほとんどありませんが、Safari QA と CI スクリーンショットの両方を提供するファンレス ミニでは、同時のアニメーション ポップオーバーを以下に留めてください。three上のフレームドロップを避けるためにビューポートごとに8ミリ秒スクロール中。
Prefer transform and opacity@starting-style 宣言の場合。アニメーションを避けるbox-shadowWebKit 上で再ペイントの多いパスを強制するため、開始ブロックからの半径をぼかします。
マーケティングで「ぼかし」効果をリクエストする場合は、すでに静的ぼかしが含まれている疑似要素に不透明度を付けて偽装します。フィルター カーネルをフレームごとにアニメーション化するよりも安価です。
これらの予算をコンポーネントの README に文書化して、将来のブランド変更時に、厳しい期限内でコンポジターの制限を再学習するのではなく、同じパフォーマンス契約を継承できるようにします。
FAQ
@starting-style は Popover API を置き換えますか?
いいえ - ポップオーバーはインタラクションとトップレイヤーを処理します。 @starting-style は最初のフレームのペイントを処理します。
Safari は本番環境に対応していますか?
サポートされているバージョンでははい。リリースごとにハードウェア QA をスケジュールします。
QA時間はどのくらいですか?
Safari に集中する 25 ～ 40 分と、動きを減らすための 15 分を計画してください。
Apple Silicon Mac miniWebKit アニメーションの議論を解決する最も早い方法は依然としてあります。ネイティブ合成、長時間の録画セッション中の予測可能なサーマル、Linux VM ではエミュレートできない macOS アクセシビリティの切り替えなどです。MacHTMLSSH/VNC を備えたクラウド Mac mini ホストをレンタルしているため、静的サイト チームは別の CapEx サイクル (スプリントのプロビジョニング、証拠のキャプチャ、グリーンになったら取り外す) を行わずに @starting-style、ポップオーバー、ダイアログ スタックを検証できます。
Safari @クラウドMac miniで始めるスタイルQA
Apple Silicon ハードウェアをレンタルして、実際の WebKit 合成を使用して最初のフレームのアニメーション、ポップオーバーのタイミング、モーションの削減されたパスを検証します。