静的なマーケページや手書き HTML でも、メニューや用語ツールチップはトリガーに「張り付く」必要があり、従来は getBoundingClientRect() の連打でした。CSS アンカー位置指定は anchor-name・position-anchor・anchor() でその関係をスタイルシートに移し、レイアウト更新時も UA が維持します。Popover API でトップレイヤーとフォーカスを扱っているチームには、幾何専用レイヤーとして相性が良いです。MPA／静的ジェネレータ利用者向けに、実機 Safari/WebKit でのサインオフを強調します。レスポンシブカード内のコンポーネントは コンテナクエリ と合わせて設計してください。
静的サイトで解決すること
ドキュメントポータルでは「吹き出しがズレた」が定番の不具合報告です。ユーザーが動的タイプやズームを変えると、JS オフセットは簡単に破綻します。アンカーはブラウザに幾何の契約を渡すため、Eleventy や Hugo、Astro の静的出力でもクライアント JS を削れます。セキュリティ観点では、別オリジン iframe の矩形を読まないため、監査で説明しやすいです。
アクセシビリティでは、フォーカス順やライトディスミスは引き続き Popover か手動制御が必要です。アンカーだけでは不十分な点を設計レビュー表に明記してください。モバイルでは幅 390px 前後、デスクトップでは 1280px を最低限の検証解像度に含めると、営業デモでの破綻を減らせます。
テンプレートごとに固有の anchor-name を静的ビルドで生成すると、同名衝突による z-index 地獄を避けやすくなります。デザイントークンと同じリポジトリで命名規則を管理し、レビュー時に差分を追いやすくしてください。
構文とサンプル
トリガーに anchor-name: --glossary;、オーバーレイに position: absolute; と position-anchor: --glossary; を指定し、top: anchor(bottom); と left: anchor(center);、transform: translateX(-50%); で下中央に配置する典型例です。RTL では論理プロパティとの併用を推奨します。
.help-icon { anchor-name: --glossary-term; }
.help-layer {
position: absolute;
position-anchor: --glossary-term;
top: anchor(bottom);
left: anchor(center);
margin-top: 8px;
transform: translateX(-50%);
}PostCSS ポリフィルに依存しない静的サイトでは、anchor() を単一のコンパイル済み CSS にまとめ gzip 辞書効率を高めます。複数アンカーを切り替える場合は属性セレクタで名前を出し分け、Storybook 的なカタログに期待値スクリーンショットを残すと回帰検知が楽になります。
パフォーマンス面では、スタイル再計算自体は残りますが、ResizeObserver ＋ rAF のカスタムスタックより軽量なことが多いです。ただしアンカー付きレイヤーを三十個以上並べるページでは、クリティカル CSS の分割を検討してください。
2026年ブラウザ対応表
| エンジン | アンカー位置指定 | 静的 QA メモ |
|---|---|---|
| Chromium 125+ | 対応 | DevTools で関係を可視化。 |
| Firefox 147+ | 対応 | 名前欠落時の警告が分かりやすい。 |
| 新しめの Safari 安定版 | 対応（要確認） | マイナー更新のたびに再確認。STP が先行することが多い。 |
| 古い iOS Safari | 多くは未対応 | @supports で分岐必須。 |
2026 年初頭の静的サイト計測では、未対応エンジンが依然 5〜8% のセッションに残る例があります。重要操作をアンカーだけに依存させないでください。
Safari とクラウド Mac ワークフロー
Linux CI だけでは SF フォントと「文字を大きく」の組み合わせを再現しきれません。毎週 30〜45 分、Apple Silicon 実機で安定版 Safari にサインし、STP で WebKit の差分を追う運用が安全です。Web Inspector のレイアウトフェーズを録画すると、デザイナー説得コストが下がります。
調達が遅れる場合は Apple Silicon Mac mini をクラウドレンタルし、SSH でデプロイ、VNC で Safari 操作、実験前にディスクスナップショット、が定石です。短期バーストは 1 日あたり約 $16.9 が目安です。プレビュー環境の Content-Security-Policy とフォントホストを本番と揃えないと、1px のずれが「アンカーの不具合」に見えます。
PR には Chromium と Safari を並べた 2 分の画面録画を添付し、リリースノートに Safari ビルド番号を記載してください。prefers-reduced-motion でアニメ付きアンカーレイヤーを無効化できるかも確認します。
@supports フォールバック
@supports (anchor-name: none) { ... } で新構文を囲み、それ以外は単純な absolute 配置やアコーディオンにフォールバックします。Popover だけあってアンカーがない環境では、位置精度を少し犠牲にしても即座に計測スクリプトを足さない方が長期的に保守しやすいです。キーボード操作のたびにフォーカスが見えるかは手動で確認してください。
テストは 100%・125%・150% ズーム、overflow:auto 内アンカー、印刷メディアで不要な吹き出しを非表示にするケースを含めます。ヘッドレス Chromium で PDF 出力する場合も print 用クエリを通してください。
FAQ
アンカー位置指定と Popover API は同じですか？
いいえ。Popover はトップレイヤーとフォーカス、アンカーは幾何のみです。併用が一般的です。
2026年の Safari はどう確認しますか？
caniuse と STP／安定版のリリースノートを参照し、古い iOS 向けにフォールバックを用意します。
物理 Mac がなくても十分ですか？
自動化は補助に留め、実機またはクラウド Mac の VNC 目視を推奨します。
Mac mini（Apple Silicon）は消費電力が低く静音で、終日 Safari を開いた WebKit 検証に向きます。MacHTML は SSH/VNC 付きのベアメタルレンタルを提供し、CapEx なしでスプリント単位のアンカー／Popover 回帰を潰せます。検証が終わればリソースを解放するだけです。