CSSの新しい@position-tryの便利さ

CSS アンカーの位置決めは少し前に登場しました。私と同じように、CSS を書くのが好きではない人にとって、この新しい API は間違いなく状況を改善するでしょう。

アンカーの位置決め

CSS Anchor Positioning API を使用すると、開発者は追加のライブラリや複雑な JavaScript を必要とせずに、他の要素 (アンカーと呼ばれる) を基準にして要素を簡単に配置できます。この機能は、メニュー、ツールチップ、ダイアログ、その他の階層化されたインターフェイスの作成に最適です。

この API を使用すると、要素のサイズ/位置がそのアンカーに基づいて適応することを確認できます。これにより、手動調整の必要性がなくなり、動的でインタラクティブなレイアウトを構築する際に、よりスムーズで応答性の高いエクスペリエンスが提供されます。

ポジショントライとは何ですか？

アンカー CSS には、position-try と呼ばれる新しい CSS at-rule も追加されました。 これにより、アンカーされた要素が画面またはコンテナー内に収まらない場合のフォールバック位置を定義できます。要素がオーバーフローした場合、ブラウザは自動的に次の代替位置を選択し、要素が完全に表示され機能し続けることを保証します。 position-try-fallbacks プロパティを使用して、ブラウザーが try する複数のフォールバック位置を定義できます。以前は、これは、ビューポートが変更されるたびに、物事が進んでいるかをチェックするリスナーを実行することで実現されていました。

これにより、オーバーフロー状態をチェックするためのカスタム ロジックを作成する必要がなくなり、ドロップダウンやツールヒントなどを操作する際の多くの問題を回避できます。

デモ

上記の CSS プロパティを使用して作成したコードの簡単なデモを次に示します。

私のひどい見た目のナビゲーション バーのサブメニューは、ビュー ポートの幅に基づいて位置を変更します。

コードは React で書かれています。以前は、これを行うにはエフェクトを使用する必要がありました。私の場合は、サブメニュー要素がビューポートの境界を越えているかどうかを確認することになります。そうであれば、別の再レンダリングをトリガーして、サブメニューのスタイルを更新することになります。 useEffect はペイントの後に実行され、ユーザーに間違った場所のサブメニューが表示されることを望まないため、これには useLayoutEffect を使用する必要がありました。

あとは次のような CSS を書くだけです:

.button-anchor {
  anchor-name: --anchorButton;
}

@position-try --bottom {
  position-area: bottom;
}

.menu-list {
  position-anchor: --anchorButton;
  border: 1px solid #000;
  font-family: sans-serif;
  width: 60px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 8px;
  position: fixed;
  position-area: right span-y-end;
  position-try-fallbacks: --bottom;
}

@position-try - --bottom というルールを作成します。
アンカー名 - ボタンをアンカー要素として設定します。
Position-anchor - menu-list がアンカー要素として --anchorButton を使用できるようにします。
Position-try-fallbacks - 試行する複数のフォールバックをリストするのに役立ちます。これは、--bottom が失敗した場合でも、さらに多くのポジションが存在する可能性があることを意味します。

まとめ

Anchor CSS が登場し、開発者にとって非常に興味深いユースケースをいくつか解決しました。上記に加えて、テザリングによる測位が非常に簡単になります。すべてが純粋に CSS 上にあるため、パフォーマンスも優れています。 現時点ではブラウザのサポートはあまり良くありませんが、すぐにもっと多くのブラウザが採用されることを願っています。

以上がCSSの新しい@position-tryの便利さの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。