CSS Anchor Positioning APIについて。コンセプト、基本的な使い方、popover属性や`<dialog>`との組み合わせ、`@position-try`での代替の位置指定、スクロールとの組み合わせなど

CSS
article

efcl のブックマーク 2024/05/19 22:05

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/4753398836756317472/comment/efcl" data-user-id="efcl" data-entry-url="https://b.hatena.ne.jp/entry/s/developer.chrome.com/blog/anchor-positioning-api" data-original-href="https://developer.chrome.com/blog/anchor-positioning-api" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fanchor-positioning-api" data-user-icon="/users/efcl/profile.png">Introducing the CSS anchor positioning API  |  Blog  |  Chrome for Developers</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/CSS">CSS</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/article">article</a>]</li></ul><br><p style="clear: left">CSS Anchor Positioning APIについて。 コンセプト、基本的な使い方、popover属性や`&lt;dialog&gt;`との組み合わせ、`<a href="https://twitter.com/position" target="_blank" rel="noopener nofollow">@position</a>-try`での代替の位置指定、スクロールとの組み合わせなど</p><a class="datetime" href="https://b.hatena.ne.jp/efcl/20240519#bookmark-4753398836756317472"><span class="datetime-body">2024/05/19 22:05</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！

Introducing the CSS anchor positioning API | Blog | Chrome for Developers

developer.chrome.com2024/05/13

The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements relative to other elements, known as anchors. This API simplifies complex layout r...

4 人がブックマーク・1 件のコメント

他のコメントを読む

＼コメントがサクサク読めるアプリです／

はてなブックマーク

Introducing the CSS anchor positioning API | Blog | Chrome for Developers

はてなブックマーク

公式Twitter

はてなのサービス