CSS Parçalama ile Kutuları Kırma

Bu yazıda size CSS Fragmentation spesifikasyonunu tanıtacağım. Bunu hiç duymamış olabilirsiniz, ancak, daha önce bir baskı stil sayfası oluşturduysanız ve içeriğin sayfalar arasında nerede kesildiğini veya çok sütunlu düzeni kontrol etmek istediyseniz ve sütunlar arasında bir rakam kırılmasını durdurmak istiyorsanız, bununla karşılaştınız.

İnsanların multicol ile bildirdiği sorunların genellikle tarayıcının parçalanma desteğiyle ilgili sorunlar olduğunu görüyorum. Bu spesifikasyonda yer alan özelliklerin kısa bir özetinden sonra, tarayıcı desteğinin mevcut durumunu ve multicol ve baskı projelerinizde olduğu gibi çalışmasını sağlamak için yapabileceğiniz bazı şeyleri açıklayacağım.

Parçalanma Nedir?

CSS'deki parçalama, içeriğin farklı kutulara ayrılma sürecini tanımlar. Şu anda, web'de parçalanmayla karşılaşabileceğimiz iki yerimiz var: bir belge yazdırdığımızda ve çok sütunlu düzen kullandığımızda. Bu iki şey özünde aynıdır. Bir web sayfasını yazdırdığınızda (veya PDF'ye kaydettiğinizde) içerik, içeriğinizi yazdırmak için gerektiği kadar sayfaya bölünür.

Multicol kullandığınızda, içerik sütunlara bölünür. Her sütun kutusu, disk belleği bağlamında bir sayfa gibidir. Bir sütun kümesini bir sayfa kümesi gibi düşünürseniz, multicol ve bunun içinde parçalanmanın nasıl çalıştığı hakkında düşünmenin yararlı bir yolu olabilir.

CSS Parçalanma Belirtimi'ne bir göz atarsanız, bahsedilen üçüncü bir parçalanmış bağlam göreceksiniz - bu bağlam Bölgelerdir. Bölgelerin mevcut kullanılabilir uygulamaları olmadığından, bu makalede bununla ilgilenmeyeceğiz, bunun yerine işinizde karşılaşabileceğiniz iki bağlama bakacağız.

Blok ve Satır İçi Kutular

Bu yazıda blok kutulardan çokça bahsedeceğim. Sayfanızın her öğesinin bir kutusu vardır. Bu kutulardan bazıları bloklar halinde düzenlenmiştir: paragraflar, liste öğeleri, başlıklar. Bunların bir blok biçimlendirme bağlamına katıldığı söyleniyor. Diğerleri, bir paragraftaki sözcükler, yayılma alanları ve bağlantı öğeleri gibi satır içidir. Bunlar bir satır içi biçimlendirme bağlamına katılır. Basitçe söylemek gerekirse, bir blok kutudan bahsettiğimde, paragraflar gibi şeylerin etrafındaki kutulardan bahsediyorum. Parçalanma ile uğraşırken, ne tür bir kutu ile uğraştığınızı bilmek önemlidir.

Blok ve satır içi yerleşim hakkında daha fazla bilgi için, “Normal Akışta Blok ve Satır İçi Düzen” MDN makalesine bakın. Muhtemelen hepimizin bir düzeyde anladığı, ancak daha önce terminolojiyle karşılaşmamış olabileceğimiz şeylerden biridir.

Molaları Kontrol Etme

İster bir baskı stil sayfası oluşturuyor olun, ister PDF oluşturmak için belirli bir yazdırma kullanıcı aracısı kullanın veya multicol kullanarak, bazen buna benzer sorunlarla karşılaşırsınız.

Aşağıdaki multicol örneğinde, üç sütun olarak görüntülediğim bazı içerikler var. İçeriğin ortasında, iki sütuna bölünen kutulu bir alan var. Bu davranışı istemiyorum - kutunun bir arada kalmasını istiyorum.

Bunu düzeltmek için, kutuya " break-inside: avoid " özelliğini ekliyorum. break-inside özelliği denetimleri, parçalanmış bir bağlamda olduklarında öğelerin içindekileri bozar. Bu özelliği destekleyen bir tarayıcıda, kutu artık sütunlardan birinde kalacaktır. Sütunlar daha az dengeli görünecek, ancak bu genellikle kutu çıkışının sütunlar arasında bölünmesinden daha iyi bir şeydir.

break-inside özelliği, parçalanma belirtiminde ayrıntılı olarak açıklanan özelliklerden biridir. Gayrimenkullerin tam listesi aşağıdaki gibidir:

• break-before
• break-after
• break-inside
• orphans
• widows
• box-decoration-break

Tarayıcılarda gerçekte ne olduğuna geçmeden önce bunların nasıl çalışması gerektiğine bir göz atalım.

break-before ve break-after Özellikleri

Blok düzeyindeki kutular arasındaki kesintileri kontrol eden iki özellik vardır: break-before ve break-after . Eğer h2 ve ardından iki paragrafınız varsa <p> üç blok kutunuz var ve bu özellikleri başlık ile ilk paragraf arasındaki veya iki paragraf arasındaki boşlukları kontrol etmek için kullanırsınız.

Özellikler, önce veya sonra kırmak istediğiniz öğeyi hedefleyen seçicilerde kullanılır.

Örneğin, her 2. düzey başlık olduğunda yazdırma stil sayfanızın yeni bir sayfaya bölünmesini isteyebilirsiniz. Bu durumda, h2 öğesinde break-before: page kullanırsınız. Bu, parçalanmayı kontrol eder ve h2 öğesinin kutusundan önce her zaman bir kırılma olmasını sağlar.

 h2 { break-before: page; }

Diğer bir yaygın gereksinim, başlıkların bir sayfa veya sütundaki son şey olarak bitmesini önlemektir. Bu durumda, break-after değerini avoid değeriyle kullanabilirsiniz. Bu, öğenin kutusundan hemen sonra bir kırılmayı önlemelidir:

 h1, h2, h3, h4 { break-after: avoid; }

Parçalar İçindeki Parçalar

Parçalanmış, iç içe geçmiş bir öğeniz olabilir. Örneğin, disk belleği olan bir şeyin içinde multicol olması. Bu durumda, sütunlar için değil, sayfalar için sonları kontrol etmek isteyebilirsiniz ya da tam tersi. Bu nedenle, page gibi, öğeden önce veya sonra her zaman, ancak yalnızca parça bir sayfa olduğunda bir kesmeye zorlayan değerlerimiz vardır. Veya yalnızca disk belleğine alınmış bağlamlar için öğeden önce veya sonra bir kesintiden kaçınan avoid-page kaçın.

Aynısı sütunlar için de geçerlidir. column değerini kullanırsanız, bu her zaman o öğeden önce veya sonra bir kesmeye zorlar, ancak yalnızca çoklu sütun bağlamları için. avoid-column değeri, çok sütunlu bağlamlarda bir kesintiyi önler.

4. Düzey belirtiminde her şeyi (sayfa veya sütun) atlamak istediğinizi belirten bir always değeri vardır. Ancak, spesifikasyona yeni eklenen bir özellik olarak şu anda bizim için kullanışlı değil.

Sayfalı Medya İçin Ek Değerler

Bir kitap veya dergi oluşturuyorsanız, sol ve sağ sayfalarınız vardır. Bir formanın sol veya sağ sayfasına bir şeyi zorlamak için kırılmayı kontrol etmek isteyebilirsiniz. Bu nedenle, aşağıdakini kullanmak, doğru sayfa olarak biçimlendirildiğinden emin olmak için h2 önce bir veya iki sayfa sonu ekler.

 h2 { break-before: right; }

Dikey veya sağdan sola dilde yazılmış kitaplar İngilizce yazılmış kitaplardan farklı bir sayfa ilerleyişine sahip olduğundan, sayfa ilerlemesiyle ilgili recto ve verso değerleri de vardır. Öncelikle bu sefer tarayıcıdan nelerin mümkün olduğuyla ilgilendiğim için bu makalede bu değerleri daha fazla ele almayacağım.

break-inside

break-inside özelliğinin bir örneğini zaten gördük. Bu özellik, örneğin bir paragrafın, başlığın veya bir div'in içindeki blok kutularının içindekileri kırmayı kontrol eder.

Kırmak istemeyeceğiniz şeyler, yukarıda açıklandığı gibi bir kutu çıkışı içerebilir: başlığın resimden ayrılmasını istemediğiniz şekiller, tablolar, listeler vb. break-inside: avoid . Yalnızca sütunlar arasındaki kesintileri önlemek istiyorsanız, break-inside: avoid-column ve sayfalar arasında break-inside: avoid-page kullanın.

orphans ve widows özellikleri

orphans ve widows özellikleri, bir aradan önce veya sonra (bir sütundan veya yeni bir sayfadan kaynaklanan) kaç satır bırakılması gerektiğiyle ilgilenir. Örneğin, bir sütunun sonunda tek bir satır kalmasını önlemek istersem, tipografide olduğu gibi orphans özelliğini kullanırdım, orphans , sayfanın altında tek başına görünen bir paragrafın ilk satırıdır. paragrafın geri kalanı başka bir sayfaya bölünmüştür. Özellik, parçalanan aynı öğeye eklenmelidir (bizim durumumuzda multicol kapsayıcı).

 .container { column-count: 3; orphans: 2; }

Bir aradan sonra bir sütunun veya sayfanın üstünde kaç satır olması gerektiğini kontrol etmek için widows kullanın:

 .container { column-count: 3; widows: 2; }

Bu özellikler, paragraf içindeki sözcük satırları gibi satır içi kutular arasındaki kesmelerle ilgilenir. Bu nedenle, bir sütunun veya sayfanın altında bir başlığın veya başka bir blok öğesinin tek başına olduğu durumda yardımcı olmazlar, bunun için yukarıda tartışılan kesme özelliklerine ihtiyacınız vardır.

Kutu Dekorasyonu

İlgilenebilecek son bir özellik, box-decoration-break özelliğidir. Bu, iki sütun kutusu veya sayfa arasında kenarlığı kesilmiş bir kutunuz olduğu durumu kontrol eder. Kenarlığın esasen yarıya bölünmesini istiyor musunuz? Yoksa kutunun iki yarısının bir bordüre tamamen sarılmasını mı istiyorsunuz?

İlk senaryo varsayılandır ve box-decoration-break özelliğini kutu üzerinde slice şekilde ayarlamışsınız gibidir.

 .box { box-decoration-break: slice; } 

İkinci davranışı elde etmek için box-decoration-break klon olarak ayarlayın.

 .box { box-decoration-break: clone; } 

Parçalanma İçin Tarayıcı Desteği

Şimdi, tüm bunları size göstermek için yukarıda bir sürü CodePen örneğimin olmamasının nedenine ve bu makaleyi yazmamın ana sebebine geliyoruz. Bu mülkler için tarayıcı desteği çok iyi değil.

Paged Media'da Prince gibi belirli bir kullanıcı aracısıyla çalışıyorsanız, parçalanma için gerçekten iyi bir desteğin keyfini çıkarabilirsiniz ve muhtemelen bu özellikleri çok faydalı bulacaksınız. Çoklu sütunda, yazdırma stil sayfaları oluşturarak veya PDF oluşturmak için Headless Chrome gibi bir şey kullanarak bir web tarayıcısıyla çalışıyorsanız, destek biraz düzensizdir. En iyi desteğe sahip tarayıcının Edge olduğunu göreceksiniz - yine de Chromium'a geçene kadar!

Kullanabilir miyim, parçalanma özelliklerinin multicol ile karıştırılması ve ardından eski özellikler için bazı ayrı verilere sahip olması nedeniyle desteği açıklamada fazla yardımcı olmuyor. Bu nedenle, MDN için özellikleri ve desteklerini belgelemek için yaptığım çalışmanın bir parçası olarak, gerçek tarayıcı desteğini test etmeye başladım. Aşağıdakiler, bu teste dayalı bazı tavsiyelerdir.

Eski ve Satıcı Önekli Mülkler

Tarih dersi olmadan fazla ileri gidemem. Parçalanma için gerçekten desteğe ihtiyacınız olduğunu fark ederseniz, orijinal olarak CSS2'nin bir parçası olan eski özelliklerde (veya var olan bazı ön ekli özelliklerde) biraz rahatlama bulabilirsiniz.

CSS2'de sayfa kırılmasını kontrol edecek özellikler vardı. Multicol o noktada mevcut değildi, bu yüzden tek parçalanmış bağlam disk belleği olandı. Bu, üç belirli sayfa kırma özelliğinin tanıtıldığı anlamına geliyordu:

• page-break-before
• page-break-after
• page-break-inside

Bunlar, page- öneki olmadan daha genel özelliklere benzer şekilde çalışır, kutulardan önce, sonra ve kutunun içindeki sonları kontrol eder. Yazdırma stil sayfaları için, yeni break- özelliklerini desteklemeyen bazı eski tarayıcıların bu sayfa önek özelliklerini desteklediğini göreceksiniz. Özellikler, yeni mülkler için takma adlar olarak kabul ediliyor.

Çoklu sütun belirtiminin 2005 Çalışma Taslağı'nda, çok sütunlu için kesme özelliklerinin ayrıntıları vardır - ön eki sütun- ile olan özellikler (yani, column- column-break-before , column-break-after ve column-break-inside ). 2009'a gelindiğinde, bunlar ortadan kalktı ve ön eksiz kesme özellikleri için multicol belirtiminde bir taslak vardı ve sonunda CSS Fragmentation belirtimine girdi.

Ancak, bazı satıcı öneki sütuna özgü özellikler, bu özelliklere dayalı olarak uygulandı. Bunlar:

• -webkit-column-break-before
• -webkit-column-break-after
• -webkit-column-break-inside

Multicol'de Parçalanma Desteği

Aşağıdakiler, bu özellikleri çoklu sütun bağlamlarında test etmeye dayanmaktadır. Neyin mümkün olduğunu açıklamaya çalıştım, ancak elinizde bulunan tarayıcılarda CodePens'e bir göz atın.

Multicol ve break-inside

Multicol'deki destek, break-inside özelliği için en iyisidir. Chrome, Firefox, Edge ve Safari'nin güncel sürümlerinin tümü break-inside: avoid . Bu nedenle, multicol kullanırken kutuların sütunlar arasında kırılmasını önleyebileceğinizi görmelisiniz.

Firefox dışında birçok tarayıcı -webkit-column-break-inside özelliğini destekler; bu, avoid değeriyle kullanılabilir ve break-inside desteği olmayan sütunlar arasında kutuların kırılmasını önleyebilir.

Firefox, page-break-inside: avoid . Bu nedenle, bu özelliğin kullanılması, Firefox 65'ten önceki Firefox tarayıcılarında kutuların içindeki kırılmaları önleyecektir.

Bu, multicol'deki kutular arasındaki kesintileri önlemek istiyorsanız, aşağıdaki CSS'yi kullanmak, mümkün olduğu kadar geriye giderek, mümkün olduğunca çok tarayıcıyı kapsayacaktır.

 .box { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }

column değerine gelince, sayfalar yerine yalnızca sütunlar arasındaki kesintileri önlemek istediğinizi açıkça belirtmek, Firefox dışındaki tüm tarayıcılarda çalışır.

Aşağıdaki CodePen, bu testlerden bazılarını multicol'de toplar, böylece bunları kendiniz deneyebilirsiniz.

Multicol ve break-before

Bir öğeden önceki kesintileri önlemek için, break-before: avoid veya break-before: avoid-column kullanabilmelisiniz. Kaçınma özelliğinin tarayıcı desteği yoktur.

Kenar, her zaman öğenin kutusundan önce bir kesmeye zorlamak için break-before: column destekler.

Safari, Chrome ve Edge ayrıca -webkit-column-break-before: always destekler, bu da öğe kutusundan önce bir mola vermeye zorlar. Bu nedenle, bir öğenin kutusundan önce bir ara vermeye zorlamak istiyorsanız, şunları kullanmalısınız:

 .box { -webkit-column-break-before: always; break-before: column; }

Kutudan önce bir molayı önlemek şu anda imkansız bir iştir. Aşağıda bu özelliklerin bazı örnekleriyle oynayabilirsiniz:

Multicol ve break-after

Bir öğeden sonra kopmaları önlemek için, bir sütunun altındaki son şey olmasını önlemek için break-after: avoid ve break-after: avoid-column kullanabilmelisiniz. Bunları destekleyen tek tarayıcı Edge'dir.

Edge ayrıca break-after: column kullanarak bir öğeden sonra zorla kesmeyi destekler, Chrome break-after: column ve ayrıca -webkit-column-break-after: always destekler.

Firefox, bir kutudan sonra ara vermeye zorlamak veya buna izin vermek için break-after verme özelliğini veya ön ekli özelliklerin hiçbirini desteklemez.

Bu nedenle, Edge dışında, bir kutudan sonra gerçekten kırılmalardan kaçınamazsınız. Onları zorlamak istiyorsanız, aşağıdaki CSS'yi kullanarak bazı tarayıcılarda sonuç alırsınız:

 .box { -webkit-break-after: always; break-after: column; } 

Tarayıcıdan Yazdırırken Destek

İster doğrudan masaüstü tarayıcınızdan yazdırın, ister başsız Chrome veya tarayıcı teknolojisine bağlı başka bir çözüm kullanarak PDF dosyaları oluşturun, hiçbir fark yaratmaz. Parçalanma özellikleri için tarayıcı desteğine güveniyorsunuz.

Bir yazdırma stil sayfası oluşturursanız, kesme özellikleri için multicol; ancak, daha eski tarayıcıları desteklemek için, page- önekli özelliklerini kullanmak için özellikleri ikiye katlamalısınız.

Stil Sayfalarını Yazdırın ve break-inside Girin

Modern tarayıcılarda, break-inside özelliği kutuların içindeki kesintileri önlemek için kullanılabilir, eski tarayıcılara destek eklemek için page-break-inside özelliği ekleyin.

 .box { page-break-inside: avoid; break-inside: avoid; }

Stil Sayfalarını Yazdır ve break-before

Bir kutudan önceki sonları zorlamak için break-before:page ile birlikte page-break-before: always kullanın.

 .box { page-break-before: always; break-before: page; }

Bir kutudan önceki kesintileri önlemek için, önce break-before: avoid-page ile birlikte page-break-before: avoid kullanın.

 .box { page-break-before: avoid; break-before: avoid-page; }

page avoid-page değerleri için, eşdeğer multicol değerleri için gördüğümüzden daha iyi destek vardır. Modern tarayıcıların çoğunluğunun desteği vardır.

Stil Sayfalarını Yazdır ve break-before

Bir kutudan sonra kesmeleri zorlamak için break-after: page ile birlikte page-break-after: always kullanın.

 .box { page-break-after: always; break-after: page; }

Bir kutudan sonra kesintileri önlemek için, sayfa sonu break-after: avoid-page ile birlikte page-break-after: avoid .

 .box { page-break-after: avoid; break-after: avoid-page; }

Dullar ve Yetimler

widows ve orphans mülkler, iyi bir çapraz tarayıcı desteğinden yararlanır - Firefox uygulaması olmayan tek tarayıcı. Bunları bir multicol düzeni veya baskı stil sayfası oluştururken kullanmanızı öneririm. Herhangi bir nedenle işe yaramazlarsa, ideal olmayan ama aynı zamanda bir felaket olmayan dullar ve yetimler alacaksınız. Çalışırlarsa, tipografiniz bunun için daha iyi görünecektir.

kutu-dekorasyon-break

box-decoration-break son özelliği, Firefox'ta multicol ve print desteğine sahiptir. Safari, Chrome ve diğer Chromium tabanlı tarayıcılar -webkit-box-decoration-break destekler, ancak yalnızca satır içi öğelerde. Böylece örneğin bir cümlenin yuvarlak satırlarındaki sınırları kopyalayabilirsiniz; Baktığımız bağlamda destekleri yok.

Aşağıdaki CodePen'de, -webkit-box-decoration-break: clone testinin doğru döndüğünü görebilirsiniz; ancak, özelliğin çoklu sütun bağlamında kutunun kenarlığı üzerinde hiçbir etkisi yoktur.

Parçalanmayı Kullanma

Gördüğünüz gibi, tarayıcılardaki mevcut parçalanma durumu biraz parçalanmış! Bununla birlikte, elde edebileceğiniz makul bir miktar var ve bunun başarısız olduğu yerde sonuç yetersiz olma eğilimindedir, ancak bir felaket değildir. Bu, denemeye değer olduğu anlamına gelir.

Bu özelliklere çok fazla yüklenmenin, umduğunuzdan farklı bir sonuçla sonuçlanabileceğini belirtmekte fayda var. Yazdırmak ve her paragraftan sonra sütun sonlarını zorlamak yerine web üzerinde çalışıyorsanız, sütunlar için boşluktan daha fazla paragrafla sonuçlanırsanız, multicol satır içi yönde taşar. Ek paragraflarınızı yerleştirmek için sütunlar tükenecek. Bu nedenle, desteğin olduğu yerlerde bile dikkatli bir şekilde test etmeniz ve birçok durumda daha azının daha fazla olduğunu hatırlamanız gerekir.

Daha fazla kaynak

Özellikler hakkında daha fazla bilgi edinmek için MDN'ye gidin, yakın zamanda oradaki sayfaları güncelledim ve aynı zamanda tarayıcı uyumluluk verilerini güncel tutmaya çalışıyorum. CSS Fragmentation ana sayfası, daha fazla örnek, tarayıcı uyumluluk verileri ve bu özelliklerin kullanımıyla ilgili diğer bilgileri içeren bireysel özellik sayfalarına bağlantılar.