2026 年、静的 HTML と Safari サインオフのための CSS :has() とクラウド Mac QA

静的なランディングやドキュメントはいまも大量の手書き HTML で配信されます。これまで親要素の見た目を子の状態に合わせるには JavaScript か二重のラッパーが要りました。:has() という関係疑似クラスは向きを逆にします。内部のチェックボックスがオンならセクションの枠を変えたり、入力が無効ならフォーム行を強調したり——バンドラなし、しばしば JS ゼロで実現できます。2026 年、対象が Safari 15.4 以降 に十分寄っていれば、多くのチームが視覚的手掛かりに :has() を採用できます。条件は本物の WebKit で検証し、セレクタの複雑さを抑えることです。本稿では実践パターン、JS や コンテナクエリ との判断表、Safari QA ワークフロー への組み込みと、レンタル Mac mini での確認方法を整理します。

静的ページで :has() が効く場面

従来の CSS は祖先から子へは選べても（.theme-dark .card）、逆方向は表現できませんでした。プロダクトは React でクラスを同期したり、data-* で子状態を写し取っていました。JS ゼロの静的サイト——法務、API リファレンス、キャンペーン LP——ではその摩擦が細かな UX を止めます。:has() は意図を一行で書けます。「.error-text を含むからこのカードはエラー」という具合です。アクセシビリティではラベルや ARIA はこれまで通り。:has() は装飾を担い、意味を置き換えません。

宣言的なので CodePen のセレクタを Eleventy や Hugo の成果物にそのまま載せられ、水合も不要です。代わりに強力すぎてネストしがちです。マーケ用テンプレでは「:has() のあと二つまでの結合子」などの家則を決め、grep で追えるようにしておくと保守が楽です。

ポータル付きの検索オーバーレイのように DOM が頻繁に変わる根には :has() を載せない方がよいでしょう。静的でも、カード・フィールドグループ・表セクションなど安定したコンテナを根にします。多言語では訳文の長さで DOM が変わるので、言語ごとに一度ずつ確認してください。

そのまま使える構文パターン

自己完結したコンポーネントから。どれかのコントロールが :focus-visible のときフィールドグループを光らせる例：

.field-group:has(:focus-visible) {
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.35);
}

セルに欠訳フラグがある行を強調する例：

tr:has(td[data-missing="true"]) {
  background: rgba(255, 59, 48, 0.08);
}

:not() と組み合わせて除外状態も書けますが、空入力の検出は制約検証 API の方が表現力があります。ルールが属性セレクタを超えるなら短いスクリプトでクラスを切り替えた方が読みやすいです。

ダークテーマでは color-scheme や prefers-reduced-motion と並行して、子に動画がありユーザーが動きを減らしたい設定なら親のシャドウを弱める、といったパターンも静的 HTML で成立します。メディアクエリと :has() のカスケード順をスタイルシートで明示し、後から読み込むテーマ CSS に上書きされないよう注意します。

Safari の対応時期とテスト観点

• Safari 15.4（2022 年 3 月）が macOS 12.3、iOS / iPadOS 15.4 で :has() を出荷。他エンジンでも Chromium 105 付近のリズムに近いです。
• Monterey 12.3 未満に固定された企業端末が分析に 3〜4% も売上に効くなら、:has() なしでも意味が通る枠線色を用意します。
• 一部の WebKit 修正は Safari Technology Preview が先です。nth-child まわりの不具合報告を見たら安定版と STP を比較し、静的リリースごとに再テストを書き留めます。

README に Node やパッケージマネージャと並べて最低 Safari を書き、外注が締切直前に :has() を削る事故を防ぎます。半年ごとに企業フリートの更新状況を見直してください。

CDN グレーアウトでは古い Safari にだけ簡素化 CSS を足し、HTML を二重管理しない方針も取れます。:has() は拡張として、無いときも本文が読めフォームが送れることを先に保証します。

判断表：:has()、JS、@container

ニーズ	優先	理由
子が無効のとき親を強調	:has(:invalid)	JS なし、オフライン静的 HTML で可。
サイドバー幅でグリッド軌道を変える	@container	幅駆動レイアウトはコンテナクエリの仕事。
JSON を POST しサーバーエラーを出す	JavaScript	ネットワークと ARIA ライブは CSS の外。
チェックが一つでも付いたらアイコン	:has(:checked)	宣言的。label が正しければアクセシブル。
スクロール深度のビーコンを間引く	JavaScript	CSS だけでは安全にビーコンを打てない。

:has() と @container が両方関係するときは、コンテナでマクロ、:has() でコンポーネント内のミクロに分けると読みやすいです。同じ要素に両方を厚く載せるのは稀に有益です。

コンテナクエリ と併用する場合は、図で「誰が親ボックスの幅に反応し、誰が子の状態に反応するか」を先に決めるとレビューが速くなります。

パフォーマンスとセレクタ衛生

子が変わるたびブラウザは関係セレクタを再評価します。単一ページが 4000 ノード超 でも body:has(.modal[open]) { overflow: hidden; } は大抵問題ありませんが、高頻度アニメーションに複数の :has() を結びつけるのは避けます。WebKit は局所サブツリーの無効化が効率的なので、根はカードやフォーム近くに置きます。中級ノート PC で hover の嵐のとき紫のスタイル再計算が 2〜3ms を超え続けるなら、ラッパーに一つの委譲リスナでクラスを切り替えましょう。

Stylelint で特異度を抑え、クラウド Mac 上の CI で macOS 特有の退行を早期に捕まえます。短期キャンペーン用にノートを追加購入するより Apple Silicon をレンタルする方が CapEx に優しいことも多いです。

セキュリティ上 :has() は任意のテキスト内容にはマッチできず、構造と疑似クラスのみなので、それ単体ではデータ流出経路になりません。ただしユーザー生成クラス名を含むセレクタ文字列をそのまま分析 SaaS に送るのは避けてください。

レガシー BEM の .card--error を移行するときは、計測フック用にクラスを残しつつ見た目は :has() に寄せ、イベント計測を data 属性へ移してから修飾子を削る二段構えが安全です。冗長なトグル用スクリプトを捨てると gzip で 2〜4KB ほど縮む静的サイトも珍しくありません。

印刷スタイルで :has() を使うなら Safari の印刷プレビューを別途通してください。PDF アーカイブ用途のユーザーには白背景でエラー枠が見えないミスが起きがちです。

クラウド Mac mini での QA チェックリスト

Safari 安定版の入った macOS をレンタルし、file:// かローカル静的サーバーでビルドを開きます。キーボードのみのフォーム操作、強制無効状態、200% ズームでの切り抜けを確認。バグバッシュでは 1280×720 の画面収録で足ります。実機 Mac が無いチームは SSH とときどき VNC の組み合わせで他記事と同様に回せます。

Apple Silicon Mac mini は夜間に二十本の HTML テンプレへ lint とスタイル計測を流しても静かです。国境をまたぐチームは一台の検証用 Mac を共有し、ノートを郵送しなくてよくなります。

自動スモークとして、ページを開きサンプル入力を合法/違法で切り替え、:has() 根の計算スタイルをスクショ保存するだけでも、WebKit と Chromium の差が出たときに 25〜35 分 の口論を防げます。

STP と安定版の比較ワークフロー と組み合わせるなら、変更ログに「今回 STP で再確認したか」を書き、プレビュー専用の挙動を本番保証と混同しないようにします。

FAQ

:has() はどの Safari から？

Safari 15.4（2022 年 3 月、macOS 12.3 と iOS 15.4）から。Safari 14 が残るなら :has() なしのフォールバックを。

フォームの JS を全部 :has() に？

装飾なら多くよい。検証文、ライブリージョン、サーバー往復には JS か HTML の意味づけが要ります。

パフォーマンスは？

巨大ページの深い連鎖は再計算を増やします。局所に留め、5k ノード LP のすべての hover に結びつけず、Web Inspector で測りましょう。

規律を守れば :has() は静的 HTML のボイラープレートを減らしバンドルを細く保てます。Chromium だけでなく実際の Safari セッションをセットにしてください。Mac mini はネイティブ WebKit、低い待機電力、静かな運転を一度に揃えます。MacHTML は SSH / VNC 付きの物理 Mac mini レンタルを提供し、リリース枠だけ WebKit ラボを立ち上げ、終わったら縮小できます。