あると便利なCSS Anchor Positioning

あると便利な CSS Anchor Positioning 2023年9月27日 TechFeed Experts Night#26 株式会社ミツエーリンクス 木達 一仁

木達 一仁 • 株式会社ミツエーリンクス エグゼクティブ・フェロー • 主にマークアップやスタイルシートの設計、 関連ガイドラインの策定・運用に従事 •ウェブアクセシビリティ基盤委員会 （WAIC） 作業部会1 作業協力者 •Advanced Publishing Laboratory アクセシビリティWG リーダー

• https://waic.jp/
• https://www.aplab.jp/

CSS Anchor Positioning https://www.w3.org/TR/css-anchor-position-1/

• https://www.w3.org/TR/css-anchor-position-1/

CSS Anchor Positioningとは • 最新のCSS仕様の1つ •最新すぎて？Can I useにまだページが存在しない • ある要素に対する表示位置の固定を実現 • • 既存の position: absolute の拡張のようなもの 2023年6月29日にFirst Public Working Draftが発行 •最新のEditorʼs Draftは2023年8月25日付の更新

• https://caniuse.com
• https://www.w3.org/TR/2023/WD-css-anchor-position-1-20230629/
• https://drafts.csswg.org/css-anchor-position-1/

CSS Anchor Positioning https://drafts.csswg.org/css-anchor-position-1/

• https://drafts.csswg.org/css-anchor-position-1/

CSS Anchor Positioning （日本語訳） https://triple-underscore.github.io/css-anchor-position-ja.html

• https://triple-underscore.github.io/css-anchor-position-ja.html

黎明期のCSS Anchor Positioning • W3CのCSS WGで標準化が始まるより前のアイデアは Microsoft Edge Explainersに残っているCSS Anchored Positioningのページで確認できる •Ian Kilpatrick氏とTab Atkin氏のアイデアがベース • position: absolute や position: fixed における位置 決めモデルの拡張 •ビューポートに収まらない場合のフォールバック表示も当初 から意識されていた

• https://github.com/MicrosoftEdge/MSEdgeExplainers
• https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md

MSEdgeExplainers/CSSAnchoredPositioning/explainer.md https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md

• https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSAnchoredPositioning/explainer.md

Ian Kilpatrick氏のアイデア https://gist.github.com/bfgeek/60d4f57092eadcda0d4f32a8eb23b4c8

• https://gist.github.com/bfgeek/60d4f57092eadcda0d4f32a8eb23b4c8

CSS Anchor Positioningの ごく簡単な使用フロー 1.1つ以上のアンカー要素を定義 • •HTMLの anchor 属性を指定（暗黙的なアンカーの作成） CSSの anchor-name プロパティに <dashed-ident> 値で名前を指定 2.アンカー要素を基準として、固定させたい要素の位置を指定 3.ビューポートに収まらない場合の位置をCSSの position-fallback プ ロパティや @position-fallback 規則を用いて指定

ブラウザの実装状況 • Chrome Canaryが実装済み •chrome:// ags/ でExperimental Web Platform featuresは Enabledに fl •Firefoxは実装に前向き Safariは実装について態度を保留 • •まだ仕様がこなれていないとの認識 ポリフィルが存在 • •Firefox 54+ / Chrome 51+ / Edge 79+ / Safari 10+

CSS Anchor Positioning - Chrome Platform Status https://chromestatus.com/feature/5124922471874560

• https://chromestatus.com/feature/5124922471874560

Poly ll for CSS Anchor Positioning fi https://github.com/oddbird/css-anchor-positioning

• https://github.com/oddbird/css-anchor-positioning

CSS Anchor Positioning Poly ll Demo fi fi https://anchor-poly ll.netlify.app/

• https://anchor-polyfill.netlify.app/

ユースケース •ポップオーバーコンテンツ Popover APIを用いトップレイヤーに表示されるコンテンツ • •例えば…… ツールチップ • •メニュー 日付ピッカー • •（文末脚注ではない）脚注 etc.

Nuclear Anchored Sidenotes ‒ Ericʼs Archived Thoughts https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/

• https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/

Anchored positioning avoidance https://codepen.io/meyerweb/pen/JjwdBWY

• https://codepen.io/meyerweb/pen/JjwdBWY

まとめ • CSS Anchor Positioningの仕様はまだ草案段階 • 当面は未実装のブラウザへの対処が不可欠 • ポリフィル、 @supports 規則、etc. • Chrome Canaryが実装済みとはいえ、変更の生じる可能性はある • とはいえ、CSS Anchor Positioningはあると便利な位置指定手段 • JavaScriptによる計算量の削減が期待できる • • 実装上の手間が省ける Popover APIと組み合わせて使うと効果的

ご静聴ありがとうございました