Dipublikasikan: 11 Juni 2025
Tidak ada lagi hack batas dan elemen pseudo, dan nikmati dekorasi celah CSS.
Tim Microsoft Edge dengan senang hati mengumumkan bahwa dekorasi celah CSS, cara baru untuk menata gaya celah di antara item dalam tata letak fleksibel, petak, dan multi-kolom, kini tersedia untuk uji coba developer di Chrome dan Edge 139.
Cobalah dan bagikan masukan Anda untuk membantu membentuk masa depan API ini.
Link penting
Masalah
Gaya spasi di komponen UI seperti kalender, kartu, atau petak data dapat sangat meningkatkan keterbacaan dan menambah estetika secara keseluruhan. Namun, untuk mendapatkan efek ini dalam tata letak petak dan flexbox, biasanya diperlukan solusi yang canggung dengan batas, elemen pseudo, atau trik latar belakang. Solusi ini dapat menjadi masalah karena beberapa alasan.
- Tidak intuitif: CSS ini memperkenalkan dependensi struktural untuk gaya visual, yang bertentangan dengan prinsip HTML semantik.
- Tidak mudah diakses: Elemen ini sering kali memerlukan elemen DOM tambahan, yang dapat mengganggu teknologi pendukung, seperti pembaca layar.
- Sulit dikelola: Komponen ini memerlukan logika tata letak yang rumit dan mempersulit gaya visual yang konsisten di seluruh komponen.
- Buruk untuk performa: Solusi ini dapat menambahkan elemen yang tidak perlu ke DOM yang dapat menyebabkan masalah performa.
Meskipun platform web sudah mendukung celah gaya dengan properti column-rule, saat ini hal ini hanya terbatas pada tata letak multi-kolom. Developer web telah lama meminta cara yang konsisten untuk menata gaya celah
di seluruh jenis tata letak relevan lainnya, seperti petak dan flexbox.
Solusi: Dekorasi celah CSS
Dekorasi celah memperluas properti column-rule agar berfungsi dengan jenis tata letak
lain seperti petak dan flexbox, serta memperkenalkan properti row-rule baru untuk
melengkapinya. Hal ini menghadirkan konsistensi dan kemampuan penyesuaian baru pada gaya
celah di berbagai jenis tata letak.
Dekorasi celah CSS memberikan manfaat berikut:
- Tidak ada dampak tata letak: Dekorasi bersifat murni visual. Elemen ini tidak memengaruhi tata letak atau spasi, sehingga Anda dapat menggunakannya tanpa khawatir merusak desain yang ada.
- Sintaksis ulang: Serupa dengan CSS Grid, Anda dapat menggunakan sintaksis
repeat()untuk membuat pola dekorasi di berbagai bagian penampung, sehingga memungkinkan desain yang kaya dan konsisten dengan CSS minimal. - Markup yang lebih bersih: Tidak perlu elemen tambahan atau pseudo-elemen—cukup gayai celah secara langsung.
- Kemampuan penyesuaian: Properti CSS baru seperti
*rule-break,*rule-outset, dangap-rule-paint-ordermemungkinkan lebih banyak opsi penyesuaian di luar gaya aturan tradisional untuk lebar, gaya, dan warna.
Dengan dekorasi celah CSS, Anda dapat membuat tata letak halaman yang unik secara visual dan mudah dikelola dengan lebih mudah.
Cara kerja dekorasi celah
Untuk mencoba dekorasi celah CSS sekarang, gunakan browser yang mendukungnya: Edge
atau Chrome, mulai dari versi 139, dan alihkan
tanda Enable Experimental Web Platform Features dengan membuka
edge://flags atau chrome://flags.
Playground developer interaktif
Untuk mencoba berbagai jenis tata letak tempat dekorasi celah CSS didukung, dan dengan semua properti baru, coba taman bermain developer interaktif kami.
Menu burger
Demo menu
burger
menunjukkan cara menggunakan properti column-rule-break: intersection untuk memisahkan dekorasi
celah kolom di setiap persimpangan yang terlihat dengan celah baris.
Demo ini juga menggunakan column-rule-offset: -15px untuk menyesuaikan panjang
dekorasi, menariknya dari tepi setiap persimpangan.
Notebook
Dalam demo
notebook,
row-rule-break: none memastikan bahwa dekorasi baris tidak terganggu di
persimpangan—dekorasi berjalan terus-menerus dari kiri ke kanan penampung.
Di sisi lain, column-rule-break: spanning-item memastikan bahwa dekorasi
kolom tidak digambar di belakang item yang meluas—dekorasi dimulai dan dihentikan pada
item yang meluas yang membentuk persimpangan T yang terlihat.
Properti row-rule menggunakan fungsi repeat() untuk memiliki kontrol yang akurat
terhadap cara dekorasi celah diterapkan di berbagai bagian tata letak.
Hal ini memungkinkan pola gaya visual dengan aturan baris disembunyikan di header dan footer, lebih tebal di sekitar konten utama, dan lebih halus di tempat lain.
Berita CSS harian
Demo Berita CSS harian menggunakan tata letak bergaya majalah dan menentukan dekorasi celah CSS di beberapa penampung petak dan flexbox.
Perhatikan game Sudoku di sebelah kanan, yang menggunakan petak 9x9 dan pola berulang untuk menggambar garis tipis dan tebal di antara baris dan kolom:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
Meminta masukan
Kami senang Anda dapat mencoba dekorasi celah CSS. Kami yakin fitur ini dapat mengatasi masalah umum dan kami ingin mendengar masukan Anda tentang fitur ini agar kami dapat meningkatkan kualitas fitur agar sesuai dengan kebutuhan Anda.
Fitur dekorasi celah CSS masih diterapkan di Chromium. Jika Anda mengujinya, perhatikan bahwa kami masih aktif mengerjakannya dan Anda mungkin mengalami kasus saat fitur ini tidak berperilaku seperti yang diharapkan. Beberapa keterbatasan saat ini mencakup menganimasikan dekorasi celah dan menggunakan sejumlah besar jalur petak.
Jika Anda menemukan bug, atau memiliki pendapat tentang fitur ini, bagikan masukan Anda dengan membuka bug Chromium baru.