Yayın tarihi: 11 Ekim 2024
Chrome 130'da clone değerine sahip box-decoration-break CSS özelliği, satır içi ve blok parçalama desteğiyle birlikte kullanılabilir. Bu gönderide, bu özelliğin neden ve nasıl kullanılacağı açıklanmaktadır.
Satır içi parçalama
Satır içi parçalama, satır içi bir öğe (ör. bir metin dizesi) birden fazla satıra bölündüğünde gerçekleşir. Satır içi öğelerin bir kutusu vardır. Öğeye arka plan veya kenarlık eklemeye çalışmadığınız sürece genellikle bu kutu hakkında düşünmeniz gerekmez. Aşağıdaki örnekte, bir span'e border-radius içeren bir arka plan ekleniyor. Kenarlık yalnızca dizenin başında ve sonunda eğrilir.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
box-decoration-break öğesinin başlangıç değeri slice'dir. Bu değer, kutularda dilimlenmiş gibi bir efekt oluşturur. Ancak yeni desteklenen box-decoration-break: clone, her satırın yuvarlak kenarlıkla başlayıp yuvarlak kenarlıkla biteceğ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ı
İçeriği çok sütunlu düzenle sütunlara ayırdığınızda veya yazdırdığınızda ve içerik sayfalara bölündüğünde blok parçalanması oluşur.
Aşağıdaki örnekte içerik sütunlara ayrılmış ve her paragrafın kenarlığı var. slice başlangıç değeriyle kutular, sütunların alt ve üst kısımlarından kesilir.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
}
box-decoration-break: clone ile bir kutu parçalandığında her parça kenarlıkla sarmalanır.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
box-decoration-break: clone;
}
Sayfa yazdırılırken parçalanan kutularda kenarlıklar varsa da aynı durum yaşanır. Bir kutu iki sayfaya bölünürse kutudaki kenarlık ilk sayfada tamamlanır ve ikinci sayfada yeni bir kutu açılır.