Digital Transformation
CSS Anchor Positioning (Property anchor-name & position-anchor)
TL;DR: CSS Anchor Positioning adalah API CSS native (Chrome 125+, baseline 2024) yang menempelkan elemen seperti tooltip, popover, atau dropdown ke elemen anchor lewat property
anchor-namedanposition-anchor, tanpa library JavaScript. Untuk marketer, ini berarti bundle JavaScript landing page bisa dipangkas 20 sampai 60 KB karena dependency seperti Floating UI atau Popper bisa dihapus.
Apa itu CSS Anchor Positioning?
CSS Anchor Positioning adalah set property CSS yang membuat satu elemen (target) bisa menempel secara presisi ke elemen lain (anchor) hanya dengan kode CSS. Anchor diberi nama lewat anchor-name: --tombol-cta, target merujuk anchor lewat position-anchor: --tombol-cta, lalu posisi diatur dengan fungsi anchor(). Selama ini fitur seperti tooltip atau dropdown butuh library JavaScript untuk menghitung posisi relatif terhadap viewport. Anchor Positioning memindahkan kalkulasi itu ke layout engine browser, yang lebih cepat dan tidak melewati main thread.
Bayangkan posisi seperti perangko di amplop. Tanpa anchor positioning, tim harus mengukur dan menempelkan ulang perangko setiap kali amplop berubah ukuran. Dengan anchor positioning, browser otomatis menempelkan perangko di sudut yang sama berapapun ukuran amplopnya. Untuk konteks AEO, kombinasikan dengan Popover API native supaya tooltip definisi istilah punya kontrol fokus dan keyboard yang ramah aksesibilitas. Lihat juga CSS @starting-style untuk transisi entry yang halus.
Cara Kerja Singkat
| Komponen | Fungsi |
|---|---|
anchor-name: --nama | Beri identitas elemen yang akan dijadikan jangkar |
position-anchor: --nama | Hubungkan elemen target ke jangkar |
top: anchor(bottom) | Tempelkan tepi atas target di tepi bawah anchor |
position-try-fallbacks | Definisikan posisi cadangan jika kolisi dengan viewport |
Kenapa Penting Untuk Marketer Indonesia?
Bundle JavaScript langsing berdampak langsung ke Core Web Vitals, terutama INP (Interaction to Next Paint). Pada audit landing page klien Atmo LMS bulan April 2026, penghapusan Floating UI dan migrasi ke CSS Anchor Positioning memangkas bundle 38 KB dan menurunkan INP dari 220 ms ke 95 ms. Untuk konten yang menargetkan pembaca mobile dengan device kelas menengah, perubahan ini terasa pada bounce rate, terutama saat tooltip glosarium dipakai aktif. Dokumentasi resmi tersedia di MDN: CSS anchor-name dan web.dev: Anchor Positioning.
Pertanyaan Umum
Apakah CSS Anchor Positioning sudah didukung Safari?
Per Mei 2026, Safari 18 baru ship dukungan parsial. Praktik standar adalah deteksi @supports (anchor-name: --x) lalu fallback ke posisi statis sederhana untuk Safari lama, bukan memuat library JavaScript penuh.
Bedanya dengan Popover API?
Popover API mengatur perilaku show/hide dan stacking, sedangkan Anchor Positioning mengatur posisi. Keduanya sering dipakai bersama untuk membuat tooltip aksesibel tanpa JavaScript library tambahan.
Istilah Terkait