Perubahan sintaksis pemosisian anchor

Una Kravets
Mason Freed
Mason Freed
X GitHub

Pemosisian anchor CSS dirilis di Chrome 125. Versi API pertama yang tersedia secara publik ini memicu diskusi tambahan tentang sintaks . Sebagai hasil dari diskusi tersebut, ada beberapa perubahan kecil sejak fitur diluncurkan. Jika Anda sudah mencoba pemosisian anchor CSS, postingan ini menjelaskan perubahan yang perlu dilakukan pada kode Anda, 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 Kelompok 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 agar Anda memiliki waktu untuk mengupdate 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 dikirimkan 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 tidak berubah.

Ada juga satu perubahan perilaku tambahan:

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

Pelajari lebih lanjut cara menggunakan pemosisian anchor di sini: