Chrome 131 βの新機能 anchor-scope を触ってみた

2024年10月16日にChrome 131 β版のドキュメントが公開されました。
https://developer.chrome.com/blog/chrome-131-beta?hl=ja

CSSに9つの新たなプロパティが新機能として追加されましたが、その中でもanchor-scopeが自分としては気になったので実際に動かして追加内容を見ていきます。

今回はChromeの実験的次期バージョンである、Chrome Canary 133.0.6862.0を利用しています。

CSS アンカーの配置: anchor-scope

anchor-scope プロパティを使用すると、アンカー名の公開範囲を特定のサブツリーに制限できます。

だ、そう。

以下のHTMLとCSSファイルを用意しました。

index.html

<div class="Container">
    <div class="parent" id="anchor">Hello</div>
    <div class="child" anchor="anchor">World</div>
</div>

index.css

.Container {
  width: 500px;
  height: 500px;
  background-color: rgb(204, 255, 238);
  
}

.parent {
  background-color: aqua;
  width: fit-content;
}

.child {
  background-color: cadetblue;
  width: fit-content;
}

表示はこちらです。

index.cssをこのように編集してみます。

index.css

.parent {
  background-color: aqua;
  width: fit-content;
+ anchor-name: --parent-anchor;
}

.child {
  background-color: cadetblue;
+ position: absolute;
  width: fit-content;
+ position-anchor: --parent-anchor;
+ position-area: right;
}

表示はこんな感じになりました。

.parentにanchor-name: --parent-anchorでアンカーとして設定
.childにposition-anchor: --parent-anchorでアンカー先として先程の.parentで設定したアンカーを指定しています。
position-area: rightでアンカーから見てどこに配置させるかを指定しています。

このposition-areaの指定を変更させる事でアンカーに紐付けている要素(今回で言うと.child)の配置位置を変更させる事ができます。

様々なposition-areaの指定

position-area: all

アンカー要素の中央が基準位置になります。
個人的に縦横中央の指定方法として便利なんじゃないかと思いました。
text-alignやposition:flex等でどうにかできることではあるとは思うんですけど、そもそも文字要素ではないコンテンツに対して使う事にモヤってた事もあったので、アンカーでなんとかできるのであれば、実装上では直感的だと感じます(アンカー指定方法自体の仕様が直感的かというと別の話ではるとは思いますが)

position-area: start

アンカー要素の左上が基準位置になります。
同様に、position-area: endとした場合は下のように基準位置は右下になります。

position-area: top

アンカー要素の中央上が基準位置になります。
表示させている写真の注釈としてや、ボタンのヒント等に利用できて便利....というのはanchor-scopeのissueで提案されていましたが、確かにそのためのような機能ですね。

anchor-scopeは議論中

HTMLとしてグローバルに採用されるかは未だに議論が行なわれています。
https://github.com/whatwg/html/pull/9144

中でもHTML構造への影響やアクセシビリティ面からの考え方(読み上げ順序等)、フォーカスの当たる順序が不安定になるといった懸念は確かに最もな意見であると思います(議論内でも触れられていますが、読み上げ順序については詳細設定が存在するので問題は無いという考え方も)。

anchor-scopeを利用して実現できること、想定される使われ方は現在でもanchor-scopeを使わずとも実現できることではあります。
ですが、やはり特定の表現の実装方法として、そのためのプロパティが選択肢として存在すると実装する側としても便利だし、安心できるのでは無いかとも自分は思いました。

(例えば、ボタンのすぐ上の「クリック!」みたいな吹き出しをつけるとして、吹き出しとボタンを同階層に配置して、吹き出し要素をposition:absoluteなりで配置することはできるとは思うのですが position:absoluteは別になんらかの要素に付属する事を強く意識して作られたわけではないですし、それだったらそのために作られたプロパティを使いたいと思うのは自然ではないでしょうか?)