Chrome 130'daki "box-decoration-break" özelliği

Rachel Andrew

Yayınlanma tarihi: 11 Ekim 2024

Chrome 130'ta, satır içi ve blok parçalara ayırma desteğiyle birlikte clone değerine sahip box-decoration-break CSS mülkü kullanılabilir. Bu gönderide, bu özelliği neden ve nasıl kullanacağınız açıklanmaktadır.

Satır içi parça

Satır içi parçalanma, satır içi bir öğe (ör. metin dizisi) birden fazla satıra bölündüğünde ortaya çıkar. Satır içi öğelerde bir kutu vardır E-posta gibi bir ek bilgi eklemeye çalışmadığınız sürece, veya kenarlık eklemektir. Aşağıdaki örnekte, bir span öğesine border-radius içeren bir arka plan eklenmiştir. Kenarlık yalnızca dizenin başı ve sonu.

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

box-decoration-break değerinin başlangıç değeri slice olduğundan kutularda bu dilimlenmiş efekt elde edilir. Yeni desteklenen box-decoration-break: clone her çizginin yuvarlak bir kenarlıkla başlayıp sona erdiği anlamına gelir.

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

Blok parçalanması

Blok parçalama, içeriği sadece bir sonraki çok sütunlu düzende veya yazdırıp içerik sayfalara ayrıldığında görebilirsiniz.

Aşağıdaki örnekte içerik sütunlara ayrılmıştır ve her paragraf kenarlıklı. slice başlangıç değeriyle kutular sütunların alt ve üst kısmında dilimlenir.

.columns {
  column-count: 5;
}

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

box-decoration-break: clone ile, bir kutu parçalandığında her bir parça kenarlıkla sarın.

.columns {
  column-count: 5;
}

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

Sayfa yazdırıldığında kutuların kenarlıkları parçalara ayrılıyorsa da aynı durum yaşanır. Bir kutu iki sayfaya bölünmüşse kutunun üzerindeki kenarlık ilk sayfada tamamlanır, ardından ikinci sayfada yeni bir kutu açılır.