CSS duvarı için alternatif bir teklif

Rachel Andrew

Chrome ekibi, web'de karo türü düzenlerin uygulanmasını görmek istiyor. Ancak son WebKit yayınında önerildiği gibi CSS Grid spesifikasyonu kapsamında uygulanmasının hata olacağını düşünüyoruz. Ayrıca WebKit gönderisinde, hiç kimsenin önermediği bir taş döşeme sürümüne karşı çıkıldığını düşünüyoruz.

Bu nedenle bu yayında, Chrome'da CSS Grid Layout spesifikasyonunun bir parçası olarak karo döşeme özelliğini uygulama konusunda neden endişelerimiz olduğunu açıklamayı ve alternatif teklifin tam olarak neleri sağladığını netleştirmeyi amaçlıyoruz. Özet:

• Chrome ekibi, ızgara bloklarının engellemesini kaldırmak için çok istekli. Geliştiricilerin de bunu istediğini biliyoruz.
• Duvar düzenini ızgara spesifikasyonuna eklemek, duvar düzeninin ızgara olup olmadığını düşünmeniz dışındaki nedenlerden dolayı sorunludur.
• Duvar düzenini ızgara spesifikasyonu dışında tanımlamak, duvar düzeni için birden fazla kanal boyutunun kullanılmasını veya hizalama ya da boşluklar gibi özelliklerin ya da ızgara düzeninde kullanılan diğer özelliklerin kullanılmasını engellemez.

Duvar düzeni ızgaranın bir parçası olmalı mı?

Chrome ekibi, display: masonry (veya daha iyi bir ad belirlenirse başka bir anahtar kelime) kullanılarak tanımlanan ayrı bir düzen yöntemi olması gerektiğine inanıyor. Bu makalenin ilerleyen bölümlerinde, bu işlemin kodda nasıl görünebileceğine dair bazı örnekler görebilirsiniz.

Duvar düzeninin, ızgara düzeninin dışında daha iyi tanımlandığını düşünmemizin iki nedeni vardır: düzen performansı sorunlarının ortaya çıkma olasılığı ve hem duvar hem de ızgara düzeninin, bir düzen yönteminde anlamlı olan ancak diğerinde anlamlı olmayan özelliklere sahip olması.

Not: Bu yayında, her bir sorunla ilgili eksiksiz ve ayrıntılı bir açıklama yapmak yerine temel sorunlara değinilmiştir. Ayrıntılı bilgi için bağlantı verilen sorunları ziyaret edin.

Performans

Tarayıcı, boyutlandırma ve yerleşim konusunda ızgara ve karo düzenini farklı şekilde ele alır. Bir ızgara düzenlendiğinde tüm öğeler düzenin önüne yerleştirilir ve tarayıcı her kanalda tam olarak ne olduğunu bilir. Bu sayede, ızgaralarda çok kullanışlı olan karmaşık doğal boyutlandırmayı etkinleştirebilirsiniz. Duvar düzeninde öğeler, düzenlendikleri şekilde yerleştirilir ve tarayıcı her kanalda kaç öğe olduğunu bilmez. Bu durum, tüm doğal boyuttaki parçalarda veya tüm sabit boyuttaki parçalarda değil, sabit ve doğal boyuttaki parçaları karıştırdığınızda ortaya çıkar. Sorunu çözmek için tarayıcı, ölçümleri almak üzere her öğeyi mümkün olan her şekilde düzenleyen bir ön düzen adımı yapmalıdır. Büyük bir ızgara kullanıldığında bu, düzen performansıyla ilgili sorunlara yol açar.

Bu nedenle, grid-template-columns: 200px auto 200px olarak ayarlanmış bir kanal tanımı olan bir taş döşeme düzeniniz varsa (ızgaralarda çok yaygın bir uygulamadır) sorunlarla karşılaşmaya başlarsınız. Alt ızgaralar eklediğinizde bu sorunlar katlanarak artar.

Çoğu kullanıcının bu sorunla karşılaşmayacağına dair bir iddia olsa da kullanıcıların çok büyük ızgaralara sahip olduğunu biliyoruz. Alternatif bir yaklaşım olduğunda, kullanım şekliyle ilgili sınırlamaları olan bir ürün sunmak istemeyiz.

Her düzen yönteminde anlamlı olmayan öğelerle ne yapıyoruz?

Flexbox ve grid CSS'nin bir parçası olduğunda geliştiriciler genellikle bu özelliklerin tutarsız davrandığını düşünüyordu. Yaşadıkları tutarsızlık, blok düzenine dayalı olarak düzenin işleyiş şekliyle ilgili uzun süredir var olan varsayımlardan kaynaklanıyordu. Geliştiriciler zaman içinde biçimlendirme bağlamlarını anlamaya başladı. Tablo veya esnek biçimlendirme bağlamına geçtiğimizde bazı şeyler farklı şekilde çalışır. Örneğin, flexbox tek boyutlu olduğu için flexbox'ta tüm hizalama yöntemlerinin kullanılamadığını bilirsiniz.

Duvarı ızgara halinde gruplandırmak, biçimlendirme bağlamı ile biçimlendirme bağlamı başına Kutu Hizalaması spesifikasyonunda tanımlanan hizalama özellikleri gibi öğelerin kullanılabilirliği arasındaki bu net bağlantıyı bozar.

Daha önce belirtilen performans sorununu, karma içsel ve sabit parça tanımlarını ızgaralarda yasa dışı hale getirerek çözmeye karar verirsek ızgara düzenleri için çok yaygın bir kalıbın ızgaralarda işe yaramadığını unutmayın.

Çapraz kısıtlamalarınız olmadığı ancak ızgaralarda geçersiz kalması gerektiği için grid-template-columns: repeat(auto-fill, max-content) gibi taş döşeme düzenlerinde anlamlı olabilecek kalıplar da vardır. Aşağıda, farklı davranmasını beklediğimiz veya farklı geçerli değerlere sahip olan mülklerin listesi verilmiştir.

• grid-template-areas: Duvarda yalnızca duvar olmayan yönde ilk satırı belirtebilirsiniz.
• grid-template: Kısaltmanın tüm farklılıkları hesaba katması gerekir.
• Yasal değerlerdeki farklılıklar nedeniyle grid-template-columns ve grid-template-rows için boyutlandırma değerlerini izleyin.
• grid-auto-flow, taş duvar için geçerli değildir ve masonry-auto-flow, ızgara için geçerli değildir. Bunları birleştirme, kullandığınız düzen yöntemi nedeniyle geçersiz öğelerle ilgili sorunlara neden olur.
• Izgara dört yerleşim özelliğine (grid-column-start vb.) sahipken taş duvar yalnızca iki özelliğe sahiptir.
• Grid, justify-* ve align-* özelliklerinin altısını da kullanabilir ancak Masonry yalnızca flexbox gibi bir alt kümeyi kullanır.

Ayrıca, geliştiricilerin taş döşemeli veya taş döşemesiz ızgaralarda geçerli olmayan bir değer kullanması nedeniyle oluşan tüm yeni hata durumlarında ne olacağını belirtmeniz gerekecek. Örneğin, grid-template-columns: masonry veya grid-template-rows: masonry kullanmak geçerlidir ancak ikisini birden kullanmak geçerli değildir. İkisini de aynı anda kullanırsanız ne olur? Tüm tarayıcıların aynı şeyi yapması için bu ayrıntıların belirtilmesi gerekir.

Tüm bunlar, hem şimdi hem de gelecekte teknik özellikler açısından karmaşık hale geliyor. Her şeyin, taş duvar düzenini hesaba katması ve taş duvar düzeninde çalışıp çalışmadığının kontrol edilmesi gerekir. Geliştiriciler açısından da kafa karıştırıcıdır. display: grid kullanmasına rağmen bazı şeylerin, tuğla örme kullanıldığı için çalışmadığını neden aklınızda tutmanız gerekir?

Alternatif bir teklif

Daha önce de belirtildiği gibi, Chrome ekibi karo örgüsünü ızgara spesifikasyonunun dışında tanımlamak istiyor. Bu, aynı sütun boyutlarına sahip çok basit bir düzen yöntemiyle sınırlı olacağı anlamına gelmez. WebKit yayınındaki tüm demolar kullanılabilir olmaya devam eder.

Not: Örneklerde display: masonry ve masonry-* mülkleri kullanılmaktadır. masonry'in kullanılacak en iyi ad olup olmadığıyla ilgili ayrı bir sorun vardır.

Klasik taş kaplama düzeni

Çoğu insan, taş döşeme deyince eşit boyutta birden fazla sütun içeren bir düzeni düşünür. Bu, aşağıdaki CSS kullanılarak tanımlanır. Bu CSS, eşdeğer gruplandırılmış ızgara sürümünden daha az satır içeren bir koda ihtiyaç duyar.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Farklı sütun genişlikleri için kılavuz yol boyutlandırması kullanma

Daha önce bahsedilen karma doğal ve sabit parça boyutlandırması sorunu dışında, ızgaradan sevdiğiniz tüm parça boyutlandırmalarını kullanabilirsiniz. Örneğin, WebKit blog yayınındaki örnek, dar ve geniş sütunların tekrarlandığı bir kalıptır.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

Duvar için ek parça boyutlandırması

Izgara iki boyutlu bir düzen yöntemi olduğundan ızgaralarda izin verilmeyen ek parça boyutlandırma seçenekleri vardır. Bu özellikler, taş duvarlarda yararlı olabilir ancak daha sonra ızgaralarda çalışmazsa kafa karıştırıcı olur.

max-content boyutunda parçaları otomatik olarak doldurma.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, max-content);
  gap: 1rem;
}

auto boyutunda parçaları otomatik olarak doldurur. Bu işlem, en büyüğüne sığacak şekilde otomatik olarak boyutlandırılmış, aynı boyutta parçalar oluşturur.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

İçeriğin sütunlara yayılmasına izin verme ve öğeleri taş döşeme düzenine yerleştirme

Ayrı bir taş döşeme spesifikasyonunda sütunları kapsayan içerik olmamasına gerek yoktur. Bu işlemde, masonry-track özelliği kullanılabilir. Bu özellik, masonry-track-start ve masonry-track-end için kısa bir ifadedir. Çünkü taş döşeme düzeninde öğeleri kapsayacak yalnızca bir boyutunuz vardır.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
}

.span-2 {
  masonry-track: span 2; /* spans two columns */
}

.placed {
  masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}

Duvar parçalarını kullanan alt duvar veya alt ızgara

Bu, ayrı bir taş döşeme spesifikasyonuyla desteklenebilir. Yine de, karma içsel ve sabit boyutlu parçalara izin verilmez. Bu durumun tam olarak nasıl görüneceğini tanımlamanız gerekir. Bu yöntemin işe yaramaması için bir neden görmüyoruz.

Sonuç

Birbiriyle uyumlu şekilde gönderilebilecek bir spesifikasyona ulaşmayı çok isteriz. Ancak bunu hem şimdi hem de gelecekte iyi çalışacak ve geliştiricilerin güvenebileceği bir şekilde yapmak istiyoruz. Belirtilen performans sorunlarını ele almanın tek yolu, ikinci sorunu (örgü düzeninde ızgara bölümlerinin yasa dışı olması) daha da kötüleştirmek olacaktır. Bu, özellikle farklı olan öğeleri net bir şekilde ayırırken istediğiniz tüm ızgara özelliklerine sahip olabildiğiniz için iyi bir çözüm değildir.

Geri bildiriminiz varsa 9041 numaralı sorun ile ilgili tartışmaya katılın.

Bu yayını inceleyen ve bu yayına bilgi sağlayan Bramus, Tab Atkins-Bittner, Una Kravets, Ian Kilpatrick ve Chris Harrelson'a teşekkür ederiz.