Border Bawah Navbar Ternyata Ada, Warnanya Saja yang Transparan

Iseng buka halaman depan situs sendiri, mata saya nyangkut di navbar. Di keadaan belum scroll, dia tampak mengambang: background putih tipis, blur di belakangnya, dan nggak ada garis apa pun yang misahin dia dari konten. Lalu saya scroll ke bawah, garis hairline muncul di bawahnya bareng background yang mengeras. Balik ke atas lagi, garisnya ilang. Konten jadi kayak nempel langsung ke tepi bawah navbar tanpa jeda. Kesan mengambangnya pecah di momen itu.

Dugaan pertama saya jelas: border bawahnya belum dipasang di keadaan awal. Logis kan, garisnya emang nggak kelihatan, berarti belum ada. Saya buka file Navbar dan siap-siap nambahin border-b yang "hilang" itu.

Ternyata saya salah total. Border-b udah nangkring di sana sejak awal.

Border yang nggak pernah ilang

Di state unscrolled, class-nya border-b plus border-transparent. Jadi border selebar 1 piksel itu emang dirender, tetap kehitung di box model, dan tetap nambah ruang elemen sebesar tebal border itu [3]. Cuma warnanya yang dibikin transparan penuh, persis arti harfiah class itu di dokumen Tailwind: border-color-nya diset jadi transparent [1]. Mata saya yang dibohongin, bukan layout-nya. Ruangnya nggak pernah pindah, yang ilang cuma garisnya dari pandangan.

Ini alasan navbar nggak pernah "loncat" pas scroll. Kalo border beneran dimunculin pas scrolled dan diilangin pas unscrolled, tinggi navbar bakal berubah 1 piksel tiap ngelewatin ambang scroll. Semua konten di bawahnya ikut geser. Dengan border transparan, ruangnya udah disiapin dari awal, jadi transisinya murni visual.

Fix-nya satu baris: ganti border-transparent jadi border-border/60, warna yang sama dengan yang udah lama dipakai state scrolled. Sisanya dikerjain transition-all duration-500 yang udah ada di class induk. Yang berubah antara dua state sekarang cuma warna border dan tingkat pekat background, dan transisi 500 bikin semuanya lancar.

Dari mana angka /60 itu

Modifier /60 di border-border/60 bukan trik Tailwind semata. Di Tailwind v4, modifier opasitas begini kerja di atas fungsi color-mix() dari CSS, yang ngembaliin hasil campuran warna di colorspace tertentu [2]. Fungsi ini udah masuk Baseline lintas browser sejak Mei 2023, jadi nggak perlu khawatir didukung setengah-setengah. Warna bordernya jadi 60 persen dari warna border theme, sisanya transparan, dan pas transisi jalan, yang dicampur ulang tiap frame ya angka campuran itu.

Tinggal satu pertanyaan yang nggak kejawab: kenapa dari awal dipilih border transparan, bukan border tipis yang langsung kelihatan? Commit-nya nggak nyatet alasannya. Dugaan terbuka saya, tujuannya nahan layout shift, pola yang mirip scrollbar-gutter yang menyediakan ruang buat scrollbar walau scrollbar-nya nggak selalu muncul. Tapi itu tebakan. Yang jelas, efek sampingnya garis jadi nggak kelihatan sama sekali di keadaan awal, dan itu yang kurang enak dipandang.

Pilih atur warna, bukan kemunculan

Dari kejadian ini saya makin yakin sama satu preferensi: elemen yang memang harus ada, rawat keberadaannya, main di warna atau opasitasnya. Border yang selalu dirender itu lebih tenang daripada border yang muncul-hilang, soalnya nggak ada perhitungan layout yang bisa keganggu. Kalo garisnya harus terlihat terus, atur warnanya. Kalo garisnya emang nggak boleh terlihat, transparan masuk akal. Yang bikin ribet ya posisi di tengah: ada tapi nggak kelihatan, kayak kondisi navbar saya sebelumnya.

Sekarang navbar saya punya garis di kedua state, bedanya cuma pekatnya. Satu baris class diubah, sisanya dikerjain transisi yang udah lama jalan.

Sumber

• Sumber 1 [1]
• Sumber 2 [2]
• Sumber 3 [3]