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çalara ayırma
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 öğelerin bir kutusu vardır. Öğeye arka plan veya kenar çizgisi eklemeye çalışmadığınız sürece bu kutuyu genellikle düşünmeniz gerekmez. Aşağıdaki örnekte, bir span öğesine border-radius içeren bir arka plan eklenmiştir. Kenarlık yalnızca dizenin başında ve sonunda kıvrılır.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
box-decoration-break öğesinin ilk değeri slice, bu değer kutulara bölünmüş bu etkiyi sağlar. Ancak yeni desteklenen box-decoration-break: clone, her satırın yuvarlatılmış kenarlıkla başladığı ve bittiğ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 çok sütunlu düzene sahip sütunlara böldüğünüzde veya yazdırıp içerik sayfalara bölündüğünüzde meydana gelir.
Aşağıdaki örnekte içerik sütunlara ayrılmıştır ve her paragrafta bir kenarlık vardır. 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çalara ayrıldığında her parça kenarlıkla sarılır.
.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 kenarlığı ilk sayfada tamamlanır ve ikinci sayfada yeni bir kutu açılır.