アンカーポジショニング癖

CSS-Tricks Almanacは、新しいアンカーポジショニングAPIの包括的なカバレッジを誇っており、各プロパティ、機能、およびATルールを詳述しています。 このモジュールへの最近の深い掘りは、いくつかの興味深い癖や潜在的なバグを明らかにしました。

挿入済みブロック（IMCB）

静的要素の含まれるブロックは簡単ですが（親のコンテンツ領域）、完全に配置された要素は複雑さをもたらします。 それらの含まれるブロックは、通常、ビューポートまたは最も近い位置にある祖先です。 ただし、ブロックを含む

インセット修飾 IMCBは、絶対に配置された要素のプロパティ（

、

、inset、top）によって効果的に縮小された含有ブロックとしてスペックで定義されています。 たとえばright：bottom left

ここで、IMCBはビューポートよりも小さく、指定された挿入図によって減少します。 IMCBを理解することは、アンカーポジショニング、特に

および

プロパティをマスターするために重要です。

.absolute {
  position: absolute;
  top: 80px;
  right: 120px;
  bottom: 180px;
  left: 90px;
}

含有ブロックをグリッドに分割すると、IMCBはそのグリッド内の位置決め領域を定義します。

IMCB寸法を使用して、フォールバックの位置決めを決定します。 UNA KRAVETSの視覚ツールposition-areahttps://www.php.cn/link/7e77e4a1b051ec0a510b48eec2ff3a3cposition-try-orderは優れた視覚化を提供します position-area仕様対実装：急速な進化の物語position-try-order スペックは貴重なガイドとして機能しましたが、実際のブラウザの実装は不一致を明らかにしました。 アンカーポジショニングの迅速な開発と展開（2023年6月、Chrome 125リリースの最初のドラフト）により、スペックとブラウザーの動作の間にいくつかの初期矛盾が生じました。 最初のブラウザの実装後に行われた変更には、次のものが含まれます

• inset-areaに変更されましたposition-area：inset-areaは非推奨です position-area
• ：position-try-optionsを使用して変更されました position-try-fallbacks position-try-fallbacks関数削除：
ラッパー関数は
• 。 inset-area()単純化：position-try-fallbacksセンターのためのより簡潔な構文が利用可能になりました。
• バグ：いくつかのバグが存在します。特に、デフォルトのアンカーが存在しない場合のanchor(center)の動作に関する動作。
アクセシビリティの考慮事項
• アンカーポジショニングがツールチップやポップオーバーに優れている間、純粋に装飾的な目的（例：要素を線と接続）に使用すると、アクセシビリティが妨げられます。 スクリーンリーダーは、視覚的にリンクされたものと意味的に無関係な要素間の関係を理解し​​ていない場合があります。 明確なセマンティック関係を確立するには、やposition-areaなどのARIA属性を使用することをお勧めします。 position-visibility結論

マスターアンカーポジショニングには、その複雑さをナビゲートする必要があります。 CSS-Tricks Almanacは貴重なリソースを提供していますが、APIはまだ進化しており、さらなる学習の機会と将来の改良の可能性を約束していることを忘れないでください。

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