Uzun yıllardan beri, CSS yüzücüleri, web sitesi düzenleri oluştururken, son derece gerekli, ancak gerekli bir bileşen olmuştur. Tasarımınız birden çok sütun için çağrıldıysa, yüzenlere döndünüz . Bu yöntemle ilgili problem, web tasarımcılarının / geliştiricilerinin karmaşık site düzenleri oluştururken gösterdikleri inanılmaz ustalığa rağmen, CSS yüzerlerinin gerçekten bu şekilde kullanılmayacağıdır.
Floatlar ve CSS konumlandırmanın web tasarımında yıllar geçmesine rağmen, CSS Grid ve Flexbox dahil olmak üzere yeni yerleşim teknikleri artık web tasarımcılarına site düzenlerini oluşturmaları için yeni yollar sunuyor. Çok fazla potansiyel gösteren başka bir yeni düzen tekniği, CSS Çoklu Sütunlardır.
CSS Kolonları birkaç yıldan beri varlığını sürdürüyor, ancak eski tarayıcılarda (çoğunlukla Internet Explorer'ın eski sürümlerinde) destek eksikliği birçok web çalışanının bu tarzları üretim işlerinde kullanmasını engelledi.
IE'nin daha eski sürümleri için desteğin sona ermesiyle birlikte, bazı web tasarımcıları şimdi yeni CSS mizanpajı seçenekleri, CSS Sütunları dahil etmekte ve bu yeni yaklaşımlarla şamandıralardan çok daha fazla kontrol sahibi olduklarını bulmaktalar.
CSS Kolonlarının Temelleri
Adından da anlaşılacağı gibi, CSS Çoklu Sütunlar (aynı zamanda CSS3 çoklu sütun düzeni olarak da bilinir) içeriği belirli bir sayıda sütuna bölmenizi sağlar. Kullanacağınız en temel CSS özellikleri şunlardır:
- sütun sayısı
- kolon boşluğu
Sütun sayımı için, istediğiniz sütun sayısını belirtirsiniz. Sütun boşluğu, bu kolonlar arasındaki oluklar veya boşluklar olacaktır. Tarayıcı bu değerleri alır ve içeriği belirttiğiniz sütun sayısına eşit olarak böler.
Pratikte CSS çoklu sütunlarının ortak bir örneği, bir metin makalesi bloğunu bir gazete makalesinde göreceğinize benzer şekilde birden çok sütuna bölmek olacaktır. Aşağıdaki HTML işaretine sahip olduğunuzu varsayalım (örneğin, yalnızca bir paragrafın başlangıcını yapıyorum, ancak uygulamada bu işaretlemede birden çok içerik paragrafının olması muhtemeldir):
Makalenizin başlığı
Burada birçok paragraf metnini düşünün ...
Daha sonra bu CSS stillerini yazdıysanız:
.content {-moz-column-count: 3; -webkit-sütun sayısı: 3; sütun sayısı: 3; -moz-sütun-boşluk: 30px; -webkit-sütun-boşluk: 30px; sütun aralığı: 30px; }Bu CSS kuralı, "içerik" bölümünü, aralarında 30 piksellik bir boşluk bulunan 3 eşit sütuna bölebilir. 3 yerine iki sütun istiyorsanız, yalnızca bu değeri değiştirirsiniz ve tarayıcı içeriği eşit olarak bölmek için bu sütunların yeni genişliklerini hesaplar. Öncelikle satıcı öneki özellikleri kullandığımızı, ardından öneki olmayan beyanları izlediğimizi unutmayın.
Bu kadar kolay olduğu gibi, bu şekilde kullanımı web sitesi kullanımı için sorgulanabilir. Evet, bir sürü içeriği birden çok sütuna bölebilirsiniz, ancak bu, özellikle bu sütunların yüksekliği ekranın “katının” altına düştüğünde, Web için en iyi okuma deneyimi olmayabilir.
Okuyucular, tam içeriği okumak için yukarı ve aşağı kaydırmak zorunda kalacaklardı. Yine de, CSS Kolonları'nın müdürü, burada gördüğünüz kadar kolaydır ve bazı paragrafların içeriğini bölmekten çok daha fazlasını yapmak için kullanılabilir - aslında, düzen için kullanılabilir.
CSS Sütunları ile Düzen
3 sütun içeriğine sahip bir içerik alanına sahip bir web sayfanız olduğunu varsayalım. Bu çok tipik bir web sitesi düzenidir ve bu 3 sütuna ulaşmak için normalde içinde yer alan bölümleri yüzersiniz. CSS çoklu sütunları ile çok daha kolay.
İşte bazı örnek HTML:
Son Haberler
İçerik buraya giderdi…
Blogumuzdan
İçerik buraya gider…
Yaklaşan Etkinlikler
İçerik buraya giderdi ...
Bu çoklu sütunları yapmak için CSS daha önce gördüğünüz şeylerle başlar:
.content {-moz-column-count: 3; -webkit-sütun sayısı: 3; sütun sayısı: 3; -moz-sütun-boşluk: 30px; -webkit-sütun-boşluk: 30px; sütun aralığı: 30px; }Şimdi, buradaki sorun, tarayıcı bu içeriği eşit bir şekilde bölmek istediği için, bu bölümlerin içerik uzunluğu farklıysa, bu tarayıcı aslında tek bir bölümün içeriğini bölecek ve bunun başlangıcını bir sütuna ekleyecektir. sonra diğerine devam edersiniz (bunu bir deneme çalıştırmak ve her bölümün içinde farklı içerikler eklemek için bu kodu kullanarak görebilirsiniz)!
İstediğin bu değil. Bu bölümlerin her birinin ayrı bir sütun oluşturmasını ve her bir bölümün içeriği ne kadar büyük veya küçük olursa olsun, asla bölünmemesini istemezsiniz. Bunu ek bir CSS satırı ekleyerek başarabilirsiniz:
.content div {display: satır içi blok; }Bu, “içerik” in içindeki bölümleri, tarayıcı bunu birden fazla sütuna böldüğünde bile, bozulmadan kalmaya zorlar. Daha da iyisi, burada sabit bir genişliğe hiçbir şey vermediğimizden, tarayıcılar yeniden boyutlandıkları için bu sütunlar otomatik olarak yeniden boyutlandıracak ve bu da onları yanıt veren web siteleri için ideal bir uygulama haline getirecektir. Bu “satır içi” stiliyle, 3 bölümünüzün her biri ayrı bir içerik sütunu olacaktır.
Sütun Genişliğini Kullanma
Kullanabileceğiniz “sütun sayısı” nın yanı sıra başka bir özelliği de vardır ve düzen gereksinimlerinize bağlı olarak siteniz için daha iyi bir seçim olabilir. Bu “sütun genişliği” dir. Daha önce gösterildiği gibi aynı HTML işaretlemesini kullanarak bunu CSS'mizle yapabiliriz:
.content {-moz-column-width: 500px; -webkit-sütun genişliği: 500px; sütun genişliği: 500px; -moz-sütun-boşluk: 30px; -webkit-sütun-boşluk: 30px; sütun aralığı: 30px; } .content div {display: satır içi blok; }Bunun çalışma şekli, tarayıcının bu "sütun genişliğini" o sütunun maksimum değeri olarak kullanmasıdır. Dolayısıyla, tarayıcı penceresi 500 pikselin altındaysa, bu 3 bölüm, bir diğerinin en üstlerinden biri olan tek bir sütunda görünecektir. Bu, mobil / küçük ekran düzenleri için kullanılan tipik bir düzendir.
Tarayıcı genişliği, belirtilen sütun boşlukları ile birlikte 2 sütun sığacak kadar büyürken, tarayıcı otomatik olarak tek bir sütun düzeninden iki sütuna gider. Ekran genişliğini artırmaya devam et ve en sonunda 3 sütunun her birinde kendi sütununda görüntülenen 3 sütun tasarımı olacak. Yine, bu bazı duyarlı, çok cihaz dostu düzenler almak için harika bir yoldur ve düzen stillerini değiştirmek için medya sorgularını kullanmanıza bile gerek yoktur!
Diğer sütun özellikleri
Burada ele alınan özelliklere ek olarak, sütunlarınız arasında kurallar oluşturmanıza olanak tanıyan renk, stil ve genişlik değerleri de dahil olmak üzere "sütun-kuralı" için özellikler de vardır. Sütunlarınızı ayıran bazı çizgiler varsa, bunlar sınırlar yerine kullanılır.
Deneme Zamanı
Şu anda CSS Çoklu Sütun Düzeni çok iyi desteklenmektedir. Öneklerle, web kullanıcılarının% 94'ünden fazlası bu stilleri görebilirdi ve desteklenmeyen grup, Internet Explorer'ın gerçekten daha eski sürümleri olabilirdi; artık artık desteklemiyor olabilirsiniz.
Şu anda bu destek seviyesi ile, CSS Sütunları ile deneme yapmaya ve bu tarzları üretim hazır web sitelerine yerleştirmeye başlamamak için bir neden yoktur. Bu makalede sunulan HTML ve CSS'yi kullanarak denemelerinizi başlatabilir ve sitenizin düzen gereksinimleri için en iyi sonuçların neler olduğunu görmek için farklı değerlerle oynayabilirsiniz.