Yıllarca, CSS yüzer web sitesi düzenleri oluşturmada titiz, ancak gerekli bir bileşen olmuştur. Tasarımınız birden çok sütun gerektiriyorsa, yüzenlere döndünüz. Bu yöntemle ilgili sorun, web tasarımcılarının/geliştiricilerinin karmaşık site oluşturma konusunda gösterdikleri inanılmaz ustalığa rağmen, düzenler, CSS şamandıraları hiçbir zaman bu şekilde kullanılmak için tasarlanmamıştı.
Şamandıralar ve CSS konumlandırmanın gelecek yıllar boyunca web tasarımında bir yeri olacağı kesin olsa da, daha yeni düzen CSS Grid ve Flexbox gibi teknikler artık web tasarımcılarına site düzenlerini oluşturmaları için yeni yollar sunuyor. Çok fazla potansiyel gösteren bir başka yeni düzen tekniği, CSS Çoklu Sütunlarıdır.
CSS Sütunları birkaç yıldan beri var, ancak eski tarayıcılarda (çoğunlukla eski tarayıcılarda) destek eksikliği Internet Explorer sürümleri) birçok web profesyonelinin üretimlerinde bu stilleri kullanmasını engelledi. iş.
IE'nin bu eski sürümleri için desteğin sona ermesiyle birlikte, bazı web tasarımcıları artık yeni CSS düzenini deniyorlar. seçenekleri, CSS Sütunları dahil edildi ve bu yeni yaklaşımlarda olduğundan çok daha fazla kontrole sahip olduklarını buldular. yüzer.
CSS Sütunlarının Temelleri
Adından da anlaşılacağı gibi, CSS Çoklu Sütunları (olarak da bilinir) CSS3 çok sütunlu düzen), içeriği belirli sayıda sütuna bölmenize olanak tanır. Kullanacağınız en temel CSS özellikleri şunlardır:
- sütun sayısı
- sütun boşluğu
Sütun sayısı için istediğiniz sütun sayısını belirtirsiniz. Sütun boşluğu, bu sütunlar arasındaki oluklar veya boşluk olacaktır. Tarayıcı bu değerleri alacak ve içeriği belirttiğiniz sütun sayısına eşit olarak bölecektir.
Pratikte CSS çoklu sütunlarının yaygın bir örneği, bir gazete makalesinde göreceğinize benzer şekilde, bir metin içeriği bloğunu birden çok sütuna bölmek olabilir. Aşağıdaki HTML işaretlemesine sahip olduğunuzu varsayalım (örneğin amaçlarla, yalnızca başlangıcını koyduğumuzu unutmayın). bir paragraf, pratikte ise bu biçimlendirmede muhtemelen birden çok içerik paragrafı olacaktır):
Makalenizin başlığı.
Burada bir sürü metin paragrafı hayal edin...
Daha sonra bu CSS stillerini yazdıysanız:
.içerik {
-moz-sütun sayısı: 3;
-webkit-sütun-sayısı: 3;
sütun sayısı: 3;
-moz-sütun-boşluğu: 30 piksel;
-webkit-sütun-boşluğu: 30 piksel;
sütun aralığı: 30 piksel;
}
Bu CSS kuralı, "içerik" bölümünü aralarında 30 piksel boşluk olacak şekilde 3 eşit sütuna böler. 3 yerine iki sütun istiyorsanız, bu değeri değiştirmeniz yeterlidir ve tarayıcı içeriği eşit olarak bölmek için bu sütunların yeni genişliklerini hesaplar. Önce satıcı önekli özellikleri, ardından öneksiz bildirimleri kullandığımıza dikkat edin.
Bu kadar kolay olsa da, bu şekilde kullanımı web sitesi kullanımı için şüphelidir. Evet, bir grup içeriği birden çok sütuna bölebilirsiniz, ancak bu en iyi okuma olmayabilir web deneyimi, özellikle bu sütunların yüksekliği sayfanın "katının" altına düşerse ekran.
Okuyucular daha sonra içeriğin tamamını okumak için yukarı ve aşağı kaydırmak zorunda kalacaktı. Yine de, CSS Sütunlarının prensibi 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 - gerçekten de mizanpaj için kullanılabilir.
CSS Sütunlarıyla Düzen
3 sütun içerikli içerik alanına sahip bir web sayfanız olduğunu varsayalım. Bu çok yaygın bir web sitesi düzenidir ve bu 3 sütunu elde etmek için normalde içinde bulunan bölümleri kaydırırsınız. CSS çoklu sütunları ile çok daha kolay.
İşte bazı örnek HTML:
Blogumuzdan.
İçerik buraya gelecekti…
Yaklaşan Etkinlikler.
İçerik buraya gelecekti…
Bu çoklu sütunları yapmak için gereken CSS, daha önce gördüklerinizle başlar:
.içerik {
-moz-sütun sayısı: 3;
-webkit-sütun-sayısı: 3;
sütun sayısı: 3;
-moz-sütun-boşluğu: 30 piksel;
-webkit-sütun-boşluğu: 30 piksel;
sütun aralığı: 30 piksel;
}
Şimdi, buradaki zorluk, tarayıcının bu içeriği eşit olarak bölmek istemesidir, bu nedenle, bu bölümlerin içerik uzunluğu farklıysa, o tarayıcı aslında bir bireysel bölme, başlangıcını bir sütuna ekleme ve ardından diğerine devam etme (bunu, bir deneme çalıştırmak ve her birinin içine farklı uzunluklarda içerik eklemek için bu kodu kullanarak görebilirsiniz) bölünme).
İstediğin bu değil. Bu bölümlerin her birinin ayrı bir sütun oluşturmasını istiyorsunuz ve bir bölümün içeriği ne kadar büyük veya küçük olursa olsun, asla bölünmesini istemiyorsunuz. Bunu, bu ek bir CSS satırı ekleyerek başarabilirsiniz:
.content div {
ekran: satır içi blok;
}
Bu, "içeriğin" içindeki bölümleri, tarayıcı bunu birden çok sütuna bölse bile bozulmadan kalmaya zorlayacaktır. Daha da iyisi, burada hiçbir şeye sabit bir genişlik vermediğimiz için, tarayıcı yeniden boyutlandırıldığında bu sütunlar otomatik olarak yeniden boyutlandırılacak ve bu da onları ideal bir uygulama haline getirecektir. duyarlı web siteleri. Bu "satır içi blok" stili uygulandığında, 3 bölümünüzün her biri ayrı bir içerik sütunu olacaktır.
Sütun Genişliğini Kullanma
“Column-count” dışında kullanabileceğiniz bir özellik daha var ve layout ihtiyaçlarınıza göre aslında 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 ile yapabiliriz:
.içerik {
-moz-sütun genişliği: 500 piksel;
-webkit-sütun genişliği: 500 piksel;
sütun genişliği: 500 piksel;
-moz-sütun-boşluğu: 30 piksel;
-webkit-sütun-boşluğu: 30 piksel;
sütun aralığı: 30 piksel;
}
.content div {
ekran: 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ı penceresinin genişliği 500 pikselden azsa, bu 3 bölüm, biri diğerinin üzerinde olacak şekilde 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ıyla birlikte 2 sütunu sığdıracak kadar büyüdüğünde, tarayıcı otomatik olarak tek bir sütun düzeninden iki sütuna geçecektir. Ekran genişliğini artırmaya devam edin ve sonunda, 3 bölümümüzün her birinin kendi sütununda görüntülendiği 3 sütunlu bir tasarım elde edeceksiniz. Yine, bu biraz yanıt vermenin harika bir yolu, çoklu cihaz dostu düzenler ve kullanmanıza bile gerek yoktur. medya sorguları düzen stillerini değiştirmek için!
Diğer Sütun Özellikleri
Burada kapsanan ö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 olmasını istiyorsanız, bunlar kenarlıklar yerine kullanılacaktır.
Deneme Zamanı
Şu anda, CSS Çoklu Sütun Düzeni çok iyi desteklenmektedir. Ön eklerle, web kullanıcılarının %94'ünden fazlası bu stilleri görebilecek ve bu desteklenmeyen grup gerçekten de Internet Explorer'ın artık desteklenmeyen çok daha eski sürümleri olacaktır.
Şimdi bu düzeyde bir destek mevcutken, CSS Sütunları ile denemeler yapmaya başlamamak ve bu stilleri üretime hazır web sitelerinde dağıtmak için hiçbir neden yok. Bu makalede sunulan HTML ve CSS'yi kullanarak denemelerinize başlayabilir ve sitenizin düzen gereksinimleri için en iyi neyin işe yarayacağını görmek için farklı değerlerle oynayabilirsiniz.