Digital Transformation
CSS Anchor Positioning
TL;DR: CSS Anchor Positioning adalah fitur CSS yang memungkinkan elemen seperti tooltip atau popover menempel pada elemen acuan tanpa kode JavaScript. Per April 2026, fitur ini tersedia di Chromium dan sedang dalam tahap evaluasi di Safari serta Firefox. Manfaat utamanya adalah pengurangan beban skrip dan layout shift yang lebih kecil.
Apa itu CSS Anchor Positioning?
CSS Anchor Positioning adalah cara baru di CSS untuk menempelkan satu elemen pada elemen acuan dengan deklaratif. Sebelum fitur ini ada, developer biasanya memakai pustaka seperti Floating UI atau Popper.js yang menghitung posisi via JavaScript. Pendekatan tersebut bekerja, tetapi menambah ukuran bundle dan memicu rekalkulasi setiap scroll. Anchor Positioning memindahkan logika tersebut ke layout engine browser yang jauh lebih efisien.
Untuk konteks website bisnis Indonesia yang sering memakai komponen seperti dropdown produk atau tooltip harga, fitur ini langsung berkontribusi pada Core Web Vitals yang lebih baik. Lihat juga View Transition API untuk transisi halus antar halaman.
Cara Kerja
Konsep utamanya adalah anchor-name di elemen acuan dan position-anchor di elemen yang ingin menempel. Browser kemudian menghitung posisi berdasarkan properti inset-area atau top, left, dan turunannya yang merujuk ke acuan tersebut.
| Properti | Fungsi |
|---|---|
anchor-name | Memberi nama pada elemen acuan |
position-anchor | Menyatakan elemen mana yang dijadikan acuan |
inset-area | Menentukan lokasi relatif (atas, bawah, kiri, kanan) |
position-try-fallbacks | Menyediakan posisi alternatif jika ruang tidak cukup |
Kenapa Penting?
Praktik standar di industri menunjukkan setiap script popover client-side menambah 5 hingga 15 KB JavaScript. Dengan Anchor Positioning, beban itu hilang dan posisi tetap presisi. Bagi tim yang berinvestasi pada INP optimization, penghematan ini langsung terasa pada metrik interaksi.
Referensi lengkap tersedia di MDN CSS Anchor Positioning.
Pertanyaan Umum
Apakah Anchor Positioning menggantikan Floating UI?
Untuk sebagian besar kasus popover sederhana, ya. Untuk skenario kompleks seperti collision detection multi-arah dengan logika kustom, pustaka JavaScript masih relevan.
Bagaimana fallback untuk browser yang belum mendukung?
Gunakan @supports (anchor-name: --foo) di CSS dan sediakan posisi statis sebagai fallback, atau muat polyfill ringan hanya untuk browser tersebut.
Istilah Terkait