CSS Anchor Positioning＆::checkmark疑似要素：Safari対応で変わる2026年Web標準
CSS Anchor PositioningがSafariで試験運用へ
2026年4月、Safari Technology PreviewにCSS Anchor Positioningの試験的フラグが追加された。CSS-Tricksの記事「What’s !important #12」が報じたこのニュースは、長年「position: absolute」の貧弱な相対指定しかなかったフロントエンド開発者にとって、構造的な転換点となる。
CSS Anchor Positioningは、特定の要素（アンカー）を基準に、別の要素を絶対配置する新しい仕様。従来のabsoluteは親要素や直近のpositioned ancestorに依存するが、アンカーは任意の要素を指定できる。ツールチップ、ポップオーバー、ドロップダウンメニューといったUI部品の実装コストが大幅に下がる。
なぜSafariの対応が重要か
これまでChromeが先行実装していたAnchor Positioningだが、Safariが試験段階に入ったことで「Baseline（主要ブラウザが揃った安全な実装）」に近づく。Baseline 2026の定義では、Chrome・Firefox・Safari全てが対応した機能が「新しく安全に使える」とされる。Appleの動きは、開発者が本番投入を現実的に検討できるタイミングを示唆する。
ただしSafariの実装はまだフラグ付き。現時点での本番利用にはpolyfillが必要だ。特に注意すべきは、アンカー要素にcontain: layoutを指定する必要がある点。これを忘れると、fixed要素がアンカーを無視して画面固定される落とし穴がある。移行時にはCSS lintルールへの追加が推奨される。
::checkmark疑似要素：UIコンポーネントの標準化の波
同じくCSS-Tricksで取り上げられた::checkmark疑似要素も、2026年4月の注目トピック。これはチェックボックスや選択リストの「チェックマーク」部分をスタイリングするための疑似要素で、これまで各フレームワークが独自に実装していた機能を標準化するものだ。
従来、チェックマークのカスタマイズには非表示のinput + ラベル＋SVGアイコンの組み合わせが常套手段だった。::checkmarkを用いれば、以下のようにシンプルに書ける。
input[type="checkbox"]::checkmark {
content: "✓";
color: green;
font-size: 1.2em;
}SafariとChromeが既に実装、Firefoxは開発中。Baseline 2026夏には全ブラウザ対応が期待できる。ただし疑似要素のcontentプロパティにはアクセシビリティ上の注意が必要で、スクリーンリーダーが読み上げる代替テキストは別途aria-labelで指定しなければならない。
HTML Anchor Positioningとの組み合わせ
興味深いのは、::checkmarkとAnchor Positioningを組み合わせた応用だ。例えばカスタムセレクトボックスで、選択肢リストにチェックマークをアンカー配置する。リストの各項目をアンカーに、チェックマークをright: anchor(left)で配置すれば、動的なレイアウト変更にも追従する。従来はJavaScriptで計算していた位置調整が、CSSだけで完結する。
この組み合わせは、フォームUIのリファクタリングで特に効果を発揮する。ReactやVueのコンポーネントライブラリに依存せず、ネイティブのHTML/CSSでアクセシブルなUIを構築できる未来が見える。
Baseline 2026年4月の全体像
web.devが公開した「April 2026 Baseline monthly digest」によれば、今月の新たなBaseline機能はCSSのrandom()関数、attr()の型付き戻り値、そしてView Transitions APIのクロスドキュメント対応など。いずれも実用的なレベルに達しつつある。
特にrandom()は、デザイントークンのバリエーション生成やA/BテストのCSSレベル実装に使える。既にChromeとFirefoxが安定版で対応、Safariも15.5で試験実装を開始している。乱数生成をCSSに任せることで、JavaScriptのバンドルサイズ削減に貢献する。
移行時の注意点
Anchor Positioningや::checkmarkを既存プロジェクトに導入する際、次の3点に留意すべき。
- polyfillとして「@oddbird/css-anchor-positioning」が安定している。ただしサイズ約4KBと軽量なので、条件付きloadingで問題になりにくい。
::checkmarkのスタイルが旧来のカスタムチェックボックスと競合する場合、appearance: noneとの併用で効果を打ち消す。既存CSSのセレクタ優先順位を確認する必要がある。- Safari TPでのAnchor Positioningは
position-fallbackの一部未実装がある。特に画面端での折り返し動作が不安定なため、ツールチップの動的配置には注意が必要。
2026年後半の展望
SafariのAnchor Positioning試験実装は、Web標準の成熟度を示す重要なマイルストーンだ。2026年秋までに全ブラウザで安定版対応が揃えば、CSS GridやSubgridに続く「レイアウト革命」の第二波が訪れる
一方で::checkmarkは、疑似要素の拡張というより大きな流れの一部に過ぎない。::footnoteや::annotationといったコンテンツ生成疑似要素の標準化議論がW3Cで進んでおり、2027年には文書装飾のCSS完結が現実味を帯びる。今のうちに::checkmarkのベストプラクティスを確立しておくことが、今後の疑似要素ラッシュへの準備となる。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！