本セッションの登壇者
セッション動画
「あると便利なCSS Anchor Positioning」と題してお話しします。
簡単に自己紹介ですけれども、木達一仁と申します。Web制作会社のミツエーリンクスでエグゼクティブ・フェローという肩書きで仕事をしております。長年、Webのフロントエンドに関わってきましたけれども、アクセシビリティも私の専門分野の1つで、TechFeedではWeb Accessibilityチャンネルで英語圏の話題などを共有させていただいていますので、よろしければぜひご参加ください。
今日はアクセシビリティの話ではなくて、私からはCSSの仕様に関するお話をしたいと思っております。それがCSS Anchor Positioningです。
指定した要素に対する表示位置を固定
CSS Anchor Positioningとはそもそも何かと言いますと、まず最新のCSSの1つです。あまりにも新しすぎて、さまざまなWeb技術のサポート状況をわかりやすく示してくれているサイトCan I Useにもまだ載っていません。何のためのCSSかと言うと、ある要素に対する表示位置の固定を実現してくれる仕様です。あえて平たく言うならば、俗に絶対配置と呼ばれる既存のposition: absoluteを拡張する仕様です。今年の6月に最初の公開草案であるFirst Public Working Draft（FPWD）が発行されており、著者草案のEditor’s Draftの最新版は8月25日付で更新されています。
W3Cは公用語が英語ですので、仕様を読もうとするとどうしても英語と格闘しなければいけなくなるんですが、
幸いなことにこのCSS Anchor Positioningには日本語訳が存在します。これだけではなく、さまざまなWeb標準技術の仕様書を翻訳してくださっているtriple-underscore氏 (X: @strontium91) がこの日本語訳を作ってくださっていますので、日本語の方で読みたい方は、この訳をご利用になってはいかがでしょうか。
見切れず表示される絶対配置をCSSで
黎明期というほど歴史があるわけではないのですが、このCSS Anchor Positioningの歴史を振り返ると、2年前の2021年ぐらいからだいぶ話題になってきた印象です。今、W3CのCSSワーキンググループで標準化されていますけれども、その前にあったアイデアは、MicrosoftのEdgeチームがメンテナンスしているExplainersというコンテンツに残るCSS Anchored Positioningで確認できます。CSS仕様名は「CSS Anchor Positioning」ですが、CSS Anchored Positioning という名前のページにIan Kilpatrick氏とTab Atkin氏の2人のアイデアがベースで作られたコンテンツがあります。そこでも改めてアイデアの発端について、position : absoluteやposition: fixedといういわゆる配置手法の位置決めモデルの拡張をしたいんだということが書かれていて、興味深いのが、ビューポートに収まらない場合のフォールバック表示、つまり「なんとか収まるよう良きに計らえ」という表示手法も当初から意識されていたことが見て取れます。
これがGitHubのコンテンツにあるCSS Anchored Positioningのページです。
そこからリンクされているのがこのIan Kilpatrick氏のアイデアで、手書きのイラストが載っていて非常に興味深いんですけれども、ずっと下の方に行きますと、フォールバックの仕組みに関しても考案されています。要するに、絶対配置しようとすると配置した要素の一部がビューポートからはみ出して表示されないということが起こり得るんですけれども、そういうことをなくすためのCSSを作ろうじゃないかということが、アイデアとしても出ていたんですね。
利用は3ステップ、未実装ブラウザにはポリフィル等で対応
このCSS Anchor Positioningを使う簡単なフローは、3ステップになっています。最初に基準となるanchor要素を定義する必要があります。この定義には2通りありまして、1つはCSSのanchor-nameというプロパティに<dashed-ident> という、いわゆるダブルダッシュで始まる文字列で名前を指定してやること。もう1つはHTMLのanchor属性を使って定義する方法です。この場合は暗黙的なアンカーを作ることになります。2番目に、定義したanchor要素を基準として、たとえばポップアップや通知などの固定させたい要素の位置を指定します。この説明には結構な時間が必要なのと、CSSの仕様がまだ不安定で、これからも変わり得るので今日は説明を省略します。3番目にビューポートに収まらない場合の位置指定、フォールバックの仕組みをCSSのposition-fallbackプロパティや@position-fallback規則を使って指定します。この3ステップで位置を指定しましょうということですね。
果たしてこの仕様が今日どれぐらいのブラウザで実装されているのかと言いますと、実は結構寂しくて、唯一Chrome Canaryが実装しています。Canaryでflagsの裏に隠れてしまっているので、Experimental Web Platform featuresをEnabledにするという手続きが前提になります。他のブラウザはどうかと言いますと、Firefoxは実装にポジティブな回答を出していますが、SafariつまりAppleは実は実装について態度を保留しています。態度を明らかにするのに十分なだけ仕様がこなれていない、もう少し仕様を揉む必要があるだろうということを言っています。しかし、結構古いバージョンのブラウザでも動くポリフィルが実はすでに存在しています。
こんな状況なんですが、Chrome Platform Statusというページで、FirefoxやSafariといったブラウザベンダー固有のissueへのリンクがあります。最新動向についてはこのページを起点にチェックしていただくと、サポートされるかどうか把握できるかと思います。
ポリフィルに言及しましたけども、Polyfill for CSS Anchor Positioningという、その名のとおりのポリフィルが存在していますので、こちらからダウンロードして使っていただけます。
またポリフィルの実際の動作状況を確認できるページもあります。今、私はChrome Canaryを使用していて対応済みの状況なので右上にあるボタンが「No Polyfill Needed」になっていますけれど、サポートしていないプラウザではポリフィルを適用するためのボタンに変わります。それによって実際の仕様どおりに機能した場合のレイアウトを確認できます。テストケースが並んでいますので、実際の状況を確認する場合は、そちらのページを見ていただくと良いと思います。
ポップオーバーや脚注に便利
何に使うのか、どういう時に使うのかというユースケースについては、1つは前の講演でご紹介のあったポップオーバーコンテンツ、つまりPopover APIを使ってz-indexよりも強い最上位のトップレイヤーに表示されるコンテンツが容易に想定されます。たとえばツールチップやメニュー、デートピッカーみたいなものですね。
最近目にした中で非常に興味深いなと思ったユースケースが脚注です。文書の最後にまとめてある文末脚注ではなくて、紙の書籍などでよくある本文の横に並んでいる脚注を表示する時に使えるという話を、Eric Meyer氏がブログで書いていました。Eric Meyer氏はWebの黎明期からCSSに関わっていらっしゃる専門家の1人ですけれども、その方がまさに本文横並びの脚注をこのCSS Anchor Positioningを使って実現しようとトライしています。
画面の文字が見にくいかもしれませんが。これは本文と脚注が横並びになっている状態です。こういうレイアウトは実際やろうとすれば今までもできなくはなかったんですけれども、JavaScriptでゴリゴリ書かなければいけなかった部分があって大変だったところが、CSSでかなり省力化されています。あと、このユースケースで1つ面白いのが、anchor要素を2つ定義していることです。先ほど、3ステップという使用フローをお示しした時に、1つ以上のanchor要素を定義すると申し上げましたが、1つ以上なので2つ定義してもいいわけです。
たとえば今、脚注が3つ並んでいますけれども、水平方向に対しては、横の本文のブロックをanchor要素として定義しています。つまり、本文の右端に脚注の左端がくっつくように定義していて、なおかつ縦方向に関しては脚注の参照元（ピンク色の1、2、3）が縦方向の上端に揃うように、参照元それぞれをanchor要素として定義しています。それぞれの脚注は2つのanchor要素を定義して参照している、つまり紐付けられているという関係になります。この場合は脚注が3つ連続しているので、重なり合わないようにぴったりくっついていますが、実際にはそれぞれ脚注参照元の上端がそれぞれの脚注の上端に揃うように実現されています。
CSS Anchor Positioning はあると便利な位置指定手段
まとめに入ります。このCSS Anchor Positioningは草案段階で、Chrome Canaryが実装していますが、まだまだ変更の余地があります。ゆえに、未実装のブラウザへの対処、たとえばポリフィルを使うとか、@supports規則を使ってレイアウトが崩れないように気を付ける必要があります。とはいえ、タイトルに「あると便利なCSS Anchor Positioning」とあるように、CSS Anchor Positioning はあると便利な位置指定手段だと思います。特にかつてはJavaScriptでゴリゴリ書かなければならなかったところをブラウザに任せられれば実装のコストが省けることが期待できますし、Popover APIと組み合わせて使うとなお効果的なCSSだと思います。
ご清聴ありがとうございました。
