Digital Transformation
CSS position-try-fallbacks (Property)
TL;DR: CSS
position-try-fallbacksadalah properti yang melengkapi CSS Anchor Positioning. Ketika tooltip atau popover akan keluar viewport, browser otomatis mencoba alternatif penempatan yang kita daftarkan (misalnyaflip-block,flip-inline), tanpa perlu kalkulasi JavaScript. Sejak 2024 Chrome stabil, properti ini menggantikan logika "flip" yang dulu ditangani library seperti Popper.js.
Apa itu CSS position-try-fallbacks?
position-try-fallbacks adalah daftar strategi penempatan alternatif yang akan dicoba browser ketika penempatan utama elemen anchor-positioned tidak muat. Nilainya bisa berupa keyword bawaan (flip-block, flip-inline, flip-start) atau nama strategi kustom yang didefinisikan via @position-try. Properti ini bekerja berpasangan dengan CSS Anchor Positioning dan CSS anchor-name (Property).
Anggap properti ini seperti rencana cadangan parkir. Jika slot utama penuh, mobil mencoba slot kedua, lalu ketiga, sampai menemukan yang muat. Logika ini sebelumnya butuh sekitar 8 hingga 12 KB JavaScript dari library positioning eksternal.
Nilai Umum
| Keyword | Efek |
|---|---|
flip-block | Balik penempatan di sumbu vertikal (atas <-> bawah). |
flip-inline | Balik penempatan di sumbu horizontal (kiri <-> kanan). |
flip-start | Tukar nilai start dan end. |
--my-fallback | Strategi kustom dari @position-try --my-fallback {...}. |
Kenapa Penting?
Untuk website bisnis Indonesia yang melayani perangkat layar kecil (mayoritas trafik mobile), tooltip dan popover sering tertutup tepi viewport. Tanpa fallback, UX rusak dan konversi terganggu. Di proyek personal branding Yuanita Sekar, mengganti logika flip Popper.js dengan position-try-fallbacks: flip-block, flip-inline menghapus 9,4 KB JavaScript dan menghilangkan satu sumber layout shift di komponen popover testimoni. Untuk konsep popover, lihat HTML Popover API.
Pertanyaan Umum
Apakah saya tetap butuh JavaScript untuk tooltip?
Untuk lifecycle (open/close), ya, gunakan HTML Popover API. Untuk positioning dan fallback, tidak lagi.
Apakah didukung Safari?
Per April 2026, Safari mendukung sebagian. Pakai feature query untuk progressive enhancement.
Istilah Terkait