Duvarcılık? CSS’de mi?!

Faydalı Alternatif Metin Yazma

CSS düzeni hakkında konuştum CSS Günü konferansı son zamanlarda ve daha sonra Soru-Cevap oturumunda CSS’deki duvar düzeni hakkında soru soruldu. Duvar düzeni, farkında değilseniz, farklı yükseklikteki öğelerin sütunlara yerleştirildiği yerdir, ancak satır ekseninde hizalanmak yerine, aşağıdaki öğeler bir duvar ustası gibi herhangi bir boşluğu kapatmak için etkin bir şekilde yukarı doğru hareket eder – bu nedenle isim. Pinterest’in ızgara tasarımı, duvarcılık sohbeti gündeme geldiğinde yaygın olarak belirtilen bir örnektir.

CSS’de duvarcılığın mevcut durumu

Şu anda CSS’de sütunları kullanarak bir tür sahte duvarcılık (veya yapacaksanız “sahte duvarcılık”) düzenini oluşturabiliyoruz.

.list {
columns: 20rem;
column-gap: 1rem;
}

Kalemi Gör
Duvar ızgarası (bayrak etkin olan Firefox)
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bu, bir düzen oluşturacak görünüyor duvarcılık gibi, ancak öğeler satıra göre değil sütuna göre sıralanmıştır. Bu düzeni bir sayfanın tamamı için kullanıyorsanız, kullanıcının öğelere göz atabilmesi için her sütunda aşağı doğru ilerlemeleri gerekir, ardından tekrar sayfanın en üstüne geri dönmeden önce sonuna kadar. Sıra önemli değilse, belki bu iyi bir görsel deneyim olabilir, ancak klavye veya ekran okuyucu aracılığıyla gezinen kullanıcıların yine de sütuna göre göz atması gerekir. Bir duvar düzenini düşündüğümüzde, normalde öğelerin yatay olarak (veya satır içi eksen boyunca) sıralanmasını bekleriz.

Ayrıca, duvar gibi görünen bir ızgara da yapabiliriz, ancak bu, ızgara öğelerinin manuel olarak yerleştirilmesini gerektirir ve her öğenin yüksekliği, içerik tarafından gerçekten belirlenmez. Aslında, yapabileceğimiz birkaç yol var, hemen hemen CSS’de duvarcılık yapın ve bazıları bazı durumlarda bize iyi hizmet edebilir – kontrol edin 2019’dan bu CSS Püf Noktaları makalesi bu birkaçını bir araya getiriyor. (Yine de CSS ile yeniden sipariş vermekten sakının. Erişilebilirlik nedenleriyle önerilmez.)

Ama bir bina doğru duvar düzeni şu anda Javascript gerektiriyor, örneğin duvarcılık tam da bu amaç için oluşturulmuş kütüphane.

Duvarcılık için sırada ne var?

CSS’deki duvarcılığın bir süre önce Rachel Andrew tarafından tartışıldığını hatırlardım, ancak son zamanlarda radarımdan düştüğünü kabul ediyorum. Sanırım bu kısmen bugünlerde o kadar çok duvar düzeni inşa etmem gerekmediği için. Bunların bir kısmı iş değiştirmekle ilgili olabilir, ancak duvarcılığın tasarımcılar arasında bir zamanlar olduğu kadar popüler olmadığından da şüpheleniyorum. Bana göre, Pinterest’in tüm öfkesi olduğu 2010’ların sonlarındaki bir tasarım trendi gibi geliyor.

Belki de daha yüksek performans ve erişilebilirlik bilincine bağlıdır. Düzen için bir JS kitaplığı kullanmak, performans ölçümlerinizi herhangi bir iyilik yapmayacak ve mümkün olduğunda tavsiye edeceğim bir şey. Ve elbette, duvarcılık harika görünüyor* (*veya 2017’de öyleydi), ancak bunun en kullanıcı dostu düzen olmadığını iddia ediyorum: öğeler hizalanmadığında içeriğin sırası o kadar net değil. (Bunu destekleyecek hiçbir kanıtım yok, bu sadece kişisel bir his.)

Peki ya CSS’deki duvarcılık?

Ah evet, bu makalenin tüm amacı. Duvarcılık tartışmasız daha az popüler olmasına rağmen, bunu JS olmadan yapmanın bir yolunun olması harika olurdu. peki, CSS Izgara Seviye 3 Spesifikasyonu duvar düzeni için bir öneri içerir. Aslında, Firefox’ta zaten bir bayrakla etkinleştirilebilir, böylece kendiniz deneyebilirsiniz.

Anahtar kelimeyi kullanarak çalışıyor masonry için grid-template-columns veya grid-template-rows Emlak. Bu örnek bize Pinterest tarzı ızgarayı çoğaltmak için satır eksenine uygulanan duvarlı 6 sütunlu bir ızgara verecektir:

.grid {
display: grid;
grid-template-rows: masonry;
grid-template-columns: repeat(6, 1fr);
}

Kalemi Gör
Duvar ızgarası (bayrak etkin olan Firefox)
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Tam bir genel bakış için Rachel, 2020’den harika bir yazı Smashing Magazine’de.

Duvarcılık Grid’e mi ait?

Bir süre önce, gerçekten Grid olmadığı için duvarcılığın Grid spesifikasyonuna ait olup olmadığı konusunda bazı tartışmalar vardı. veya flexbox, ancak her ikisinin de öğelerine sahiptir. Ya da belki de tamamen kendi meselesi? Grid spesifikasyonunun bir parçası olduğu konusunda bazı çekincelerim olsa da, mevcut uygulamanın mantıklı olduğunu düşünüyorum. Biraz gibi hissettiriyor alt ızgara bazı açılardan, bir öğeye etkin bir şekilde kullanmasını söylediğimiz farklı – ebeveyni tarafından değil, önceden belirlenmiş bir algoritma tarafından belirlenmiş olsa da, satır veya sütun ekseninde ızgara.

Bir başka, daha fazla ruh arayışı sorusu, çabanın garanti edilip edilmediğidir. Duvarcılık azalan bir tasarım trendiyse, web standartlarının bazen buzul hızı, tarayıcı desteğinin yaygınlaşmasına kadar kimsenin onu kullanmak istememesini sağlayabilir.

Şahsen duvarcılığın uygulandığını görmek isterdim, ancak muhtemelen daha yüksek bir öncelik olması gereken birçok özellik var. İzlemek Rachel’ın CSS Day’den konuşması tarayıcıların öncelik verdiği ve uygulamak için birlikte çalıştığı CSS özellikleriyle ilgili ayrıntılar için.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.