CSS Izgarası—Web Tasarımının Geleceği Zaten Burada

Geçen yıl web tasarım merkezli bir konferans olan SmashingConf Barcelona'ya katılma şansım oldu. Konferansla ilgili bir önceki yazımda bahsettiğim gibi, hem sahnelemenin hem de konuşmaların olağanüstü kalitesi beni şaşırttı. En çok sevdiğim konuşma, web geliştirmede yakında göreceğimiz (veya “şu anda görüyoruz” demeliyim) bazı harika şeyler sunan Jen Simons'du.

Jen bize görüntü kırpma, ilk harfleri bırakma, kapak sayfaları, çok sütunlu düzenler gibi özellikleri tanıttı… Bu (ve diğer) demoların nasıl çalıştığını daha iyi bilmek istiyorsanız, kaynak kodlarına özellikle dikkat ederek 2016 listesine göz atın.

En çok sevdiğim özelliği CSS Grid oldu. O zaman, CSS Grid hala geliştirme aşamasındaydı ve varsayılan olarak hiçbir tarayıcı onu desteklemiyordu. Ancak Jen izleyicilere "önümüzdeki yaza [bu yaz] kadar tüm büyük tarayıcıların CSS Izgaralarını zaten destekleyeceğini, bu yüzden nasıl kullanılacağını öğrenseniz iyi olacağını" söyledi ve tamamen haklıydı. Bu yüzden, bu harika özellik ve onu kendi geliştirmelerinizde nasıl kullanabileceğiniz hakkında konuşmamızın zamanı geldi diye düşünüyorum.

“Izgara” olmadan “CSS Izgarası” olmaz

CSS Izgarasına dalmadan önce, genel olarak ızgara tasarımları hakkında konuşmak için muhtemelen birkaç dakika harcamalıyız. Esasen bir ızgara, düzeni oluşturan bir dizi görünmez çizgi (aslında satırlar ve sütunlar) kullanarak web sitenizin temel yapısını tanımlar . Bir resim bin kelimeye bedel olduğundan, burada tasvir edilen bu soyut tanımı görüyorsunuz:

Gördüğünüz gibi, web'de iki net satır bölümü vardır: karşılama ve haberler . Bu iki blok onları farklı şekilde kullanmasına rağmen, her iki bölüm de 12 sütunluk bir yapıya sahiptir. Böylece, ilk blok ikiye bölünmüştür—sol tarafta öne çıkan bir haber var; sağ tarafta dört küçük haber var. İkinci blok ise içeriği eşit olarak dağıtılmış üç sütuna böler.

Twitter'ın Bootstrap veya Foundation gibi çerçevelere aşina iseniz, bu 12 sütunlu yapıyı zaten biliyorsunuzdur. Neden 12 sütun (örneğin 10 yerine) kullandıklarını merak ettiyseniz, cevap sunduğu esneklikte yatıyor. 12, 10'dan çok daha fazla kombinasyon sunar, çünkü 12'nin 10'dan daha fazla çarpanı vardır, yani daha fazla sayıya bölünebilir.

Ve ızgara tasarımları hakkında temel olarak bilmeniz gereken tek şey bu – bir dizi görünmez sütun ve satır, içeriği konumlandıracağınız alanları mı tanımlar? Konuyu derinleştirmek istiyorsanız, Ed Wassermann'ın gridlere girişine bir göz atın. Ve lütfen, önemli bir şeyi kaçırdığımı düşünüyorsanız, yorumlar bölümünde kendi deneyiminizi bizimle paylaşmaktan çekinmeyin – eminim okuyucularımız bunu takdir edecektir?

Izgara Tasarımlarını Uygulamak İçin Nasıl Kullandık?

Izgaralar yeni değil – uzun süredir bizimle birlikteler. Web tasarımı hakkında konuşursak, her şey tablo düzenleriyle başladı, ardından az önce bahsettiğimiz güzel, duyarlı çerçeveler (Bootstrap vb.) Her iki çözüm de, temeldeki ızgara düzenini açıkça tanımlamak için çok fazla HTML işaretlemesi gerektiriyordu. Örneğin, Bootstrap kullanarak BBC'nin web sitesini yeniden oluşturmaya çalışalım. HTML kaynak kodu muhtemelen şuna benzer:

hangi sonuçlanır:

Gördüğünüz gibi, ortaya çıkan HTML kodu açıkça bir Izgara düzeni içeriyor. Örneğin, ilk bloğa odaklanırsak, üç sütuna bölünmüş bir div “satırımız” olduğunu göreceksiniz. Her sütunun genişliği class özniteliğinde belirtilir (önceden tanımlanmış bazı Bootstrap sınıfları kullanılarak), ancak yine de belirli CSS kurallarını kullanarak yükseklikleri değiştirmemiz gerekir. Bu oldukça çirkin, değil mi? Hepsi HTML tablolarına oldukça benziyor! ?

CSS Izgarası ile Düzen Nasıl Oluşturulur

CSS Izgaraları, içeriği sunumundan ayırmanıza yardımcı olacaktır. CSS Grid'in şu anda sahip olduğunuz en güçlü düzen sistemi olduğunu söyleyebilirim. Az önce gördüğümüz örneği yeniden oluşturalım, ancak bunun yerine CSS Izgarasını kullanarak:

Gördüğünüz gibi, HTML kodu çok daha kolay. Ortaya çıkan kodda herhangi bir düzen bilgisi yoktur; her bölüm basit bir haber listesi içerir. Bu sayfayı oluşturduysak, şöyle görünür (sonucu görselleştirmenize yardımcı olmak için renkleri korudum):

Şimdi, temel ızgarayı nasıl oluşturacağız? Tabii ki sade ve basit CSS kuralları kullanarak! İlk olarak, ana kapsayıcılara birkaç kural uygulamamız gerekiyor. Bu kurallar kılavuzun kendisini belirleyecektir (sütunlar, satırlar, boşluklar vb.):

bununla sonuçlanır:

Vay! Oldukça havalı, ha? Yalnızca birkaç CSS satırıyla artık tarayıcımız tarafından oluşturulan güzel bir ızgaraya sahibiz. Her blok, başka bir şey yapmadan otomatik olarak bir hücreye yerleştirildi. Ancak ortaya çıkan sayfa tam olarak istediğimiz gibi değil, değil mi? Sorun nedir?

Karşılama bloğunu üç sütuna ve iki satıra (yani 6 hücre) böldük. Ancak bu blokta sadece 5 haber vardır, bu da öğelerin otomatik olarak konumlandırılmasının bir hücreyi boş bırakacağı anlamına gelir. Bunu düzeltmek için, ilk çocuk için fazladan bir CSS kuralı eklememiz gerekiyor—tarayıcıya header bölümündeki ilk ve en önemli haberin iki hücre aldığını söylememiz gerekiyor:

bu da istediğimiz sayfayla sonuçlanır:

işte! Bu kadar! Şimdi başlangıçta elde ettiğimiz sonuca sahibiz, ancak daha basit ve daha zarif bir kaynak koduyla. HTML içeriğini CSS mizanpajından kesin olarak ayırabildik mi?

CSS Izgarasını Öğrenmek için Kaynaklar

CSS Grid'e başlamak için size Thomas H. Park'tan CSS Grid Garden'ı öneririm. 28 seviyesi boyunca, CSS Izgaraları hakkında bilmeniz gereken tüm temel bilgileri öğreneceksiniz:

Diğer kaynaklar şunlardır:

• CSS Püf Noktalarında CSS Izgarası için Eksiksiz Bir Kılavuz. Bu web sitesinin herhangi bir tanıtıma ihtiyacı olduğunu düşünmüyorum… Burada tüm CSS Grid özelliklerini, bunların nasıl kullanılacağına dair ayrıntılı açıklamalar ve örneklerle birlikte bulacaksınız. Web sitesi iki sütuna bölünmüştür: kapsayıcı öğesi için geçerli olan özellikler (ızgaranın kendisini tanımlar) ve alt öğeler için geçerli olan özellikler.
• Mozilla'da CSS Izgara Düzeni. Muhtemelen önceki kaynaktan daha az ayrıntılı olan bu web sitesi, CSS Izgaraları hakkında bazı yararlı bilgiler de içerir.
• Izgara Örnekleri. CSS Izgarası kullanılarak oluşturulan birkaç ızgara örneği. Nasıl başlayacağınızı merak ediyor musunuz? Bu örnekler size mükemmel yerleşim skellerini verecek mi?

Çözüm

Sonunda web sitelerimizin düzenini içeriğimizden bağımsız olarak tanımlayabiliriz. CSS Grid kesinlikle web tasarımında devrim yaratacak; güçlü ve zarif. Bu yeni teknolojiyi öğrenin ve yeni projelerinize uygulayın!

Web tasarımının geleceği BUGÜN.

Öne Çıkan Resim Dmitri Popov tarafından.