- Sebelumnya, kita bisa membuat jarak dengan properti CSS
gap, tetapi bagian gap itu sendiri tidak bisa diberi gaya, sehingga diperlukan berbagai cara akal-akalan (elemen tambahan, border, pseudo-element, dan lain-lain)
- Fitur baru CSS gap decorations memungkinkan kita menggambar garis pemisah (separator) langsung di antara item layout dengan properti seperti
row-rule, column-rule, dan lainnya
- Dekorasi dapat diterapkan di semua layout utama seperti Grid, Flexbox, Multi-column, dan segera Masonry, sehingga peningkatan struktural/visual bisa dilakukan hanya dengan CSS murni tanpa markup tambahan atau elemen yang tidak perlu
- Mendukung pengulangan/kombinasi berbagai gaya (ketebalan, warna, pola, dll.) dan dapat dikontrol secara presisi dengan
repeat(), outset, paint-order, dan lain-lain
- Saat ini hanya bisa digunakan di keluarga Chromium (Chrome/Edge 139+) dengan flag diaktifkan, dan masih dalam proses standardisasi serta perluasan
Batasan gap lama dan perubahannya
- Dulu, area gap sulit untuk diberi gaya, dan kita harus menambahkan border pemisah atau elemen palsu untuk separator
- Pendekatan seperti ini menimbulkan berbagai kelemahan terkait ukuran layout, aksesibilitas, kompleksitas markup, dan lain-lain
- Kini standar gap decorations hadir, sehingga dekorasi (seperti garis) dapat diterapkan pada area jarak hanya dengan properti CSS sederhana
Pengenalan CSS gap decorations
- column-rule: digunakan untuk menggambar garis pemisah vertikal pada multi-column yang sudah ada (contoh:
column-rule: 1px solid black;)
- Kini properti ini juga bisa digunakan pada flexbox, grid, dan lainnya
.my-grid-container {
display: grid;
gap: 2px;
column-rule: 2px solid pink;
}
- row-rule: dapat menggambar separator antarbaris (horizontal)
.my-flex-container {
display: flex;
gap: 10px;
row-rule: 10px dotted limegreen;
column-rule: 5px dashed coral;
}
- Pengulangan/kombinasi banyak gaya:
repeat() atau pemisahan dengan koma memungkinkan pencampuran berbagai gaya
.my-container {
display: grid;
gap: 2px;
row-rule:
repeat(2, 1px dashed red),
2px solid black,
repeat(auto, 1px dotted green);
}
- Properti kontrol presisi:
row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order, dan lainnya memungkinkan pengaturan rinci untuk posisi, titik perpotongan, urutan tumpang tindih, dan sebagainya
Contoh: penerapan praktis gap decorations
- Halaman contoh menetapkan body sebagai grid, lalu memisahkan header/nav/main/footer dengan gap
- Dengan
row-rule, garis pemisah dengan ketebalan, warna, dan gaya berbeda bisa diterapkan
- Menu nav menggunakan flexbox dan
column-rule untuk menggambar garis di antara item
- Area main menggunakan flexbox untuk menyusun gambar dan teks dalam bentuk masonry, lalu menegaskan struktur bergaya grid dengan
row-rule dan column-rule
- Dengan
column-rule-outset: 0; dan sejenisnya, posisi awal/akhir garis dapat disesuaikan secara presisi
Dukungan browser dan cara mengaktifkan
- Saat ini, di browser berbasis Chromium seperti Chrome/Edge 139+, fitur ini memerlukan aktivasi flag (about://flags → Experimental Web Platform Features)
- Standardisasi resmi masih berlangsung, dan berbagai umpan balik serta eksperimen sangat dianjurkan
Pelajari lebih lanjut dan Playground
Belum ada komentar.