CSS Anchor Positioningの対応ブラウザ(2026年9月)。Safari・Firefoxも対応済みだった

CSS Anchor Positioningは、2026年9月時点で主要なブラウザがそろって対応しています。先に要点だけまとめておきます。

• 対応ブラウザ: Chrome・Edge 125以降、Safari 26以降、Firefox 147以降(Can I use、2026年9月30日時点)
• どのブラウザも細かい機能の一部が未対応で、Can I use上は「部分対応」の扱い。Safariは27で全機能に対応した
• 残る課題は古いバージョン。iOS 18以前のiPhoneのSafariでは動かないので、@supportsで出し分ける

訂正(2026年9月30日): 公開時の本文では「Safariは未対応」と書いていましたが、誤りでした。Safariは26.0から対応しています。該当する箇所を書き直しました。

State of CSS 2026で、人気1位と「避けている」1位が同じ機能だった

海外のWeb制作者向けアンケート調査「State of CSS 2026」(回答者4,902人)を見ていたら、意外な結果が出ていました。「今年使い始めたお気に入りのCSS新機能」の1位に選ばれたのが、Anchor Positioning(アンカーポジショニング)という機能でした。

意外だったのは、同じ調査の別の質問で「使いたいのにブラウザ対応の関係で避けている機能」でも、このAnchor Positioningが1位だったことです。人気No.1でありながら、同時に「まだ使えない」No.1でもある。この矛盾した状況が気になって、実際どういう機能なのか、今の実案件で使えるレベルなのか調べてみました。

何ができるのか

仕組みは3行で説明できます。基準にしたい要素にanchor-name: --my-anchorのように名前を付け、位置を合わせたい要素側でposition-anchor: --my-anchorと紐付け、anchor(bottom)のようなanchor()関数で「基準要素の下端に合わせる」といった具体的な位置を指定します。

.trigger {
  anchor-name: --my-anchor;
}

.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  top: anchor(bottom);
  left: anchor(center);
}

このコードだけで、.trigger要素の真下中央に.tooltipが追従します。今までツールチップやドロップダウンメニューの位置合わせは、JavaScriptで座標を計算するライブラリ(Popper.jsなど)に頼るのが定番でした。ボタンにマウスを乗せたら説明を出す、セレクトボックスを開いたら選択肢を表示する、といった「要素同士の位置関係を管理する」処理が、CSSだけで完結するとなれば、人気が出るのも納得です。

同じ調査では、CSSで困っている話題を集計した「トップペインポイント」でも、Positioning(配置)関連が全体1位でした。多くの人が配置まわりで苦労している中、それを解決してくれそうな機能が出てきた、というのが人気の背景にありそうです。

CSS Anchor Positioningの対応ブラウザ

原因はシンプルで、ブラウザの対応状況にばらつきがあるためです。Can I useで確認したところ、Chrome・Edgeは125から、Safariは26.0から、Firefoxは147から対応しています。全世界での対応率は約86%(部分対応込み)です。残りの約14%は主に古いバージョンのブラウザで、iOS 18以前のiPhoneのSafariもここに入ります。

日本のWeb制作の現場では、これは海外の統計以上に効いてくる話だと感じました。日本はiPhoneのシェアが海外と比べてかなり高く、Safariでの表示確認を省略できない案件がほとんどだからです。OSを更新していないiPhoneでは動かないので、「新しい端末では綺麗に動くのに、古いiPhoneのユーザーだけツールチップの位置がズレる」という状態は、普通に事故になります。

今の実案件で使うべきか

対応ブラウザはそろいましたが、古いバージョンが残っている間は、代替なしで使うのはまだ早いという判断です。ただし、CSSの仕様には@supportsという「対応してないブラウザ向けの代替スタイルを用意する」書き方があるので、未対応のブラウザでは従来通りJavaScriptで位置調整し、対応ブラウザだけAnchor Positioningに任せる、という段階的な導入は現実的です。

@supports (anchor-name: --a) {
  /* Anchor Positioning対応ブラウザ向けのスタイル */
}

「知らなかった」では済まされない機能になりつつあるのは間違いないので、古いバージョンが減っていくまでの間は、こういう調査データで動向を追いかけておく価値はありそうです。各ブラウザベンダーが足並みを揃えて対応を進める「Interop」という取り組みもあり、今回のような人気機能ほど優先的に対応が進む傾向があるので、来年には状況が変わっている可能性も十分にあります。

まとめ

「人気No.1」と「まだ使えないNo.1」が同じ機能を指しているという事実は、CSSの新機能を評価するとき、機能そのものの魅力だけでなく、ブラウザ対応という土台まで見ないと判断を誤る、という当たり前だけど忘れがちなことを思い出させてくれました。海外の一次情報を見ていると、こういう「盛り上がってるけど、実務にはまだ早い」という温度差に気づけるのは面白い発見です。このシリーズでは、こんな風に海外発のデータを定期的に覗いて、日本のWeb制作者目線でかみくだいていく予定です。