CSS アンカー ポジショニングは Chrome 125 でリリースされました。この API の最初の一般提供版は、構文に関する追加の議論を呼び起こしました。これらの議論の結果、この機能のリリース以降、いくつかの変更が加えられました。CSS アンカー ポジショニングをすでに試している場合は、この投稿で、コードやアンカー ポジショニングに関するコンテンツに必要な変更について説明します。
主に 2 つのプロパティ名が変更されています。
inset-area
の名前がposition-area
に変更されました。この名前変更は、position-
というフレーズのほうが、このプロパティがアンカー要素ではなく、配置された要素に適用されることを覚えやすくするため、CSS ワーキング グループによって推奨されました。この変更は Chrome 129 から開始されます。デモや記事を更新する時間を与えるため、inset-area
は Chrome 131 までサポートされます。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 から開始されます。
アンカー ポジショニングの使用について詳しくは、以下をご覧ください。