さらに別のアンカーポジショニング癖-CSSチュートリアル-php.cn

Yet Another Anchor Positioning Quirk

CSSアンカーポジショニング：驚くべき機能ですが、いくつかの難しい問題があります。 FlexBoxやグリッドのようなゲームチェンジャーではありませんが、何十年もの間、CSSのポジショニングのギャップを埋めます。ただし、不可解な振る舞いにつながるいくつかのユニークな特性もあります。この記事では、長い間私を悩ませてきたアンカーの位置決めの問題を探ります。

ovirion

私は1か月前にこの問題を発見しました。他の誰かのアンカーポジショニングのケース、特に「アンカーポジショニングとスクロール駆動型アニメーション」に関するTemani Afifの記事を読みました。この記事を読んで、何が私の注意を引いたかを見ることを強くお勧めします。彼は、アンカーポジショニングとスクロール駆動型アニメーションを巧みに組み合わせて、進行状況が変わるにつれて色を変えるレンジスライダーを作成します。

さらに驚くべきことは、彼が同じアンカー名を持つ2つのターゲット要素を使用していることです。各要素は、魔法のような対応するアンカーポイントに取り付けられています。これがそれほど面白くないように見える場合は、アンカーポジショニングがどのように機能するかを簡単に確認する必要があります。

CSSアンカーポジショニングとアンカースコープ属性

詳細な理解については、CSSアンカーポジショニングガイドを完全に参照してください。

アンカーポジショニングは、CSSに2つの新しい概念をもたらします：

アンカーポイント要素とターゲット要素。アンカーは、他の要素を見つけるために使用される参照要素です。ターゲット要素は、1つ以上のアンカーポイントに対して絶対に配置される要素です。

アンカーとターゲットはほぼすべての要素になる可能性があります。それらを並べて2つのdivを配置すると考えることができます。

最初に、

<code><div>anchor</div>
<div>target</div></code>

ログイン後にコピー

属性を使用してアンカー要素をCSSに登録する必要があります。

anchor-name次に、絶対に配置された要素の

属性を使用して、同じ名前のアンカーポイントに添付します。ただし、ターゲットをアンカーポイントの周りに移動するには、

<code>.anchor {
  anchor-name: --my-anchor;
}</code>

ログイン後にコピー

属性が必要です。

position-anchor position-areaこれはうまく機能しますが、より多くのアンカーとターゲットを含むようにマーカーを変更すると、状況は複雑になります。

<code>.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top right;
}</code>

ログイン後にコピー

アンカー1

<code></code>

ログイン後にコピー

アンカー2
アンカー3

ターゲット要素は、その最も近いアンカーポイントには取り付けられていませんが、すべてがDOMの最後の登録アンカーポイントに積み上げられています。

この問題を解決するために、

anchor-scope属性がChrome 131に導入されました。各ターゲットが適切に取り付けられるように、アンカーポイントの範囲をサブツリーに制限します。しかし、私はこのプロパティに注意を払いたくありません。なぜなら、最初に私の注意を引いたのは、Temaniがそれを使用していないということだったからです。何らかの理由で、すべてのターゲットは魔法のように正しく添付されています。

何が起こったのですか？

ターゲットは通常、最寄りのアンカーではなく、DOMの最後のアンカーに添付されますが、最初の例では、同じ

とそれに対応する追加のターゲットを持つ2つのアンカーが表示されます。これらはすべて、anchor-name属性を使用しません。どうしたの？ anchor-scope

2つの単語：

ブロックが含まれています。

アンカーの位置については、要素がブロックを構築する方法に大きく依存することに注意する必要があります。これは、アンカーポジショニング自体の固有の特性ではなく、絶対的な位置決め特性です。絶対に配置された要素は、その封じ込めブロックに対して位置付けられますが、

、top: 0px、left: 30pxのようなマージン属性は、含有ブロックの境界の周りに要素を移動して、いわゆるinset: 1rem変更されたインクルージョンブロックを作成します。

アンカーに添付されているターゲットも同じです。

position-area通常、絶対的な位置決め要素の含まれるブロックはビューポート全体ですが、

の祖先要素ではない位置属性（通常は

）によって変更できます。 Temaniは、この事実を利用して、各スライダーの新しいインクルードブロックを作成して、対応するアンカーポイントにのみ接続できるようにします。コードを見ると、最初にそれを見つけることができます：static relative

前の例でこの戦略を使用すると、突然正しく添付されます！

<code><div>anchor</div>
<div>target</div></code>

ログイン後にコピー

別の質問

属性を使用して各アンカーをそれぞれのターゲットに添付する代わりに、絶対要素の含有ブロックを計算する方法を活用します。ただし、追加のコードは必要ありません。

anchor-scopeドライブのアニメーションとアンカーポジショニングのスクロールを同時に実験したときにこれを発見し、テキストバブルの脚注を投稿の側面に添付しようとしました。

論理的には、各脚注は目標ですが、アンカーポイントの選択は少し難しいです。私は当初、各段落はアンカーとして使用できると考えていましたが、それは同じ

を持つ複数のアンカーがあることを意味します。結果：すべてのターゲットが最後のアンカーに積み重ねられます：

これは、コメントごとに新しいコンテンツブロックを作成する以前の方法で解決できます。ただし、別のアプローチをとることができます。これを還元主義的アプローチと呼んでいます。問題は、同じanchor-nameを持つ複数のアンカーがある場合に発生するため、すべてのターゲットに共通のアンカーになる可能性のある要素を使用して、アンカーの数を1つに減らします。

この場合、各ターゲットをポストの両側にのみ配置するため、ポストのボディ全体をアンカーとして使用できます。各ターゲットは垂直軸上に自然に整列しているため、残っているのは水平軸に沿って移動することです。

元の投稿がどのように行われたかをよりよく確認できます！

結論

おそらく、最近ブラウザにリリースされたCSSプロパティ（これまでのところ、Chrome 131でのみ）なので、そのサポートが期待を超えるとは期待できません。いつでもどこでも使用したいのですが、しばらくの間、短いデモに限定されたままです。これは、Chrome 125以降（そしてできれば近い将来他のブラウザで）でサポートされている他のアンカーポジショニングプロパティの使用を制限する理由ではないため、これらの小さな問題が心配なくアンカーポジショニングを使用し続けるのに役立つことを願っています。

以上がさらに別のアンカーポジショニング癖の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。