Melampaui Absolute: Tinjauan Mendalam tentang CSS @position-try dan Anchor Positioning

Selama beberapa dekade, pengembang web telah bergelut dengan serangkaian tantangan UI yang sama: membuat tooltip, popover, menu konteks, dan elemen mengambang lainnya yang secara cerdas memposisikan diri relatif terhadap pemicunya. Pendekatan tradisional hampir selalu melibatkan perpaduan rumit antara CSS `position: absolute` dan dosis JavaScript yang besar untuk menghitung posisi, mendeteksi benturan dengan viewport, dan mengubah penempatan elemen secara langsung.

Solusi yang sarat JavaScript ini, meskipun efektif, datang dengan bebannya sendiri: overhead kinerja, kompleksitas pemeliharaan, dan perjuangan terus-menerus untuk menjaga logika tetap kuat. Pustaka seperti Popper.js menjadi standar industri justru karena masalah ini sangat sulit dipecahkan secara native. Tapi bagaimana jika kita bisa mendeklarasikan strategi penempatan yang kompleks ini langsung di CSS?

Masuklah API CSS Anchor Positioning, sebuah proposal terobosan yang akan merevolusi cara kita menangani skenario ini. Intinya adalah dua konsep yang kuat: kemampuan untuk "menjangkarkan" satu elemen ke elemen lain, terlepas dari hubungan DOM mereka, dan seperangkat aturan fallback yang didefinisikan dengan @position-try. Artikel ini memberikan eksplorasi komprehensif tentang batasan baru dalam CSS ini, memberdayakan Anda untuk membangun UI yang lebih tangguh, berkinerja tinggi, dan deklaratif.

Masalah Abadi dengan Penempatan Tradisional

Sebelum kita dapat menghargai keanggunan solusi baru, kita harus terlebih dahulu memahami keterbatasan yang lama. Andalan dari penempatan dinamis selalu `position: absolute`, yang memposisikan elemen relatif terhadap leluhur terdekatnya yang diposisikan.

Penyangga JavaScript

Pertimbangkan tooltip sederhana yang seharusnya muncul di atas sebuah tombol. Dengan `position: absolute`, Anda dapat menempatkannya dengan benar. Tapi apa yang terjadi ketika tombol itu berada di dekat tepi atas jendela browser? Tooltip akan terpotong. Atau jika berada di dekat tepi kanan? Tooltip akan meluap dan memicu bilah gulir horizontal.

Untuk mengatasi ini, pengembang secara historis mengandalkan JavaScript:

• Dapatkan posisi dan dimensi elemen jangkar menggunakan `getBoundingClientRect()`.
• Dapatkan dimensi tooltip.
• Dapatkan dimensi viewport (`window.innerWidth`, `window.innerHeight`).
• Lakukan serangkaian perhitungan untuk menentukan nilai `top` dan `left` yang ideal.
• Periksa apakah posisi ideal ini menyebabkan benturan dengan tepi viewport.
• Jika ya, hitung ulang untuk posisi alternatif (misalnya, membaliknya agar muncul di bawah tombol).
• Tambahkan event listener untuk `scroll` dan `resize` untuk mengulangi seluruh proses ini setiap kali tata letak mungkin berubah.

Ini adalah jumlah logika yang signifikan untuk sesuatu yang terasa seperti tugas presentasi murni. Ini rapuh, dapat menyebabkan *layout jank* jika tidak diimplementasikan dengan hati-hati, dan menambah ukuran bundel serta pekerjaan di *main-thread* aplikasi Anda.

Paradigma Baru: Memperkenalkan CSS Anchor Positioning

API CSS Anchor Positioning menyediakan cara deklaratif, hanya dengan CSS, untuk mengelola hubungan ini. Ide dasarnya adalah menciptakan koneksi antara dua elemen: elemen yang diposisikan (misalnya, tooltip) dan jangkarnya (misalnya, tombol).

Properti Inti: `anchor-name` dan `position-anchor`

Keajaiban dimulai dengan dua properti CSS baru:

• `anchor-name`: Properti ini diterapkan pada elemen yang ingin Anda gunakan sebagai titik referensi. Ini secara efektif memberikan jangkar nama unik dengan awalan tanda hubung yang dapat direferensikan di tempat lain.
• `position-anchor`: Properti ini diterapkan pada elemen yang diposisikan dan memberitahunya jangkar bernama mana yang akan digunakan untuk perhitungan posisinya.

Mari kita lihat contoh dasar:

            
<!-- Struktur HTML -->
<button id="my-button">Arahkan Saya</button>
<div class="tooltip">Ini adalah tooltip!</div>

<!-- CSS -->
#my-button {
  anchor-name: --my-button-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  /* Sekarang kita dapat memposisikan relatif terhadap jangkar */
  bottom: anchor(top);
  left: anchor(center);
}

            

              
                Copy
              
            
          

Dalam cuplikan ini, tombol ditetapkan sebagai jangkar bernama `--my-button-anchor`. Tooltip kemudian menggunakan `position-anchor` untuk menautkan dirinya ke jangkar itu. Bagian yang benar-benar revolusioner adalah fungsi `anchor()`, yang memungkinkan kita menggunakan batas-batas jangkar (`top`, `bottom`, `left`, `right`, `center`) sebagai nilai untuk properti penempatan kita.

Ini sudah menyederhanakan banyak hal, tetapi belum memecahkan masalah benturan viewport. Di situlah @position-try berperan.

Inti Solusi: `@position-try` dan `position-fallback`

Jika *anchor positioning* menciptakan tautan antar elemen, `@position-try` menyediakan kecerdasannya. Ini memungkinkan Anda untuk mendefinisikan daftar prioritas strategi penempatan alternatif. Browser kemudian akan mencoba setiap strategi secara berurutan, memilih yang pertama yang memungkinkan elemen yang diposisikan muat di dalam blok penampungnya (biasanya viewport) tanpa terpotong.

Mendefinisikan Opsi Fallback

Sebuah blok `@position-try` adalah seperangkat aturan CSS bernama yang mendefinisikan satu opsi penempatan. Anda dapat membuat sebanyak yang Anda butuhkan.

            
/* Opsi 1: Tempatkan di atas jangkar */
@position-try --tooltip-top {
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Opsi 2: Tempatkan di bawah jangkar */
@position-try --tooltip-bottom {
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Opsi 3: Tempatkan di sebelah kanan jangkar */
@position-try --tooltip-right {
  left: anchor(right);
  top: anchor(center);
  transform: translateY(-50%);
}

/* Opsi 4: Tempatkan di sebelah kiri jangkar */
@position-try --tooltip-left {
  right: anchor(left);
  top: anchor(center);
  transform: translateY(-50%);
}

            

              
                Copy
              
            
          

Perhatikan bagaimana setiap blok mendefinisikan strategi penempatan yang lengkap. Kami telah membuat empat opsi berbeda: atas, bawah, kanan, dan kiri relatif terhadap jangkar.

Menerapkan Fallback dengan `position-fallback`

Setelah Anda memiliki blok `@position-try`, Anda memberitahu elemen yang diposisikan untuk menggunakannya dengan properti `position-fallback`. Urutannya penting—ini mendefinisikan prioritas.

            
.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  position-fallback: --tooltip-top --tooltip-bottom --tooltip-right --tooltip-left;
}

            

              
                Copy
              
            
          

Dengan satu baris CSS ini, Anda telah menginstruksikan browser:

1. Pertama, coba posisikan tooltip menggunakan aturan di `--tooltip-top`.
2. Jika posisi itu menyebabkan tooltip terpotong oleh viewport, abaikan dan coba aturan di `--tooltip-bottom`.
3. Jika itu juga gagal, coba `--tooltip-right`.
4. Dan jika semuanya gagal, coba `--tooltip-left`.

Browser menangani semua deteksi benturan dan perpindahan posisi secara otomatis. Tidak ada `getBoundingClientRect()`, tidak ada event listener `resize`, tidak ada JavaScript. Ini adalah pergeseran monumental dari logika JavaScript imperatif ke pendekatan CSS deklaratif.

Contoh Praktis Lengkap: Popover yang Sadar-Benturan

Mari kita bangun contoh yang lebih kuat yang menggabungkan *anchor positioning* dengan API Popover modern untuk komponen UI yang berfungsi penuh, mudah diakses, dan cerdas.

Langkah 1: Struktur HTML

Kita akan menggunakan atribut `popover` asli, yang memberi kita manajemen state (terbuka/tertutup), fungsionalitas *light-dismiss* (mengklik di luar akan menutupnya), dan manfaat aksesibilitas secara gratis.

            
<button popovertarget="my-popover" id="popover-trigger">
  Klik Saya
</button>

<div id="my-popover" popover>
  <h3>Judul Popover</h3>
  <p>Popover ini akan secara cerdas memposisikan ulang dirinya agar tetap berada di dalam viewport. Coba ubah ukuran browser Anda atau gulir halaman!</p>
</div>

            

              
                Copy
              
            
          

Langkah 2: Mendefinisikan Jangkar

Kami menunjuk tombol kami sebagai jangkar. Mari kita tambahkan juga beberapa gaya dasar.

            
#popover-trigger {
  /* Ini adalah bagian kuncinya */
  anchor-name: --popover-anchor;

  /* Gaya dasar */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Langkah 3: Mendefinisikan Opsi `@position-try`

Sekarang kita membuat kaskade opsi penempatan kita. Kita akan menambahkan `margin` kecil di setiap kasus untuk menciptakan ruang antara popover dan pemicu.

            
/* Prioritas 1: Posisi di atas pemicu */
@position-try --popover-top {
  bottom: anchor(top, 8px);
  left: anchor(center);
}

/* Prioritas 2: Posisi di bawah pemicu */
@position-try --popover-bottom {
  top: anchor(bottom, 8px);
  left: anchor(center);
}

/* Prioritas 3: Posisi di sebelah kanan */
@position-try --popover-right {
  left: anchor(right, 8px);
  top: anchor(center);
}

/* Prioritas 4: Posisi di sebelah kiri */
@position-try --popover-left {
  right: anchor(left, 8px);
  top: anchor(center);
}

            

              
                Copy
              
            
          

Catatan: Fungsi `anchor()` dapat menerima argumen kedua opsional, yang berfungsi sebagai nilai fallback. Namun, di sini kami menggunakan sintaks yang tidak standar untuk mengilustrasikan potensi peningkatan di masa depan untuk margin. Cara yang benar hari ini adalah dengan menggunakan `calc(anchor(top) - 8px)` atau yang serupa, tetapi tujuannya adalah untuk menciptakan celah.

Langkah 4: Menata Gaya Popover dan Menerapkan Fallback

Terakhir, kita menata gaya popover kita dan menghubungkan semuanya.

            
#my-popover {
  /* Tautkan popover ke jangkar bernama kita */
  position-anchor: --popover-anchor;

  /* Tentukan prioritas opsi fallback kita */
  position-fallback: --popover-top --popover-bottom --popover-right --popover-left;

  /* Kita harus menggunakan penempatan fixed atau absolute agar ini berfungsi */
  position: absolute;

  /* Gaya default */
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0; /* API popover menambahkan margin secara default, kita meresetnya */
}

/* Popover disembunyikan sampai dibuka */
#my-popover:not(:popover-open) {
  display: none;
}

            

              
                Copy
              
            
          

Dan itu saja! Dengan kode ini, Anda memiliki popover yang berfungsi penuh yang akan secara otomatis membalik posisinya untuk menghindari terpotong oleh tepi layar. Tidak diperlukan JavaScript untuk logika penempatannya.

Konsep Lanjutan dan Kontrol yang Lebih Halus

API Anchor Positioning menawarkan kontrol yang lebih besar untuk skenario yang kompleks.

Tinjauan Lebih Dalam Fungsi `anchor()`

Fungsi `anchor()` sangat serbaguna. Ini bukan hanya tentang empat tepi. Anda juga dapat menargetkan persentase dari ukuran jangkar.

• `anchor(left)` atau `anchor(start)`: Tepi kiri jangkar.
• `anchor(right)` atau `anchor(end)`: Tepi kanan.
• `anchor(top)`: Tepi atas.
• `anchor(bottom)`: Tepi bawah.
• `anchor(center)`: Pusat horizontal atau vertikal, tergantung pada konteks. Untuk `left` atau `right`, ini adalah pusat horizontal. Untuk `top` atau `bottom`, ini adalah pusat vertikal.
• `anchor(50%)`: Setara dengan `anchor(center)`.
• `anchor(25%)`: Titik 25% dari sumbu jangkar.

Selain itu, Anda dapat menggunakan dimensi jangkar dalam perhitungan Anda dengan fungsi `anchor-size()`:

            
.element {
  /* Buat elemen setengah dari lebar jangkarnya */
  width: calc(anchor-size(width) * 0.5);
}

            

              
                Copy
              
            
          

Jangkar Implisit

Dalam beberapa kasus, Anda bahkan tidak perlu mendefinisikan `anchor-name` dan `position-anchor` secara eksplisit. Untuk hubungan tertentu, browser dapat menyimpulkan jangkar implisit. Contoh paling umum adalah popover yang dipanggil oleh tombol `popovertarget`. Dalam hal ini, tombol tersebut secara otomatis menjadi jangkar implisit untuk popover, menyederhanakan CSS Anda:

            
#my-popover {
  /* Tidak diperlukan position-anchor! */
  position-fallback: --popover-top --popover-bottom;
  ...
}

            

              
                Copy
              
            
          

Ini mengurangi boilerplate dan membuat hubungan antara pemicu dan popover menjadi lebih langsung.

Dukungan Browser dan Jalan ke Depan

Pada akhir 2023, API CSS Anchor Positioning adalah teknologi eksperimental. Ini tersedia di Google Chrome dan Microsoft Edge di balik bendera fitur (cari "Experimental Web Platform features" di `chrome://flags`).

Meskipun belum siap untuk penggunaan produksi di semua browser, kehadirannya di mesin browser utama menandakan komitmen kuat untuk memecahkan masalah CSS yang sudah lama ada ini. Sangat penting bagi pengembang untuk bereksperimen dengannya, memberikan umpan balik kepada vendor browser, dan bersiap untuk masa depan di mana JavaScript untuk penempatan elemen menjadi pengecualian, bukan aturan.

Anda dapat melacak status adopsinya di platform seperti "Can I use...". Untuk saat ini, anggaplah ini sebagai alat untuk *progressive enhancement*. Anda dapat membangun UI Anda dengan `@position-try` dan menggunakan kueri `@supports` untuk menyediakan posisi yang lebih sederhana dan tidak dapat dibalik untuk browser yang tidak mendukungnya, sementara pengguna di browser modern mendapatkan pengalaman yang ditingkatkan.

Kasus Penggunaan di Luar Popover

Aplikasi potensial dari API ini sangat luas dan melampaui tooltip sederhana.

• Menu Pilihan Kustom: Buat menu dropdown `` kustom yang indah yang secara cerdas terbuka ke atas atau ke bawah berdasarkan ruang yang tersedia.
  Menu Konteks: Posisikan menu klik kanan kustom tepat di sebelah lokasi kursor atau elemen target.
  Tur Perkenalan: Pandu pengguna melalui aplikasi Anda dengan menjangkarkan langkah-langkah tutorial ke elemen UI spesifik yang mereka jelaskan.
  Editor Teks Kaya: Posisikan bilah alat pemformatan di atas atau di bawah teks yang dipilih.
  Dasbor Kompleks: Tampilkan kartu informasi terperinci saat pengguna berinteraksi dengan titik data pada bagan atau grafik.

  Kesimpulan: Masa Depan Deklaratif untuk Tata Letak Dinamis

  CSS `@position-try` dan API Anchor Positioning yang lebih luas mewakili pergeseran mendasar dalam cara kita mendekati pengembangan UI. Mereka memindahkan logika penempatan yang kompleks dan imperatif dari JavaScript ke rumah yang lebih sesuai dan deklaratif di CSS.

  Manfaatnya jelas:

  • Mengurangi Kompleksitas: Tidak ada lagi perhitungan manual atau pustaka JavaScript yang kompleks untuk penempatan.
  • Peningkatan Kinerja: Mesin rendering browser yang dioptimalkan menangani penempatan, menghasilkan kinerja yang lebih lancar daripada solusi berbasis skrip.
  • UI yang Lebih Tangguh: Tata letak secara otomatis beradaptasi dengan ukuran layar dan perubahan konten yang berbeda tanpa kode tambahan.
  • Basis Kode yang Lebih Bersih: Pemisahan kepentingan ditingkatkan, dengan logika penataan dan tata letak berada sepenuhnya di dalam CSS.

  Sambil menunggu dukungan browser yang luas, sekarang adalah waktunya untuk belajar, bereksperimen, dan mendukung alat-alat baru yang kuat ini. Dengan merangkul `@position-try`, kita melangkah ke masa depan di mana platform web itu sendiri memberikan solusi elegan untuk tantangan tata letak kita yang paling umum dan membuat frustrasi.