Cara Baru Menggambar Garis Pemisah di CSS: `CSS Gap Decorations`

• Menambahkan garis pemisah antarbagian di halaman web adalah teknik desain yang umum untuk menata konten dengan jelas dan meningkatkan keterbacaan
• Garis pemisah bisa ditambahkan dengan teknik CSS lama seperti border, tetapi ada keterbatasan seperti perubahan ukuran dan perlunya kode tambahan
• CSS Gap Decorations mengatasi masalah ini dengan menambahkan properti seperti column-rule dan row-rule

Teknik Garis Pemisah CSS yang Ada Saat Ini dan Keterbatasannya

• Properti border adalah cara umum untuk menambahkan garis pemisah, tetapi dapat menimbulkan masalah berikut
  • Menambahkan border dapat mengubah ukuran elemen
  • Perlu menulis kode tambahan untuk elemen pertama dan terakhir
  • Jika terjadi pembungkusan baris pada layout Flexbox, garis pemisah tidak dapat menutupi seluruh area
• Garis pemisah dapat ditambahkan dengan elemen semu ::before dan ::after, tetapi ada keterbatasan berikut
  • Perlu kode tambahan untuk elemen pertama dan terakhir
  • Perlu kode penentuan posisi absolut yang kompleks
• Pada container grid, garis pemisah bisa ditiru dengan menerapkan warna latar pada container dan menetapkan warna latar pada item
  • Panjang garis pemisah tidak dapat disesuaikan
  • Jika ada sel kosong, warna latar akan terlihat
  • Jika item tidak mengisi sel, warna latar akan terlihat
  • Tidak berfungsi jika latar halaman bukan warna solid tunggal
• Pada layout multi-kolom, garis pemisah bisa ditambahkan dengan properti column-rule, tetapi ada batasan berikut
  • Hanya berfungsi pada layout multi-kolom
  • Tidak dapat mengontrol arah inline konten

Usulan CSS Gap Decorations

• CSS Gap Decorations adalah usulan baru untuk mengatasi masalah-masalah di atas
• Poin utama usulan
  • Memperluas properti column-rule agar bisa diterapkan pada layout grid dan flexbox
  • Memperkenalkan properti baru row-rule
  • Memungkinkan pengaturan garis pemisah yang berbeda untuk tiap bagian container
• Warna garis pemisah dapat diubah dengan properti row-rule-color

  .alternate-red-blue {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    gap: 10px;  
    row-rule: 1px solid;  
    row-rule-color: red blue;  
  }  
  

• Garis pemisah dengan ketebalan dan warna yang berbeda juga dapat diatur

  .varying-widths {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    row-gap: 10px;  
    row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
  }  
  

• Perilaku garis pemisah di titik perpotongan juga dapat dikendalikan
  • Bisa menggunakan properti *-rule-break dan *-rule-outset
  • Bisa mengontrol posisi awal dan akhir garis pemisah di titik perpotongan
  • Bisa melakukan penyesuaian detail pada panjang dan offset garis pemisah

Permintaan Umpan Balik atas Usulan Ini

• Usulan CSS Gap Decorations akan terus disempurnakan berdasarkan umpan balik pengembang
• Informasi lebih lengkap tersedia di explainer resmi
• Umpan balik dapat dikirim melalui issue GitHub
• Masukan tentang perilaku garis pemisah di titik perpotongan sangat diharapkan

[GN⁺]

Komentar Hacker News

• Ingin membuat elemen pseudo baru: .container:gap { background-color: red; }

  • Bisa membuat latar belakang yang lebih keren seperti garis putus-putus atau gradien
  • Bisa mengatur ruang kosong di ujung pemisah dengan { padding: 2px }
  • Bisa menggunakan :gap-horz dan :gap-vert untuk mengatur jarak vertikal dan horizontal secara terpisah
  • Bisa mendapatkan warna selang-seling dengan .container:gap:nth-gap(2n) { color: blue; }

• Desain oleh komite memang bukan yang terbaik, tetapi sebagai penutur non-native, nama properti yang diusulkan terasa kurang menyampaikan maknanya

  • Misalnya, ia mendefinisikan jarak tetapi yang dilakukan adalah menggambar pemisah

• Semoga kasus penggunaan panel yang bisa disesuaikan ukurannya juga dipertimbangkan

  • Bahkan jika implementasinya sepenuhnya ada di ranah pengguna, akan berguna jika pemisah yang bisa diberi gaya juga bisa menerima event

• Menambahkan border mengubah ukuran item, dan itu mungkin tidak diinginkan

  • Masalah ini sudah diselesaikan selama lebih dari 10 tahun
  • Saya rasa baris pertama di file CSS semua orang adalah * { box-sizing: border-box; }
  • Border bisa dipikirkan dengan lebih masuk akal jika ditempatkan di bagian dalam lebar elemen

• Menarik. Akhir-akhir ini saya kebanyakan mengerjakan UI di QML, dan itu menangani hampir semua masalah ini

  • Beberapa bulan lalu, saya menerapkan garis grid di tampilan kalender dengan menggunakan jarak antar item agar latar belakang terlihat
  • Membiarkan properti "spacing" pada layout dan GPU yang mengerjakan sisanya

• Ide yang lumayan, tetapi rasanya akan lebih berguna sekitar 10 tahun lalu

  • Dengan CSS modern, pemisah bisa ditangani dengan satu selector dan properti
  • Bisa dilakukan dengan cara seperti .things .thing:not(:last-child) { border-bottom: 1px solid gray; }
  • Artikel memang menyebutkan hal ini, tetapi tampaknya terlalu melebih-lebihkan frekuensi edge case

• Ini sudah lama menjadi masalah yang menyakitkan. Keren melihat seseorang melakukan sesuatu untuk itu

  • Ini hanya berlaku untuk display: grid, jadi tidak berlaku untuk elemen dengan lebar yang tidak tetap
  • Di layar kecil, tanda | di antara tautan bisa muncul di akhir baris pertama atau awal baris kedua

• Ini mengingatkan saya pada pepatah desainer Jerman: "Saat desainer kehabisan ide, mereka menambahkan beberapa garis"

  • Mereka mulai menambahkan garis ketika tidak ada cara yang jelas untuk memisahkan konten

• Masalah ini sering muncul, dan saya ingin cara yang lebih baik daripada <hr/>

  • Itu tidak bekerja untuk baris tabel atau multi-kolom

• Semoga ini lolos... menggunakan AI untuk menambal kurangnya pengetahuan saya tentang flexbox memang berkah, tetapi ini terasa seperti solusi yang sesungguhnya