あると便利なCSS Anchor Positioning

1.3K Views

September 28, 23

スライド概要

2023年9月27日に開催されたオンラインイベント「TechFeed Experts Night#26」で、セッション「あると便利なCSS Anchor Positioning」に使用したスライドです。

profile-image

株式会社ミツエーリンクスのドキュメント共有です。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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