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

CSS アンカー ポジショニングは Chrome 125 でリリースされました。この API の最初の一般提供版は、構文に関する追加の議論を呼び起こしました。これらの議論の結果、この機能のリリース以降、いくつかの変更が加えられました。CSS アンカー ポジショニングをすでに試している場合は、この投稿で、コードやアンカー ポジショニングに関するコンテンツに必要な変更について説明します。

主に 2 つのプロパティ名が変更されています。

  1. inset-area の名前が position-area に変更されました。この名前変更は、position- というフレーズのほうが、このプロパティがアンカー要素ではなく、配置された要素に適用されることを覚えやすくするため、CSS ワーキング グループによって推奨されました。この変更は Chrome 129 から開始されます。デモや記事を更新する時間を与えるため、inset-area は Chrome 131 までサポートされます。
  2. position-try-options の名前が position-try-fallbacks に変更されました。この名前変更は、これらがベーススタイルによって決定されるプライマリ ポジションへのフォールバックにすぎないことを覚えておくのに役立ちます。この変更は Chrome 128 でリリースされました。バージョン 128 以降、position-try-options は機能しなくなりました。ショートカット(position-try に変更)を使用することをおすすめします。これは Chrome 125 以降で機能し、変更されていません。

動作の変更がもう 1 つあります。

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

アンカー ポジショニングの使用について詳しくは、以下をご覧ください。