2026 リモート Mac フロント公開検収：
CSS Container Queries と @layer — Safari／Chromium 対照表＋三步
コンテナクエリはブレークポイントをコンポーネントの箱へ、@layerはトークンと第三者 CSS を整理します。見落としがちなのはネスト containmentと未レイヤー優先です。Safari／Chromium 対照表、公開前三歩、構造化データ・FAQ。ホーム、ブログ一覧、Web 運用トラブルシュート、デプロイ前スモーク。
01 コンテナクエリとレイヤーを公開ゲートに入れる理由
ネスト @container はビューポート撮影では「箱は狭い」のを見逃しがち。size は高さ依存のため幅だけの CI では Safari の縦崩れを再現しづらい。@layer は非同期チャンクと未レイヤー CSS で Chrome と WebKit で順がずれることがあります。
02 検収向け対照表（構文辞典ではありません）
出荷判断向けの差分のみ。最低 Safari／Chromium を先に揃えてください。
| テーマ | Chromium（Chrome／Edge） | Safari（WebKit） |
|---|---|---|
| コンテナクエリの単位 | DevTools でコンテナ追跡しやすい。vw／cqw 混在注意。 |
overflow:auto 親・ネスト flex の文脈を実寸で。 |
size と inline-size |
ブロック軸抜けに注意。 | 縦余白も変える。幅だけにしない。 |
@layer |
動的 import で順が崩れやすい。 | 計算スタイルで勝者確認。バンドル順にも依存。 |
| クリティカル CSS | 遅延 import が順を変える。 | インラインに layer がないと未レイヤー優先。 |
| 自動化 | ヘッドレス Chromium で回帰量。 | RC は実機 Safari。Playwright、Vitest 対照。 |
03 公開前三歩（同一ビルドで実施）
同一アーティファクト＋ステージングに紐づけてからマージ。
- 基線凍結：リモート Mac／CI の Safari・Chromium 最低版を明記。古いランナーは不合格。
- 演習：各
@containerで狭／広二態。競合は両エンジンで計算スタイル。モーダル・埋め込み含む。 - 証跡：リモート Mac の Safari でステージングをスクショまたは短録画し Chromium と並べてチケットへ。
04 パイプライン向け補足（二点）
- 成果物：デプロイ前スモーク同様
artifacts/に両エンジン画像・ビルド番号・SHA。 - レイヤー出所：効いている
@layerをメイン／チャンク／インラインで短くメモし順序崩れを防ぐ。
最低版・コンテナ二態・計算スタイル・URL／ビルド番号・Safari ファイル名に日付／ブランチ。
05 構造化データの提案
JSON-LD は BlogPosting、パンくず、HowTo、FAQPage。安定後は TechArticle も可。リッチリザルト検証で本文と整合させ、FAQ の URL 重複は避けます。
06 FAQ
コンテナクエリは両エンジンで同じですか？
仕様は同じ。差はレイアウト／スクロール包含に出やすい。
Chrome では問題ないのに Safari でレイヤーがおかしい
未レイヤー・重複 @layer・非同期順を疑い、計算スタイルで突合。ソース diff だけでは不足。
Playwright WebKit があれば Safari は不要？
ボットは回帰量向け。RC は実機 Safari で GPU／フォント敏感ページを一度。
① 基線凍結 ② テンプレでコンテナ／レイヤー演習＋計算スタイル ③ リモート Mac Safari で証跡をチケットへ。