CSS3 Çoklu Kolonlar

8 Eylül 2011

Çoklu kolonlar metinlerin normal akışı dışında kolonlara bölünmesini ve gazete ve dergilerdeki çoklu kolonlu yapıya kavuşmasını sağlar.

Uzun ve geniş alanlardaki metinlerin okunmaları daha zordur. Tipografi açısından belirli genişlikteki alanların metinleri daha okunaklı olduğu kabul edilir. Bu özellik bize daha okunaklı alanlar oluşturmamızı sağlıyor.

Çoklu kolonlu yapılar çokta yeni bir özellik değildir. A List Apart sitesindeki ilgili yazı 2005 tarihinde yazıldığını düşünürsek yaklaşık 6 sene olmuş ve buda az zaman değil.

Çoklu kolonları düzenlemek için bir kaç özellik vardır. Kolon yapısını, genişliğini ve ara alanlar oluşturmak için bu özellikleri kullanırız.

Çoklu kolon oluşturmak ve düzenlemek için 8 adet özellik vardır.

  • column-count
  • column-width
  • columns
  • column-gap
  • column-rule
  • column-break veya break-*
  • column-span
  • column-fill

Çoklu kolon özelliklerini iki kısma ayırabiliriz.

  • column-count
  • column-width
  • column-gap
  • column-rule

Yeni nesil tarayıcıların tümünün(ie hariç) desteklediği özellikler ve

  • columns
  • column-break veya break-*
  • column-span
  • column-fill

Sadece webkit tabanlı tarayıcıların desteklediği özellikler var. Biz şimdi sıra ile tanıtalım.

Elemanları kolonlara bölmek için column-count ve column-width özelliklerini kullanıyoruz.

column-count

Elemanı ayıracağımız kolon sayısını belirlememizi sağlar. Başlangıç değeri auto olarak tanımlıdır. Bu sayede sadece column-width tanımı ile ile

#cokluKolon{
  -moz-column-count:3;
  -webkit-column-count:3;
  column-count:3;
  width:968px;
  margin:0 auto;
}

Genişlik tanımı yapılmadan kolonlara bölme işlemi gerçekleşmiyor. Tarayıcılara göre farklı öneklerle kullanmamız dışında tek satırsa elemanları kolonlara bölmek bize çok büyük kolaylık sağlayacaktır.

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 10+ 1.5+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

column-width

Elemanları kolonlara bölmek için diğer bir yöntemde column-width ile genişlik tanımı yapmaktır. Tarayıcılar belirlenen genişliğe göre kapsayıcının genişliğine göre otomatik olarak kolonlara bölecektir.

#cokluKolon{
    -moz-column-width:150px;
    -webkit-column-width:150px;
    column-width:150px;
}

Bir genişlik tanımı yapılırsa column-width değeri tanımlandığı kadar kolona bölüyor.

#cokluKolon{
    -moz-column-width:150px;
    -webkit-column-width:150px;
    column-width:150px;
    width:950px;
}

column-width ile column-count aynı anda kullanabiliriz.

#cokluKolon{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
}

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 10+ 1.5+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

columns

column-count ve column-width değerlerini tek seferde kullanabileceğimiz bir kısayol tanımıdır.

div {
	columns: 200px 5;
}

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 10+ desteklemeiyor

Burada araya girip gördüğüm bir sorunu yazayım. column-count ve column-width tanımları birlikte yapılınca veya columns tanımı yapıldığında Firefox ve Google Chrome ile Opera farklı yorumluyor. Opera yorumlarken her halükarda column-width değerini üstün kılarken, Firefox ve Chrome column-count değerini üstün kılıyor.

#cokluKolon{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
}

Bu tanımda Firefox ve Chrome 2 kolonlu bir yapı gösteriyor ve genişlik olarak 150px tanımını görmüyor. Opera ise column-width değerini 150px alıp kapsayıcının genişliği kadar kolona ayrırıyor.

column-gap

Kolonlar arasına mesafe koymak için kullanılır. Bir bakıma padding veya margin anlamında kullanılır.

Başlangıç değeri 1em olarak tanımlıdır.

#cokluKolon{
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
}

column-gap’in güzelliği son kolona bu boşluğu uygulamıyor olması.

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 10+ 1.5+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

column-rule

column-rule ile kolonlar arasına çizgi atabiliyoruz. border tanımı ile benzer bir yapısı var. column-rule-size, column-rule-stylevecolumn-rule-color gibi ayrı ayrı tanımlama yapılabileceği gibi column-rule kısaltması ile tanım yapabiliyoruz.

#cokluKolon{
    -webkit-column-rule: 3px solid #000;
    -moz-column-rule: 3px solid #000;
    column-rule: 3px solid #000;
}

column-gap gibi sadece aradaki kolonlara uygulanan bir özellik bu son kolona uygulanmıyor.

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 10+ 1.5+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

break-before, break-after ve break-inside

Eleman akışını kesmek gerektiğin kullanmak için break-before, break-aftervebreak-inside kullanırız. Özelliğin üçe ayrılmasının nedeni yerini belirlemektir

  • break-before: çoklu kolon uygulanmış bir elementin içindeki bir elemanın öncesinde kolon kesilip kesilmemesini ayarlamak için kullanılır. auto | always | avoid | left | right | page | column | avoid-page | avoid-column değerlerini alıyor.
  • break-after:çoklu kolon uygulanmış bir elementin içindeki bir elemanın sonrasında kolon kesilip kesilmemesini ayarlamak için kullanılır. auto | always | avoid | left | right | page | column | avoid-page | avoid-column değerlerini alıyor.
  • break-inside: çoklu kolon uygulanmış elementin içindeki elemanın bulunduğu kolondaki durumu ayarlamak için kullanılır. auto | avoid | avoid-page | avoid-column değerlerini alıyor.

Alınan değerleri tanımlayalım. Bu özelliği şu an sadece webkit tabanlı tarayıcılar destekliyor. Operada desteklediğini söyese de ben örneklerde buna dair bir görüntü elde edemedim. Burada sadece webkit’in desteklediği değerleri tanımlayacağım.

  • auto: Oluşturulan kolonun öncesinde/sonrasında/içinde kesme veya kesmemeye karışma
  • always: Her zaman oluşturulan kolonun öncesini/sonrasını kes.
  • avoid: Oluşturulan kolonun öncesin/sonrasında/içinde kesme.
  • inherit: Üst elemana atanan değeri al.

Webkit bu özelliği önek ile -webkit-column-break-before, -webkit-column-break-afterve-webkit-column-break-inside olarak desteklemektedir.

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 10+ desteklemiyor

column-span

Eğer kolonlara ara başlıklar koymayı düşünüyorsak ve bu başlıkları tüm kolonlar boyunca uzatmak istiyorsak column-span özelliğini kullanıyoruz.

column-span iki değer alıyor all, none ve sayı değeri(kolon sayısı 2,3,4 vs.) all değeri tüm kolonlar boyunca başlığın uzaması için kullanılır. Sayı değerleri ise belirtilen sayıdaki kolonlarda uzamasını için kullanılır.

#cokluKolon h2{
  -webkit-column-span:all;
  -moz-column-span:all;
  column-span:all;
  background-color:#0CF;
}

Şu anda destekleyen tarayıcılar all ve none değerlerini destekliyor sayısal değeri destekleyen tarayıcı henüz yok.(Eylül 2011)

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 10+ desteklemiyor

column-fill

Çoklu kolon tanımlarını yaptığımızda tarayıcılar içeriğe göre kolonları eşit yükseklikte ayarlar. Kolon yüksekliklerini ayarlamak için column-fill özelliğini kullanabiliriz. İki değeri vardır auto ve balance.

  • balance: her kolonu eşit yükselikte olacak şekilde ayarlar. Başlangıç değerdir.
  • auto: Sütunları sıralı olarak doldurur. Bu özellik yükseklik tanımı yapıldı ise geçerli olur. Belirlenen yükseklik değerine göre kolonları doldurur ve son kolona geri kalan içerik yerleştirilir, bazen kolonlar boşta kalabilir.

Her ne kadar yukarıdaki bir tanımlama yapılmış olsa da ben uygulamadan iki değer arasında bir fark görmedim.

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 10+ desteklemiyor

İnternet Explorer İçin Çözüm

İnternet Explorer’un 10. sürümüne kadar desteklemediği bu özelliği kullanma imkanımız azalıyor. Javascript ile üretilen çözümler mevcut

Sonuç

Çoklu kolon özelliklerinin ilk çıktığında ben daha çok saya planlama özellikleri olarak düşünmüştüm, ancak özellikleri inceledikçe sayfa planlama için değil daha çok elemanları belli genişlikte kolonlara bölmek için kullanılabilecek bir özellik olduğunu gördüm. Benim düşündüğüm şekli ise yine W3C’nin duyurduğu Esnek Kutu Planlama Modülü karşılıyor. Çoklu Kolon javascript ile çözümde olsa henüz uygulayabileceğimiz özellikler içermiyor bence, tabi zaman ne gösterir bilemiyorum.

Daha önce çok kolonlu menülerde bu konudan bahsetmiştim. Çok kolonlu menüler bu özellik kullanılarak çok kolay bir şekilde oluşturulabilir.

Zamanla daha çok uygulama gördükçe daha iyi anlayabileceğimiz bir özellik. Bunun yanında araştırırken bazı ufak tefek sorunları olan özellikler bunlar şimdilik bahsetmedim sonra bilahare bahsederiz yeri geldikçe.

Kalın sağlıcakla

Kaynaklar

jQuery'ye büyük darbe Javascript ve seçiciler

jQuery'nin en büyük avantajlarından birisi seçici kullanımının basitiliğidir. CSS seçicilerini javascript'e kazandıran bu kullanım kolayl...… Devamını oku

jQuery'den kurtulma seansları. sınıf (class) işlemleri

17 August 2017 tarihinde yayınlandı.

jQuery'nin sonu mu geldi?

14 July 2017 tarihinde yayınlandı.