静的HTMLチームは @layer でデザイントークンとコンポーネント、マーケ上書きを整理したのに、Safari だけ見出し色が崩れ、Chrome は完璧——という事故が増えている。2026年のカスケードは特異性だけでは決まらず、レイヤー順・オリジン・importance・そもそもレイヤーに入っているかが勝敗を分ける。本稿では誰が明示レイヤーを必要とするか、!important が同オリジン内で順序を反転させる理由、WebKit 特有の落とし穴、そして日単位で借りられる Apple Silicon Mac mini 上で同一バンドルを Safari と Chrome に当てるリハーサル手順をまとめる。
隣接トピックとして mix-blend-mode と合成レイヤーの実機リハーサル と Speculation Rules による静的MPAの先読み も参照し、描画・先読み・カスケードの方針を揃えたい。
@layer が要るケース
gzip 40 KB 未満の単一スタイルで埋め込みもないならレイヤーはノイズになりがち。トークンCSS・コンポーネントライブラリ・マーケ上書き・チャットウィジェットのインライン <style> が混ざると、順序をコードで表現したくなる。@layer tokens, base, components, utilities, overrides; のように宣言順を読めば、口伝のコメント帯よりも安全に引き継げる。BEMユーティリティから移行するチームは、レイヤー内で再び特異性戦争をしないこと——レイヤーは関心横断のソース順を解決するもので、似た名前の2クラスの微差ではない。
レイヤー順と未レイヤー
同オリジンの通常宣言では、宣言済みレイヤー（宣言順）すべてが、未レイヤーより前に評価される。特異性が低い未レイヤーでもレイヤー内を上書きし得る。対策はルールを @layer overrides に移すか、「未レイヤーは最終砦」という運用を文書化すること。README に一行あるだけで、外注が末尾に裸のセレクタを足す事故は減る。
!important の反転
同オリジンでは !important が順序を反転させ、レイヤー内 important が未レイヤー important を抑えやすい。ダークモードの CSS 変数を @layer theme で important にし、レスポンシブ側をレイヤー外 important にすると、端末幅で色が消える。チーム指標として important 密度を 1000宣言あたり1回未満 に抑え、ビルド後CSSをスキャンして逸脱を検知したい。
フレームワークとトークン
Tailwind v4 系の preflight はレイヤー付きで出荷されることが多い。ベンダーCSSを二重バンドルすると匿名レイヤーが二つでき、チャンク分割で順序が揺れる。動的 import() でCSSを増やすマーケタグは禁止か、必ず名前付きレイヤーを宣言させる。Vite+素のHTMLでは先頭の layers.css に順序だけ書き、@import をレイヤーに紐づける。gzip 合計 120 KB を目安にモバイル Safari の初回解析を抑える。
@import とパフォーマンス
宣言的 @import はチェーン解決までレンダリングをブロックする。FCP 200 ms を狙う静的サイトでは、ビルドでインライン化し @layer ブロックを保持する方が安全。import するなら最初のファイルの最上部に限定する。Safari はファイル途中の import で静かに失敗することがあり、埋め込みWebViewでは気づきにくい。
コンテナクエリとレイヤー
@container で囲んだセレクタもレイヤー所属でファイル間の勝敗が決まる。誤って @layer utilities を @layer components の内側へ貼り付けると、バンドラによってはフラット化の挙動が変わる。ビルド後CSSで @layer utilities の出現回数を数え、2回を超えたらマージ不具合を疑う。
WebKit と Chromium
2026年初頭時点で標準スタイルのレイヤー実装は揃いつつも、@scope との相互作用や拡張からの constructed stylesheet などに差が残る。Safari Technology Preview は安定版より 1〜2 リリース先行しがちだが、企業ユーザが N-1 に固定されているなら安定 Safari を主役に。Chrome Canary は modulepreload とCSS順序の組み合わせバグを拾うのに有効。
意思決定表
| 症状 | 原因候補 | 最初の手 |
|---|---|---|
| Chrome OK / Safari 色ズレ | レイヤー後に未レイヤーのベンダCSS | @layer components へ移動 |
| ダーク変数が死ぬ | レイヤー外 important が勝つ | important を @layer theme に集約 |
| 遅延ロードで順不同 | 匿名レイヤーの重複 | チャンクごとに明示名 |
| utility が負ける | レイヤー宣言順が逆 | 順序を修正 |
macOS リハーサル
- 本番CSSをハッシュ付きでビルドし、SHA-256 の先頭 8 hex をチケットに記録。
- Safari安定版でキャッシュ無効化し、375/768/1280 px で全画面キャプチャ。
- Chrome でも同寸法。フォントラスタ差を許容する diff ツールで比較。
- ロード後 3 秒のタイムラインで遅延注入スタイルを確認。
/docs/visualに CSS ハッシュをファイル名へ含めて保存。
専用 Mac mini なら睡眠・VPN・GPU差によるブレを避けられる。MacHTML のレンタルは約 $16.9/日 で、本番カスケード事故1件の損失より安い。
FAQ
未レイヤーは常に強い？
通常宣言ではレイヤー全体の後に来るため、多くの場合レイヤーを上書きできる。
!important は？
同オリジンでは順序が反転し、レイヤー内 important が優先されやすい。
マーケCSSは？
独立レイヤーに分け、触れる人を限定する。
Linux CI だけで足りる？
WebKit とシステムフォントの差を再現できない。
Apple Silicon Mac mini はファンが静かで、デザイナと並んで Web Inspector を開いても邪魔にならない。MacHTML 経由のレンタルなら SSH と必要なら VNC を組み合わせ、リリース週だけ立ち上げて検証後に停止——キャパシティを資産ではなくカレンダーに紐づけられる。
画面収録でステークホルダへ説明するときも、静音性は説得力になる。