Perubahan sintaksis pemosisian anchor

Pemosisi anchor CSS dirilis di Chrome 125. Versi API pertama yang tersedia secara publik ini memicu diskusi tambahan tentang sintaksis . Sebagai hasil dari diskusi tersebut, ada beberapa perubahan kecil sejak peluncuran fitur. Jika Anda sudah mencoba pemosisian anchor CSS, postingan ini menjelaskan perubahan yang perlu Anda buat pada kode, atau konten tentang pemosisian anchor.

Ada dua penggantian nama properti utama yang harus Anda ketahui:

  1. inset-area diganti namanya menjadi position-area. Penggantian nama ini lebih disukai oleh Grup Kerja CSS karena frasa position- membantu Anda mengingat bahwa properti ini diterapkan ke elemen yang diposisikan, bukan elemen anchor. Perubahan ini akan dimulai di Chrome 129, dan inset-area didukung hingga Chrome 131 untuk memberi Anda waktu guna memperbarui demo atau artikel yang Anda miliki.
  2. position-try-options diganti namanya menjadi position-try-fallbacks. Penggantian nama ini membantu Anda mengingat bahwa ini hanyalah penggantian ke posisi utama, yang ditentukan oleh gaya dasar. Perubahan ini disertakan dengan Chrome 128, dan position-try-options tidak lagi berfungsi mulai versi 128. Sebaiknya gunakan singkatan (ubah menjadi position-try), yang berfungsi dari Chrome 125, dan belum berubah.

Ada juga satu perubahan perilaku tambahan:

  • Sintaksis fungsional inset-area() dihapus dari position-try. Oleh karena itu, gunakan position-try-fallbacks: top, bukan position-try-fallbacks: inset-area(top). Perubahan ini juga akan dimulai di Chrome 129.

Pelajari lebih lanjut cara menggunakan pemosisian anchor di sini: