アンカー ポジショニングの構文の変更

Una Kravets
Mason Freed
Mason Freed
X GitHub

CSS アンカーの配置は、Chrome 125 でリリースされました。この最初の一般公開バージョンの API によって、構文に関する議論が加わりました。検討の結果、機能のリリース時から若干の変更が加えられています。すでに CSS アンカーの位置指定をお試しになったことのある方は、この投稿でコードに必要な変更、またはアンカーの配置に関するコンテンツをご確認ください。

注意すべき主要なプロパティ名の変更が 2 つあります。

  1. inset-area の名前が position-area に変更されました。「position-」という言い回しにより、このプロパティがアンカー要素ではなく、配置された要素に適用されることを覚えやすくするため、CSS ワーキング グループはこの名前変更を優先しました。この変更は Chrome 129 で始まります。既存のデモや記事を更新できるように、Chrome 131 まで inset-area がサポートされています。
  2. position-try-options の名前が position-try-fallbacks に変更されました。この名前を変更することで、ベーススタイルによって決まるプライマリ位置へのフォールバックにすぎないことがわかるようになります。この変更は Chrome 128 に付属しており、position-try-options はバージョン 128 で機能しなくなります。Chrome 125 から有効で、変更されていない省略形（position-try に変更）を使用することをおすすめします。

また、動作が 1 つ変更されます。

  • position-try から inset-area() 関数構文が削除されます。そのため、position-try-fallbacks: inset-area(top) ではなく position-try-fallbacks: top を使用します。この変更は Chrome 129 から開始されます。

アンカーの位置指定の使用について詳しくは、以下をご覧ください。