アンカーポジショニングを備えた「オンボーディング」UIの1つ

CSSアンカーポジショニングの魅力的な世界に飛び込みます！このチュートリアルでは、この革新的なCSS機能を説明し、Juan Diego Rodriguezの包括的な「アンカーポジショニングガイド」（CSS-Tricksで入手可能）を参照として使用しています。

これはエキサイティングな開発です。 多くの人が、CSS-Tricksの「Flexboxレイアウトガイド」と「グリッドレイアウトガイド」の影響を思い出します。これは、私がまだ定期的に使用している貴重なリソースです！ Codepen実験で正しい構文を確保するために、複数のタブをしばしばジャグリングします。

Juan's Guide以来、私はCSSアンカーポジショニングを実験してきましたが、調査結果を共有し、さらに学び、さらに実験し、もちろん、

CSSアンカーポジショニングの導入

アンカーポジショニングにより、1つ以上の他の要素に接続するか、「アンカー」を接続できます。 重要なのは、a at-rule。

at-rule。

単純に言えば、アンカーの位置は

を大幅に向上させ、絶対に位置する要素を予測できるようにするのを支援します。 これを詳細に調べます。

現在、W3Cドラフトスペックであるアンカーポジショニングは比較的新しいものです。 ベースラインでは「限られた可用性」とマークされています。つまり、主にChromiumベースのブラウザーによってサポートされています（バージョン125）。 ただし、Oddbirdは、より広範なブラウザの互換性に役立つポリフィルを提供します。 ブラウザのサポートの詳細は、caniuse.comで入手できます。 数字は、サポートが始まるバージョンを示しています @position-tryデスクトップブラウザのサポート

position: absolute;

モバイル/タブレットブラウザのサポート

Oddbirdは、多くの新しいCSS機能のポリフィルを作成します。 GithubまたはOpen Collectiveでの作業をサポートしてください！

W3C仕様の貢献者であるTab Atkins-Bittnerは、2024年にCSS日にアンカーポジショニングを発表しました（YouTubeで入手可能）。 Juanは、CSS-Tricksのフローティングノート効果のためのビュー駆動型アニメーションでの使用を実証しました。 ケビン・パウエルは最近のビデオで「CSSポップオーバーアンカーポジショニング」を紹介し、トーマスパークはアンカーポジショニングを教えるためにアンコレウム（フレックスボックスフロギースタイルのゲーム）を作成しました。

割り当て

CSSアンカーポジショニングが理解されているので、その機能を調査しましょう。 テザーリング要素は計り知れない可能性を提供し、以前に複雑な絶対的な位置決めと

調整に取り組んでいた多くの問題を解決します。

基本的な構文を調べてみましょう。 2つの要素が必要です。アンカーポジション要素とそのテザーターゲット。 z-index

を使用してアンカーポジションの要素を指定します（CSSカスタムプロパティのようなダブルダッシュが付いています）。

<div>
  Anchor
</div>
<div>
  Target
</div>

ターゲット要素には

とanchor-name（アンカーの

を一致させる）が必要です。

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

これらの要素がリンクされました。 position: absolute;アンカー要素上に目に見えない3x3グリッドを作成し、正確なターゲット配置を可能にします。 position-anchor anchor-nameターゲットは、アンカー要素のトップセンターに固定されています！

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

擬似要素を固定する

position-areapseudo-elementsは、通常の要素のように固定できます

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

これは、視覚的な機能強化またはインジケーターを追加するのに役立ちます。

動くアンカー

アンカーは、

。

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;

  &::before {
    content: "Target";
    position: absolute;
    position-anchor: --anchor;
    left: anchor(center);
    bottom: anchor(center);
  }
}

関数アンカー要素の計算値を使用します。 ここで、ターゲットの

はアンカーの

と一致します。 変化のホバリング

およびスムーズな遷移が可能です。

anchor()高度な実験position-area

Chromeチームは、

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor-one;
  top: anchor(bottom);
  left: anchor(left);
}

および

要素（anchor()）の新しい擬似選択装置をリリースしました。 これらは固定することもできます。 これは実験的ですが、可能性を示しています top実用的なアプリケーションbottom position-anchor CSSアンカーポジショニングの実用的な使用（現在はChromeのみ）を探りましょう。

ツールチップ

ツールチップは自然なフィット感です。 アイコンの上にホバリングすると、近くのラベルが表示されます。 ツールチップのベストプラクティスに関するZell Liewの記事は、セマンティックガイダンスを提供します。

<details></details>ツールチップは、アンカー要素の兄弟です（<summary></summary>リンクします）。 CSSは、位置決めと可視性を処理します。:details-content

作業CSSアンカーツールチップ！ タッチデバイス用のトググリットを検討してください。

フローティング開示

disclosures（

/<summary></summary>

など）は、特に浮動要素のアンカーポジショニングの恩恵を受けます。 ポップオーバーAPIは、軽い解雇などの機能を備えた非モーダルで一流のソリューションを提供します。 Zell Liewは、ポップオーバー、ダイアログ、およびモダリティに関する詳細情報を提供しています。

ドロップダウンメニューの例：

<div>
  Anchor
</div>
<div>
  Target
</div>

CSSは、アンカーとフォールバックの位置決めを処理します：

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

ショッピングカートコンポーネント

以前の手法を組み合わせて、ショッピングカートコンポーネントを作成できます。

CSSは、ツールチップ、ショッピングカートのダイアログ、バッジ：

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

を固定します

単一のアンカーに固定された3つの要素！

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

テクニックの組み合わせ

このセクションでは、ツールチップ、開示、バッジの使用を組み合わせて、アンカーポジショニングの力を示しています。

最終プロジェクト：オンボーディングツール

最終プロジェクトとして、私はCSSアンカーポジションオンボーディングツール（Codepenが利用可能）を構築しました。 これにより、以前のJavaScriptベースの試みの複雑さが回避されます（ "Handholdjs"）。

aカスタム要素

属性を使用して、ツアーステップを定義します。 JavaScriptはアンカー位置を動的に更新し、ビュー遷移によりスムーズな遷移が保証されます。 このプロジェクトは実験的であり、ブラウザのサポートが限られているため、制作に対応していません。

結論

CSSアンカーポジショニングには、FlexboxとGridと同様に、CSS開発に革命をもたらす可能性があります。 そのアプリケーションは膨大であり、コミュニティからの将来の革新を見ることに興奮しています。

以上がアンカーポジショニングを備えた「オンボーディング」UIの1つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。