Properti box-decoration-break di Chrome 130

Rachel Andrew

Dipublikasikan: 11 Oktober 2024

Di Chrome 130, properti CSS box-decoration-break dengan nilai clone tersedia, dengan dukungan untuk fragmentasi inline dan blok. Postingan ini menjelaskan alasan dan cara menggunakannya.

Fragmentasi inline

Fragmentasi inline adalah apa yang terjadi saat elemen inline, misalnya string teks, terbagi di beberapa baris. Elemen inline memiliki kotak, yang biasanya tidak perlu Anda pikirkan, kecuali jika Anda mencoba menambahkan latar belakang atau batas ke elemen. Dalam contoh berikut, latar belakang dengan border-radius ditambahkan ke rentang. Batas hanya melengkung di awal dan akhir string.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

Baris teks yang di-wrap dengan latar belakang yang dipotong di tempat teks di-wrap.

Nilai awal box-decoration-break adalah slice, yang memberikan efek irisan pada kotak. Namun, box-decoration-break: clone yang baru didukung berarti setiap garis dimulai dan diakhiri dengan batas bulat.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

Baris teks yang di-wrap dengan latar belakang bersudut lengkung di tempat teks di-wrap.

Fragmentasi blok

Fragmentasi blok terjadi jika Anda membagi konten menjadi beberapa kolom dengan tata letak multi-kolom, atau saat Anda mencetak dan konten dibagi menjadi beberapa halaman.

Dalam contoh berikut, konten dibagi menjadi beberapa kolom, dan setiap paragraf memiliki batas. Dengan nilai awal slice, kotak dipotong di bagian bawah dan atas kolom.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

Beberapa kolom dengan kotak yang dipotong.

Dengan box-decoration-break: clone, saat kotak difragmentasi, setiap fragmen akan dibungkus dengan batas.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

Beberapa kolom dengan kotak yang dikloning.

Hal yang sama terjadi jika Anda memiliki batas pada kotak yang terfragmentasi saat mencetak halaman. Jika kotak dibagi menjadi dua halaman, batas pada kotak akan selesai di halaman pertama, lalu membuka kotak baru di halaman kedua.