Dipublikasikan: 15 Mei 2026
Dekorasi celah CSS tersedia di Chrome dan Edge mulai versi 149. Gaya celah antara tata letak petak, flexbox, dan multi-kolom tanpa menggunakan batas atau elemen semu. Fitur ini dibuat melalui kolaborasi antara tim Microsoft Edge dan Google Chrome.
Permasalahan
Menata gaya celah antara item tata letak selalu memerlukan solusi sementara. Batas pada item individual, elemen semu, peretasan latar belakang. Pendekatan ini memiliki biaya:
- Bergantung pada struktur. Menambahkan pemisah visual berarti mengubah markup atau menulis pemilih untuk item tertentu.
- Mengganggu aksesibilitas. Elemen DOM tambahan muncul di hierarki aksesibilitas saat tidak seharusnya.
- Sulit dipertahankan. Tata letak responsif melanggar asumsi yang digunakan untuk membuat gaya celah Anda.
- Mempengaruhi performa. Lebih banyak node DOM, lebih banyak pekerjaan tata letak.
- Memiliki ergonomi penulisan yang buruk. Perhitungan geometris yang kompleks sering kali diperlukan agar semuanya berfungsi dengan benar.
Properti column-rule menangani dekorasi celah untuk tata letak multi-kolom, tetapi petak dan flexbox sebelumnya tidak memiliki fungsi yang setara.
Solusi
Penampung petak dan flexbox kini menerima column-rule. Properti row-rule baru menangani celah horizontal. Dekorasi ini murni visual dan tidak memengaruhi tata letak yang ada. Jika Anda menggunakan properti column-rule dalam tata letak multi-kolom, perilaku yang ada akan tetap sama.
Misalnya, berikut adalah penampung fleksibel dengan tiga panel yang menggunakan daftar gaya untuk aturan kolom dan barisnya:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
Seperti yang diilustrasikan dalam contoh ini, row-rule dan column-rule menerima singkatan yang sama untuk lebar, gaya, dan warna. Gunakan singkatan rule untuk menetapkan keduanya sekaligus.
Properti baru
Namun, kami tidak hanya membawa column-rule ke mode tata letak lain dan menambahkan rekan row. Kami juga memperkenalkan kontrol untuk menyempurnakan dekorasi Anda: cara dekorasi tersebut terputus di persimpangan, seberapa jauh dekorasi tersebut dimasukkan dari tepi celah, kapan dekorasi tersebut muncul relatif terhadap item, dan cara memvariasikan gaya di seluruh celah. Lebar, warna, dan inset aturan juga dapat dianimasikan.
Sintaksis repeat()
Dekorasi celah mendukung repeat() untuk nilai lebar, gaya, dan warnanya. Hal ini memungkinkan Anda memvariasikan dekorasi di seluruh celah dalam bentuk singkat, mirip dengan sintaksis repeat() yang digunakan untuk definisi jalur dalam petak:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
Hal ini memberikan aturan 1 piksel untuk dua celah baris pertama dan aturan 4 piksel untuk celah ketiga, yang akan berputar jika ada lebih banyak celah daripada nilai. Anda juga dapat meneruskan beberapa nilai secara langsung tanpa repeat(). Misalnya, gaya aturan baris alternatif untuk batas jam dan setengah jam dalam kalender:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
Mengontrol jeda dekorasi
Properti column-rule-break dan row-rule-break mengontrol perilaku dekorasi di persimpangan celah:
normal(default): Perilaku bergantung pada jenis penampung. Informasi selengkapnya ada dalam spesifikasi.none: Dekorasi berjalan terus-menerus melalui persimpangan.intersection: Dekorasi terputus saat celah baris dan kolom bersilangan.
Misalnya, jika Anda menetapkan rule-break ke intersection dalam penampung petak, aturan akan terputus di persimpangan celah, bukan terus berlanjut:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
Jika Anda menetapkan rule-break ke none, aturan akan berjalan terus-menerus melalui persimpangan:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
Anda dapat mencoba nilai ini di playground interaktif.
Memperluas atau menciutkan dekorasi
Properti column-rule-inset dan row-rule-inset mengontrol seberapa jauh dekorasi diperluas dalam celah. Anda dapat menetapkan inset di semua sisi sekaligus dengan singkatan, atau menargetkan inset secara asimetris dengan column-rule-inset-cap (untuk endpoint yang tidak memiliki celah persilangan) dan column-rule-inset-junction (untuk endpoint yang berpotongan dengan celah lain).
Nilai dapat berupa panjang, persentase, atau kata kunci overlap-join, yang menggabungkan dekorasi celah ke sudut. Misalnya, menetapkan rule-inset ke 5 piksel akan menciutkan semua dekorasi ke dalam sebesar 5 piksel:
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
Menetapkan rule-inset-cap ke 0 piksel dan rule-inset-junction ke 10 piksel akan memberikan dekorasi yang rata di tepi penampung, tetapi dimasukkan di persimpangan. Demo dasbor yang ditampilkan sebelumnya menggunakan pendekatan ini, dan inset dianimasikan saat kursor diarahkan:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
Visibilitas
Properti column-rule-visibility-items dan row-rule-visibility-items mengontrol kapan aturan muncul berdasarkan kedekatan item:
normal(default): Bergantung pada jenis penampung.all: Aturan muncul di setiap celah, bahkan yang kosong.around: Aturan muncul di mana pun ada satu atau beberapa item yang berdekatan.between: Aturan hanya muncul di antara dua item yang berdekatan.
Singkatan rule-visibility-items menetapkan keduanya sekaligus.
Menetapkan rule-visibility-items ke between hanya akan menampilkan aturan di antara item yang berdekatan:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
Di sisi lain, menetapkan rule-visibility-items ke all akan menampilkan aturan di setiap celah, bahkan yang tidak memiliki item yang berdekatan:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
Alihkan nilai dalam demo langsung untuk melihat perbedaannya.
Menganimasikan dekorasi
Lebar, warna, dan inset aturan dapat dianimasikan. Anda dapat mengalihkan dekorasi saat kursor diarahkan atau perubahan status lainnya. Demo dasbor yang ditampilkan sebelumnya mengalihkan warna dan inset aturan saat kursor diarahkan:
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
Demo
Semua demo yang ditampilkan dalam postingan ini tersedia di situs demo Edge.
Postingan blog uji coba developer menyertakan beberapa demo lainnya, termasuk playground interaktif, menu hamburger, tata letak notebook, dan tata letak bergaya majalah dengan petak sudoku.
Perubahan sejak uji coba developer
Jika Anda mencoba dekorasi celah selama uji coba developer (Chrome 139), perhatikan perubahan berikut:
- Fitur ini tersedia secara default; tidak diperlukan flag.
- Beberapa nama properti diupdate agar selaras dengan spesifikasi terbaru (misalnya,
column-rule-outsetdanrow-rule-outsetmenjadicolumn-rule-insetdanrow-rule-inset). - Properti
column-rule-visibility-itemsdanrow-rule-visibility-itemsditambahkan. - Dukungan animasi ditambahkan.
Menggunakan dekorasi celah hari ini
Dekorasi celah berfungsi di Chrome dan Edge, mulai versi 149. Jika dekorasi celah Anda murni dekoratif, fitur ini adalah peningkatan progresif; di browser tanpa dukungan, celah dirender secara normal tanpa dekorasi yang terlihat. Polyfill sedang dalam pengembangan untuk browser yang belum memiliki dukungan.
Laporkan bug di issue tracker Chromium. Untuk mengetahui latar belakang selengkapnya, lihat spesifikasi Dekorasi Celah CSS.