tarihinde Fatih Hayrioğlu

Ç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

tarihinde Fatih Hayrioğlu

Daha önce Sürüm Kontrol Sistemi Git adlı bir makale yazmıştım, öğrenme sürecim devam ediyor. Git kullanırken komut satırını kullanıyoruz. MacOs’da Terminal’e denk geliyor. Bu nedenle genel Terminal komutlarınıda bilmekte yarar var. Benim gibi mac terminaline yabancı biri iseniz(aslında linux komut satırı ile benzer kodlar) aşağıdaki basit komutları bilmenizde yarar var.

Terminal giriş görünümü yukarıdaki gibidir. (Renklere takılmayın bu benim seçimim)

ls (list files)

Çalıştığımız klasörün içeriğini göstermek için kullanılır. Windows’taki dir ile aynı anlamdadır.

Sonuç aşağıdaki gibi olacaktır

ls
aFolder    another.txt    bilgilendirme.txt   deneme.html

cd (Change Directory)

Bu komut ile dosyalar arası geçiş için kullanırız. Mesela image klasörüne geçmek için

cd images

Tek seviyede değil birden fazla seviyede geçişte yapabiliriz.

cd images/icons/ust

Bir alt klasöre inmek için

cd ..

Kök dizinine(root) inmek için ise

cd

yazmak yeterlidir. Ufak bir ipucu klasör isimlerinin uzun olması durumunda akılda tutmak zor oluyor. Klasör veya dosya isminin başında bir kaç karakter yazdıktan sonra tab tuşuna basarak gerisini tamamlayabilirsiniz.

mkdir (Make Directory)

Yeni klasör oluşturmak için kullanıyoruz. Mac ve Windows’ta kullanımı aynıdır.

mkdir yeniKlasor

rm (remove)

Dosya ve klasörleri silmek için kullanılır. Silme işlemlerinde her zaman dikkatli olmak lazım.

rm deneme.html
rm images_klasoru

cp (copy) ve mv (move)

Çok basit bir kullanımı vardır. İlk parametre kopyalanacak dosyayı ikinci parametre ise hedefi gösterir.

cp deneme.html ~/dosya/deneme.html

Eğer taşımak istiyorsanız, aynı şekilde kullanabiliriz.

mv deneme.html /dosya/deneme.html

mv komutu dosya ismini değiştirmek içinde kullanılabilir.

mv deneme.html /dosya/test.html

deneme.html dosyası ismi test.html olarak değiştirilip taşınmıştır.

clear

Terminal ekranını temizlemek için kullanılır.

Dosya Açmak

Komut satırlarından harici programlarda da açabiliyoruz veya kendi içinde açabiliyoruz.

Mesela MacOs için ilgili klasörde iken

nano deneme.html

komutu deneme.html dosyamızı nano editöründe açmamızı sağlayacaktır.

exit

Eğer uzak dosya yönetimi ile çalışıyorsanız. Kurduğunuz bağlantıyı sonlandırır.  exit komutu ile Terminalide kapatmak mümkün. Terminal - Preferences.. - Settings - Shell oradanda “Close the Window” işaretleyerek exit komutu ile hem bağlantıyı hemde pencereyi kapatabiliriz.

Benim ihtiyaç duyduğum komutlar bunlar tüm liste için http://ss64.com/osx/ sitesineden yardım alabilirsiniz.

Git Kullanırken Öğrendiğim İpuçları

Yukarıda genel komutları anlattım, aşağıda ise kullandıkça gördüğüm komutları ve ipuçlarını paylaşacağım.

İki dosya arasındaki farkı görmek

Bir branchdeki veya bir dosya üzerindeki değişiklikleri görmek için branchde iken

$git log

yazarız bu komut bize

commit f491239170cb1463c7c3cd970862d6de636ba787 Author: Matt McCutchen <matt@mattmccutchen.net> Date:   Thu Aug 14 13:37:41 2008 -0400 git format-patch documentation: clarify what --cover-letter does commit 7950659dc9ef7f2b50b18010622299c508bfdfc3 Author: Eric Raible <raible@gmail.com> Date:   Thu Aug 14 10:12:54 2008 -0700 bash completion: 'git apply' should use 'fix' not 'strip' Bring completion up to date with the man page.

gibi bir sonuç döndürür. O dosya veya o branch üzerinde yapılan tüm değişiklikler hakkında bilgileri içeren bir listedir bu. Bu listede commit … ile başlayan satırda verilen numara yapılan ve gönderilen her iş için farklıdır biz bu sözdizimini kullanarak iki farklı gönderi arasındaki farkı bulabiliriz.

$git diff f491239170cb1463c7c3cd970862d6de636ba787 7950659dc9ef7f2b50b18010622299c508bfdfc3  Html/index.html

İki farklı branchdeki HTML/index.html dosyasındaki farklılıkları gösterir yukarıdaki kod. Farkları renkli görmek için –color parametresini kullanabiliriz.

$git diff --color  d76192b2c7a61d2aea62c7aec21e14cda72f9e32 fe0dba7b841e86b095d2aefbd6bd755a0d9d1e90  Html/index.html

Eklenenleri yeşil, çıkarılanları kırmızı renkte gösterecektir. Ayrımı görmek için renkler güzel oluyor.

Dallanma (Brach) Silmek

git branch -d: Yanlışlıkla açtığımız branchlerı silmek için

$git branch -d branch_ismi

Kısayol kullanmak

Git kullanırken aynı kodları tekrar tekrar çok kullanıyoruz. Bu komutları kısaltarak daha hızlı kod yazabilme imkanı sağlıyor bize komut sistemi.

git config dosyasına kısayolllarımızı ekleyebiliyoruz. git cofig ile ilgili ayrıntılı bilgiyi http://tybarts.wordpress.com/2011/05/07/git-global-config-dosyasini-ayarlamak/ bağlantısından edinebilirsiniz.

Global congif dosyasına eklemek için

$git config --global alias.ci commit

ci kısaltma commit normali. Eğer projeye özgü kısayollar oluşturmak için

$git config alias.ci commit

–global parametresini kaldırmamız yeterli olacaktır. git config dosyasını görmek için

$git config --edit

yazmamız yeterli burada eklediğimiz kısayolları görebiliriz. Benim listem aşağıdaki gibi.

[alias] st = status br = branch co = checkout ci = commit

Siz bu listeyi kendinize göre düzenleyebilirsiniz.

Git için kaynaklar

http://sixrevisions.com/resources/git-tutorials-beginners/ bu bağlantıda Git kaynakları listelenmiş. Git’in güzel yanlarında birisi öğrenmek için kaynağın bol olması.

Başka Branch’den dosya almak

$git checkout branch_adi dosya_adi

Benzer bir şekilde branchde yaptığımız değişikliği geri almak için master’dan dosyayı alabiliriz.

$git checkout master dosya_adi

Değişen dosya isimleri

Çalıştığımız branchde değişiklik yaptığımız dosyaları görmek için

$git diff master --name-only

kodunu kullanıyoruz.

Bana üşenmeyip bunları ve aklımda kalmayan bir çok bilgiyi öğreten Onur Yerlikaya’ya şükranlarımı sunarım. Gitmeyeydin Git daha kolay olacaadı. :D

Kalın sağlıcakla

Kaynaklar

tarihinde Fatih Hayrioğlu

Geçen hafta “IE6 Sonrası Kod Yazma Alışkanlıklarımızı Güncellemek” adlı makale ile ie6 ile vedalaştık. Tabi orada söylediğimiz gibi ie6’nın bitmiş olması sorunlarımızın bitmiş olduğu anlamına gelmiyor. İşte sizinle o makalede artık rahat rahat kullanabileceğimizi söylediğimizi Bitişik Kardeş Seçicisi ile ilgili bir sorunu burada sizlerle paylaşacağım.

Çözümü çok basit olan bir sorun ama bu sorunu anlatmamın nedenlerinden biriside sorunların olacağı, ama bizim bu sorunları görüp çözmemiz gerektiğini anlatmaktır. İyi bir arayüz geliştirici ve hatta iyi bir programcı hataları bulup üzerine gidip çözebilendir.

Soruna gelirsek; Sorun Bitişik Kardeş Seçicileri kullandığımız elemanlar arasında eğer HTML yorum satırı eklersek ie7 bitişik kardeş seçicisi ile tanımladığımız bildirimleri yorumlamıyor.

<h2>Başlık</h2>
<!-- html yorumu -->
<p>Paragraf</p>

CSS kodu

h2 + p {
	background-color: #fc0;
}

Uygulaması bütün tarayıcılarda sorunsuz çalışırken ie7’de sonuç vermeyecektir. DOM’daki öğelerin konumuna göre çalışan bu seçicinin çalışmasında ie7 aradaki yorum satırlarınıda dikkate alarak istenen sonucunu vermediğini göreceğiz.

Çözüm için yorum satırını kullanmaya ne gerek var silelim demek ve yorumları silmek bir çözümdür. Ama ben ie ile sorun yaşıyorum diye yorum satırımı silmek istemem. Çözümie6 sorunları ile uğraşırken bulduğumuz şekilde olacaktır. Şartlı yorumları kullanarak çözüme ulaşmakta mümkündür.

<h2>Başlık</h2>
<!--[if !IE]>Başlık yaz <![endif]-->
<p>Paragraf</p>
<p>Paragraf 2</p>

Şeklinde bir çözüm işimizi görecektir.

Kaynaklar