CSS anchor-name (Property)

TL;DR: anchor-name adalah properti CSS yang menamai sebuah elemen sebagai jangkar, sehingga elemen lain (tooltip, popover, menu) bisa diposisikan relatif terhadapnya pakai position-anchor atau anchor() tanpa JavaScript. Per Mei 2026 didukung Chrome 125+, Edge 125+, Safari 18 (sebagian), dengan polyfill resmi tersedia untuk Firefox.

Apa itu CSS anchor-name?

Properti anchor-name adalah bagian dari spesifikasi CSS Anchor Positioning yang mengizinkan layout layered (tooltip, popover, dropdown) memakai elemen lain sebagai titik referensi visual. Nilai berupa nama kustom dengan awalan dua tanda hubung, contohnya --cta-button atau --profile-photo.

Analogi sederhana: anchor-name seperti label nama di meja kantor. Begitu meja diberi label, kursi mana pun di ruangan tahu di mana meja itu berada dan bisa diatur posisinya relatif terhadap meja, tanpa harus diukur ulang setiap kali tata letak berubah.

Cara Pakai

.tombol-cta {
  anchor-name: --cta-utama;
}

.tooltip {
  position: absolute;
  position-anchor: --cta-utama;
  top: anchor(bottom);
  left: anchor(center);
}

Keuntungan dibanding solusi JavaScript seperti Floating UI:

Kenapa Penting?

Untuk landing page Indonesia yang ramai komponen UI seperti tooltip harga, popover CTA, atau menu mega-nav, anchor-name memangkas dependency JavaScript yang biasanya membengkak. Dari pengalaman membangun Vetmo dan Nalesha, penggantian Floating UI dengan anchor-name memangkas 9 sampai 14 KB JavaScript per halaman dan menghapus jitter saat resize. Spesifikasi lengkap dapat dibaca di W3C CSS Anchor Positioning Module.

Pertanyaan Umum

Apakah anchor-name menggantikan position: relative + absolute?

Tidak menggantikan, melengkapi. Pola lama tetap dipakai untuk anak elemen langsung. anchor-name dipakai ketika elemen yang ingin diposisikan bukan anak dari jangkarnya, misalnya popover top-layer.

Bagaimana fallback untuk browser yang belum mendukung?

Gunakan polyfill @oddbird/css-anchor-positioning yang dimuat conditional via @supports not (anchor-name: --x), atau fallback ke layout sederhana tanpa anchoring.