CSS Anchor Positioningを知って、実務で使うまで

CodeGridのニュースレターで、CSS Anchor Positioningという仕様を知りました。

anchor-name: --my-anchor; で決めたアンカーに対して、anchor() 関数で位置指定ができるものです。たとえば position: absolute; top: anchor(--my-anchor bottom); のように書く。今まで別のラッパー要素を用意したり、JavaScriptで細かく調整したりしていたことがCSSだけで書けるということで、なんかすごいと思いました。

CSSってもうそんなに進化することはないだろう、と漠然と思っていたので。IE対応とかしてた頃には想像もできなかった。

知ってから数日後、実務で使う場面が来ました。複数の要素を重ねたデザインで「重なり順」がどうしても解決できなくて。レイヤーの都合上、DOM構造的に難しい配置が必要な箇所で、Anchor Positioningを使ったら外側から配置できました。「この間知ったやつが早速役に立った」ってなるのは嬉しいです。

@supports (anchor-name: --anchor) {
  /* サポートされているブラウザだけに適用 */
}

@supports でブラウザ対応を絞りつつ使っています。

別の案件では、「特定のページだけ固定メニューを非表示にしたい」という実装をしていて、jsでDOMをremoveする方向で考えていたところをClaude Codeに相談したら「CSSでできますよ」と返ってきて、セレクタで display: none するだけで一瞬で終わったことがありました。Anchor Positioningとは直接関係ないんですが、「見た目の調整はCSSで書けることが増えている」という感覚はこういう場面でも重なります。

CodeGridで第2回を読んでいたら、position-area: bottom center というキーワード指定で、ツールチップの定番の位置指定コードがまるごと不要になるという話が出てきました。

/* 今まで */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
translate: -50% 0;

/* position-area を使うと */
position-area: bottom center;

ツールチップみたいな「定番パターン」をCSSやHTMLの仕様がそのまま飲み込む、という話は、じわじわくるものがあります。

見た目の調整のために使われていたようなJavaScriptがCSSに少しずつ吸収されていく感じ、ブラウザ毎の実装の違いと血みどろの戦いを繰り広げていた頃から考えると隔世の感があります。新しいプロパティ名はまだ覚えられていなくて、書こうとするたびにObsidianのメモに戻ってきていますが。

関連記事