CSS anchor positioningを1分で話した
Intro
Web Developer Conference 2024の「1分 de Web標準」にて、CSS Anchor Positioningについて1分で話しました。 思い出として残しておく意味も込めて、ブログに残しておきます。
スライド
メモ
- CSS Anchor Positioningについて発表します
- CSS Anchor Positioningとは、メニュー、サブメニュー、ツールチップのようなUI時に複雑なレイアウトをシンプルに実装できるようになる新しいAPIです。
- このAPIの核は、anchor-nameによるアンカー、positioned-elementによる配置された要素というの関係です。
- anchor-nameでアンカーを設定することで、position-anchor側で要素の配置を簡単に設定できるようになります
- この資料ではposition: fixed;になっていますが、position: absolute;にすることで、配置された要素の位置を、bottom: anchor(top), right: anchor(right)と指定することでアンカーを基準に配置位置を変更します
- あとは
- anchor-sizeで要素のサイズ変更
- @position-tryでアンカーの位置の自動調整
- position-visibilityでアンカーがビューの外に出るまで配置された要素をビュー内に残すために使用します。
- これまでに以上に簡単にメニュー系のUIを実現できそうで楽しみです。
関連
0