CSS için arşiv

Webkit Tabanlı Tarayıcılar(Chrome ve Safari) İçin Düzeltme(Hack) Sorunu ve Çözümü

Eylül 21st, 2011 • 1 yorum CSS
Etiketler: , , , ,

Genelde tarayıcı düzeltmelerini ie için yaparız. Ancak bu sefer Chrome için bir düzeltme yapmam gerekti(Chrome’un line-height ile olan sorun) araştırdım ve media sorgusu ile bir düzeltme kodu buldum. 

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .arama { background-color: #FF0000; }
    #solAlan {color: #0000FF;}
}

Şeklinde bir kod işimi gördü, ancak projeyi yayına atarken sıkıştırıp gönderiyoruz ve sıkıştırılınca

@media screen and(-webkit-min-device-pixel-ratio:0)

Satırındaki and ve ( arasındaki boşluğu sıkıştırma esnasında yok ediyor ve buda bu düzeltmenin uygulanmamasına neden oluyor. Çözüm için araya çakma bir yöntem(/*!*/) ile boşluk bırakmalıyız.

@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { ... }

Şeklinde çözüm üretebiliyoruz.

Belki küçük bir ipucu ama lazım olur günün birinde

Kaynaklar

CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout)

Eylül 16th, 2011 • 6 yorum CSS, Haberler
Etiketler: , , , , , , , ,

CSS asıl çıkışını kazanmasında sayfa yerleşimini CSS ile ayarlamaya başladığımızda yaptı. CSS3 ile birlikte bize daha avantajlı sayfa yerleşimi özellikleri sunmayı gaye edinen W3C bizlere işimiz kolaylaştıracak Esnek Kutu Yerleşimi Modülünü sunmaktadır.

Sayfa yerleşimini yaparken genelde float/clear veya position özelliklerini kullanarak yapıyorduz. Tabloya göre büyük avantajlar sağlayan bu yöntemlerden sonra web sayfası kodlamak daha kolay ve zevkli bir hal aldı. Detay için Tablo mu? Div mi? Karmaşasına Son Noktayı HTML5 koydu yazısını inceleyin.

Tabi CSS ile sayfa yerleşimi kodlamanın birçok avantajı var. Bunun yanında bazı karışık sayfa yerleşimlerinde ise bizi zorladığı bir gerçek. Özellikle esnek yapılı sayfa düzenleri ve dikey eksendeki yerleşimlerdeki sorunlarını gören W3C bize bu konuda yardımcı olacak yöntemleri üretmeye başladı. Bunlardan bir tanesi Esnek Kutu Yerleşimi Modülüdür(EKYM).

Esnek Kutu Yerleşimi Modülü kapsayıcı bir eleman içindeki alt elemanların yerleşimini sağlamaktadır. Daha önce dikeyde yaşadığımız birçok sorunu(dikeyde ortalama ve aksak kolon sorunları gibi) gidermemizi sağlıyor. Esnek Kutu Yerleşimi Modülünü bu makalemizde inceleyeceğiz.

Kapsayıcı elemana tanımlanan display:box özelliği yardımı ile alt elemanlara tanımlanan box(box-orient, box-direction, box-pack, box-align, box-lines, box-ordinal-group, box-flex ve box-flex-group) özellikleri ile sayfa yerleşimimizi çok kolay şekilde yapmamıza olanak sağlamaktadır.

CSS3 EKYM olarak kısaltacağımız bu özellik bize olanaklarını display:box tanımı içerisinde gelen yeni tanımlar ile getirmektedir. Bu yeni 8 tanım aşağıdaki gibidir;

  • box-orient
  • box-direction
  • box-pack
  • box-align
  • box-lines
  • box-ordinal-group
  • box-flex
  • box-flex-group

EKYM ilk olarak 2009 yılında standardı oluşturuldu, ancak daha sonra yeniden ele alındı ve şu an sonlandırılmak üzeredir. Biz 2009 yılındaki standartlaşan özellikleri tanımlayacağız, çünkü tarayıcılar 2009 yılındaki standartları desteklemektedir ve yeni standartlaşan özelliğinde mantık olarak çok büyük farklılığı yok.

display:box

İlk olarak kapsayıcı esnek kutuları çevreleyen eleman display:box tanımı yaparak başlıyoruz. Farklı tarayıcılar önek ile birlikte desteklemektedir;

#esnekKutu{
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}

Tanımı ile kapsayıcı elemanı tanımlıyoruz. Bu tanım ile kapsayıcı eleman içersindeki alt elemanların artık esnek yapılı olacağını ve EKYM özellikleri alabileceğini belirliyoruz.

Çok basit bir şekilde kutularımızı yanyana dizebiliriz mesela

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 display:-ms-box;
 width:600px;
 border:1px solid #03C;
}

Kapsayıcı tanımlanan display:box tanımı ile içindeki elemanlar birer inline-block eleman gibi davranır ve yanyana sıralanır.

box-orient

Yapısı: box-orient: <deger>
Aldığı Değerler: horizontal | vertical | inline-axis | block-axis
Başlangıç değeri: inline-axis
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanlara
Kalıtsallık: Yok

box-orient özelliği ile esnek kapsayıcı eleman içindeki kutuların hangi eksende sıralanacağını belirleriz. Yukarıdaki örnekte gördüğümüz gibi eğer bir tanım yapılmadı ise ve kapsayıcı eleman genişliği müsait ise kutular yatayda yanyana sıralanır.

Biz bu durumu değiştirmek için box-orient özelliğini kullanırız. 3 adet değer alır.

  • horizontal: Kutular yatay eksende soldan sağa doğru sıralanır.
  • vertical: Kutular dikey eksende yukarıdan aşağıya doğru sıralanır.
  • inherit: Üst elemanın değerini alır.

Bunlardan başka iki değer daha mevcuttur. inline-axis yatayda ve block-axis dikeyde sıralamayı sağlar. Bu tanımlar horizontal ve vertical gibi davranırlar.

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 box-orient:vertical;
 -moz-box-orient:vertical;
 -webkit-box-orient:vertical;
 width:200px;
 height:600px;
 border:1px solid #03C;
}

box-orient:vertical ile esnek kutularımızı dikeyde sıraladık.

box-direction

Yapısı: box-direction: <deger>
Aldığı Değerler: normal | reverse
Başlangıç değeri: inline-axis
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanlara
Kalıtsallık: Yok

box-direction özelliği kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. İki değer alır; normal ve reverse. reverse tanımlandığında sıralama yönü normalin tam tersine döner.

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 box-orient:vertical;
 -moz-box-orient:vertical;
 -webkit-box-orient:vertical;
 box-direction: reverse;
 -moz-box-direction: reverse;
 -webkit-box-direction: reverse;
 width:200px;
 height:600px;
 border:1px solid #03C;
}

Yukarıdaki örnekte sıralama yukarıdan aşağı Esnek Kutu1, Esnek Kutu2 ve Esnek Kutu3 iken box-direction: reverse; tanımı ile sıralama Esnek Kutu3, Esnek Kutu2 ve Esnek Kutu1 şeklini almıştır.

Not: box-orient ve box-direction yerine ikisini kapsayan flex-direction üzerinde çalışılmaktadır.

flex-direction lr, rl, tb, bt, inline, inline-reverse, block ve block-reverse değerlerini alabilecek. sol(left – l), sağ(right – r), üst(top – t) ve alt(bottom – b) kısaltmaları kullanılmıştır. CSS3’ün birçok özelliği üzerinde halen çalışılan canlı bir yapıdır. Değişikliklerin olabileceği dikkate alınmalıdır.

box-pack

Yapısı : box-pack: <deger>
Aldığı Değerler : start | end | center | justify
Başlangıç değeri: start
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanlara
Kalıtsallık: Yok

box-pack özelliği kapsayıcı kutunun içindeki esnek kutuların kapsayıcıya göre konumunu belirlemek için kullanılır. Dört adet değer alır başlangıç(start), son(end), ortalı(center) ve iki yana yasla(justify)

Alt elemanların genişliğinin kapsayıcı elemandan küçük olduğu durumlarda kalan boşluk alanına göre değerlendirme yapılır.

Bu özellik tanımı 2009’da tanımlandı şu an yenileniyor flex-pack olarak değişecek. Tarayıcılar destekleyen kadar bu şekilde devam edecek.

    #esnekKutuKapsul{
     display: box;
     display:-webkit-box;
     display:-moz-box;
     width:600px;
     border:1px solid #03C;
     box-pack:center;
     -webkit-box-pack:center;
     -moz-box-pack:center;
    }

box-align

Yapısı : box-align: <deger>
Aldığı Değerler : stretch | start | end | center | baseline
Başlangıç değeri: stretch
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanlara
Kalıtsallık: Yok

Kapsayıcı elemana atanan box-orient değerine göre kalan boşluğa göre hizalama yapmak için kullanılır.

Beş adet değer alır. stretch | start | end | center | baseline Başlangıç değeri stretch’dir; bunun anlamı box-orient değeri horizontal ise stretch uygulanan elemanın alt elemanlarının yükseklikleri yayılacaktır, eğer box-orient değeri veritcal ise genişlikleri yayılacaktır. start ve end değerleri eğer horizantal tanımlı ise sol ve sağa yaslayacaktır, vertical tanımlı ise üste ve alta yaslayacaktır. center değeri ise ortalayacaktır. 

    #esnekKutuKapsul{
     display: box;
     display:-webkit-box;
     display:-moz-box;
     width:600px;
     border:1px solid #03C;
     box-orient:horizantal;
     -moz-box-orient:horizantal;
     -webkit-box-orient:horizantal;
     box-align: center;
     -webkit-box-align: center;
     -moz-box-align: center;
    }
    .esnekKutu{
     background-color:#999999;
     width:150px;
     height:150px;
     margin-right:15px;
    }

box-lines

Yapısı : box-lines: <deger>
Aldığı Değerler : single | multiple
Başlangıç değeri: single
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanlara
Kalıtsallık: Yok

Esnek Kutu Yerleşimi ile yerleştirilen kutular genelde bir eksen üzerinde blok halinde hareket eder, blox-line özellik bu elemanların alt satıra geçip geçmemesini ayarlar. İki değer alır.

  • single: Başlangıç değerdir. Bu değeri alan kutular kapsayıcı eleman üzerine taşma yapacaktır. Taşma durumunu kontrol etmek için overflow özelliği kullanılabilir.
  • multiple: Bu değer alan kutular tek satırda kendini sınırlamayacaklardır ve ikinci satıra inecektir.

Şu anki tarayıcılar bu özelliği henüz desteklemiyor. İE10 desteklediğine dair duyumlar var.

Yenilenen EKYM standartlarında box-line özelliği görünmüyor. Onun yerine benzer etki yapacak flex-flow tanımı gelecek gibi.

box-ordinal-group

Yapısı : box-ordinal-group: <deger>
Aldığı Değerler : <sayı>
Başlangıç değeri: 1
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanların normal akıştaki alt elemanları
Kalıtsallık: Yok

box-ordinal-group özelliği kapsayıcı kutunun içindeki esnek kutuların sıralamasını belirlememizi sağlar. 

#esnekKutu1 {
    box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    background-color:#0CF;
}
#esnekKutu3 {
    box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    background-color:#9C3;
}
#esnekKutu4 {
    box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    background-color:#FC9;
}

Dört adet kutumuz var. Bunların üç tanesine box-ordinal-group değeri tanımladık.

EsnekKutu1 ve EsnekKutu3 için 2 değeri tanımladık bunlar ikinci sırada gelecek. EsnekKutu4’e 1 değer tanımladık, buda ilk sırada gelecek. EsnekKutu2 için bir tanım yapmadık buda başlangıç değeri olan 1 değerini almasına neden olacaktır. Buna göre sıralama 2,4,1,3 şeklinde olacaktır.

Bu özellik bize sıralama konusunda tam bir kontrol sağlamaktadır.

Yeni EKYM standardında box-ordinal-group yerine flex-order özellik ismi kullanılması düşünülmektedir.

box-flex

Yapısı : box-ordinal-group: <deger>
Aldığı Değerler : <sayı>
Başlangıç değeri: 0
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanların normal akıştaki alt elemanları
Kalıtsallık: Yok

blox-flex özelliği tanımlanması durumunda alt elemanların esnek davranmasını sağlar. Tanım yapılmadığında ise alt elemanlar esnek olmaz.

Hesaplamanın mantığı şöyledir;

Gruptaki tüm esnek kutuların box-flex değeri toplanır ve her kutu için toplam boşluk genişliği(Kapasayıcı eleman ile kutuların genişliği toplamı arasındaki fark) bu sayıya bölünerek elde edilen değer kutu genişliğini belirler.

#esnekKutuKapsul {
     background: gray;
    border: blue;
    display: box;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   width:100%;
}
.esnekKutu {
   background-color:#999999;
   height:150px;
}
#esnekKutu1 {
    background-color:#0CF;
    border: orange solid 1px;
    box-flex: 2;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -ms-box-flex: 2;
}
#esnekKutu2 {
    background: lightgray;
    border: red solid 1px;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
#esnekKutu3 {
    background-color:#9C3;
    border: red solid 1px;
    box-flex: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-box-flex: 0;
}
#esnekKutu4 {
    background-color:#FC9;
    border: red solid 1px;
}

Daha sabit bir örnek verelim; genişliği 600px olan kapsayıcı eleman ve  üç adet 100px’lik kutumuz olsun(Bu durumdan boşluk değeri 300px olacaktır), bunların box-flex değerleri 1 olsun, her bir kutunun genişliği 200px(100 + 300/3 * 1 = 200) olacaktır. Eğer bu kutulardan bir tanesinin box-flex değeri 2 olarak değiştirilirse, değiştirilen kutunun genişliği 250px(100 + 300/4 * 2 = 250) olurken diğer iki kutunun genişliği 175px(100 + 300/4 * 1 = 175) olacaktır. 

#esnekKutuKapsul {
     background: gray;
    border: blue;
    display: box;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   width:600px;
}
.esnekKutu {
   background-color:#999999;
   height:150px;
     width:100px;
}
#esnekKutu1 {
    background-color:#0CF;
    box-flex: 2;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -ms-box-flex: 2;
}
#esnekKutu2 {
    background: lightgray;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
#esnekKutu3 {
    background-color:#9C3;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}

Eğer kutu genişlikleri toplamı kapsayıcı kutunun genişliğinden büyük ise genişlik hesaplamasında benzer birim hesabına göre küçülme olacaktır. 0 değeri kutunun esnek olmayacağı anlamına gelir.

Raphael Goetter’ın yaptığı örnek bu işin geleceği hakkında bize güzel bir ipucu veriyor. Fantastik örnekler.(Chrome da daha iyi gözüküyor)

box-flex özelliği 2009 yılındaki standartlardaki hali idi, yenilenen standartlarda box-flex vede box-flex-group özelliklerini kapsayan flex() fonksiyonu ile yenilenmektedir.

Tarayıcı Destekleme Listesi
Firefox 3+ (-moz- öneki ile)
Chrome 5+ (-webkit- öneki ile)
Safari 3.2+ (-webkit- öneki ile)
Opera desteklemiyor
İnternet Explorer 10+ (-ms- öneki ile)
Mobil Tarayıcılar
iOS Safari 3.2+ (-webkit- öneki ile)
Opera Mini desteklemiyor
Opera Mobile destelemiyor
Android Browser 2.2+ (-webkit- öneki ile)

Sonuç

Gerek CSS3 ve gerekse EKYM yeni özellikler ve hala gelişmektede olan mecralar. Benim burada anlatmak istediğim CSS3’ün en büyük yeniliklerinden biri olan sayfa planlamaya yönelim yeniliklerine bir göz atmak, mantığını kavramak, geleceğe dair fikir edinmeyi sağlamaktır. Ben burada sadece EKYM anlattım, ancak CSS3 ile sayfa planlamaya yönelik başka modüllerde geliştirilmekte; Çoklu Kolonlar(Multiple Column), Izgara Yerleşim Modeli(Grid Layout), Şablon Yerleşim Modeli(Template Layout Model), CSS Exclusions Module, CSS regions Module

CSS3 ile sayfa yerleşimi daha kolay olacağı kesin, bu konuda bir çok modül üzerinde çalışma bitmek üzere veya bitmiş bulunmakta. Gelecekte daha güzel şeyler olacağı kesin.

Yukarıda özelliklerin nasıl kullanıldığını göstermek için daha basit örneklerler verdik, daha karmaşık örneklerde yapılabilir http://oli.jp/2011/css3-flexbox/ sitesindeki örnekler incelenebilir.  

Kalın sağlıcakla

Kaynaklar

CSS3 box-sizing Özelliği

Eylül 13th, 2011 • CSS
Etiketler: , , , ,

Daha önce CSS ile Kutu modeli, sorunları ve çözümleri adlı makalede de yazdığımız gibi yeni nesil tarayıcılar ve ie’nin garip(quirk) modundaki kabul farklı idi. Bu genelde hep ie’nin bir sorunu olarak görülse de aslında bir kabul idi ve genelden ayrıldığı için ie’nin bir sorunu olarak tanımlanıyordu. İşin aslında her iki kabulde kendince mantıklı idi.

“W3C’ye göre genişlik(ve yükseklik) değeri içerik alanı değeridir. padding ve border değerleri buna ek olarak toplam kutu genişliğine eklenir. Eğer toplam kutu değeri eklenecekse içerik alanı ve etrafındaki padding ve border değerleri toplamıdır.

Buraya kadar çok güzel ancak tüm web tarayıcıları bu durumu aynı şekilde yorumlamaz. IE’un IE6/strict’den önceki versiyonları yukarıda anlattığımız standart yorumun dışına çıkar, genişlik veya yükseklik değeri tüm kutu model element değerini ifade eder. Yani tüm padding ve border değerlerini içerir kalan kısmıda içerik alanı değeri olarak belirlenir.”

W3C bu durum için bu kabulü bir özelliğe atadı ve bize seçme imkanı tanıdı. Artık biz kutu modelinin nasıl davranacağını seçebileceğiz.

Yapısı : box-sizing: <deger>
Aldığı Değerler : content-box | border-box
Başlangıç değeri: content-box
Uygulanabilen elementler: Tüm Elemanlara
Kalıtsallık: Yok

box-sizing özelliği bize kutunun genişliğinin border ve padding değerlerinin içerip içermemesi gerektiğini tanımlama imkanı sağlıyor. İki adet değeri var

  • content-box: Normal kabul halidir. Genişlik veya yükseklik değeri içerik alanını içerir; border ve padding değerlerini içermez.
  • border-box: IE kutu kabulü diyede adlandırabileceğimiz değer. Genişlik veya yükseklik değeri padding ve border değerlerinide içerir. 
#kutu{
  display:block;
  border:10px solid #069;
  padding:20px;
  width:200px;
  height:200px;
  background:#CCC;
}

Başlangıç değeri content-box’dır. Kutu genişliği 10px + 20px + 200 + 20 + 10px = 260px olacaktır.

Farklı tarayıcılar önek ile destek sağlamaktadır. Firefox(-moz-), Chrome(-webkit-) ve Safari (-webkit-) Yukarıdaki koda box-border tanımı yapıldığında

#kutu{
  display:block;
  border:10px solid #069;
  padding:20px; width:200px;
  height:200px;
  background:#CCC;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:box-border;
}

Kutunun genişlik değeri 200px olacaktır. İçerik alanı genişlik değeri ise 140px olacaktır.

Her iki değerin kullanılabileceği yerler vardır. border-box tanımının esnek yapılı alanlarda bize avantaj sağlayacağı kesindir. 

.kutuSol{
 float: left;
 width: 30%;
 background-color: pink;
 border: 3px red dotted;
 height: 150px;
}
.kutuSag{
 float: left;
 background-color: lightgreen;
 width: 70%;
 border: 3px green dotted;
 height: 150px;
}

Esnek yapılı bir içerikte genişlik tanımlarımızı yüzde olarak verdiğimizde ve de padding ve border tanımı yaptığımızda kutularımızın genişliği toplamı %100 olmasına rağmen padding ve border değerleri nedeni ile kapsayıcı eleman içine sığmayacaktır. Burada genişlik değerini padding ve border değerlerini çıkarıp hesaplama imkanımızda yoktur. En azından calc() özelliği tam desteklenene kadar yoktur.

Çözüm olarak box-border tanımı ile sorunumuza çözüm üretebiliriz. 

.kutuSol{
 float: left;
 width: 30%;
 background-color: pink;
 border: 3px red dotted;
 height: 150px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:box-border;
}
.kutuSag{
 float: left;
 background-color: lightgreen;
 width: 70%;
 border: 3px green dotted;
 height: 150px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:box-border
}

Farklı araçlar ile web sayfaları gezilmeye başlayalı beri esnek yapılı sayfalar revaçtadır. Websitelerimizi artık daha esnek planlamak zorunda kalacağız. Bu durumda bu özellik bize çok büyük yararlar sağlayacaktır.

Tarayıcı Destekleme Listesi
Firefox 1+ (-moz- ön eki ile)
Chrome 1+ (-webkit- ön eki ile)
Safari 3+ (-webkit- ön eki ile)
Opera 7+
İnternet Explorer 8+
Mobil Tarayıcılar
iOS Safari 3.2+ (-webkit- ön eki ile)
Opera Mini 5+
Opera Mobile10+
Android Browser 2.1+ (-webkit- ön eki ile)

Trayaıcı destek listesinde görüldüğü gibi sorun sadece ie7 sürümü ve aşağısında yaşanmaktadır.

ie7 için http://webfx.eae.net/dhtml/boxsizing/implementation.html sitesindeki script ile çözüm üretilebilir.

Daha basit bir çözüm olarak ie7 için padding değerleri % cinsinden verilebilir. Ayrıca html doküman garip modda kullanılır. Graip mod çözümü pek mantıklı değilsede bazı durumlarda başvurulabilir.

Kalın sağlıcakla

Kaynaklar

CSS3 calc() değeri

Eylül 9th, 2011 • 12 yorum CSS
Etiketler: , , ,

Firefox’un CSS3 içine eklediği bir değer olarak eklendi. İnternet Explorer 9 desteği ile genelleşen bir değer oldu. Çok kullanışlı bir değer olacağı şimdiden belli olan bu özelliği webkit ve opera’nında desteklemesini bekliyoruz.

CSS değerleri listesine yeni ve fonsiyornel bir ekleme olacaktır calc(). Hesap Makinesi(Calculator) kelimesinden türetilen bu değer sayesinde css özelliklerine atanan değerlerde hesaplama yapabileme imkanı sağlayacaktır.

Toplama(+), çıkarma(-), çarpma(*), bölme(/) ve modül(mod) kullanma imkanı sağlıyor.

Daha önce yaşadığımız bir çok sorunun üstesinden bu değer sayesinde geleceğiz.

Genelde esnek yapılı alanlar ve sayfa düzeni oluştururken göreceli değer ve sabit margin, padding ve border tanımları ile sorun yaşarız. 

#sagKolon{
  width:calc(300px - 1em);
  width:-moz-calc(300px - 1em);
  float:left;
  background-color:#CC9933;
}

Firefox önek(-moz-) ile bu değeri desteklerken İnternet Explorer standartlardaki şekli destekler.

Örneğinde görüldüğü gibi calc() bu tip sorunlarımızın ilacı olacaktır.

Birden fazla işlem içinde kullanıma izin vardır. 

div {
    width: calc(100% - 20px + 2px*2);
}

İşlem sırası matematik ve javascriptten bildiğimiz gibi çarpma, bölme, mod, toplama , çıkarma sıralaması ile olur. 

p {
    margin: calc(1rem - 2px) calc(1rem - 1px)
}

şeklinde margin üst/alt ve sağ/sol tanımları yapılabilir.

Tarayıcı Desteği

Baştada belirttiğimiz gibi şu an sadece Firefox4 ve İnternet Explorer 9 ve üstü sürümleri destek sağlıyor. Microsoft’tan böyle bir destek beklemiyordum açıkçası. Webkit ve Opera desteğini en yakın zamanda bekliyorum.

http://www.webkit.org/blog/1804/last-week-in-webkit-calculated-css-values-and-the-translate-attribute/ webkit tabanlı tarayıcılarda calc() değerini destekliyor artık. 20 Şubat 2012

Kaynaklar

CSS3 Çoklu Kolonlar

Eylül 8th, 2011 • 1 yorum CSS
Etiketler: , , , , , , , , ,

Ç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ı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 3+
Opera 11.1+
İnternet Explorer 10+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini desteklemiyor
Opera Mobile11.1+
Android Browser 2.1+

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ı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 3+
Opera 11.1+
İnternet Explorer 10+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini desteklemiyor
Opera Mobile11.1+
Android Browser 2.1+

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ı Destekleme Listesi
Firefox desteklemiyor
Chrome (-webkit- öneki ile)
Safari (-webkit- öneki ile)
Opera 11.1+
İnternet Explorer 10+

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ı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 3+
Opera 11.1+
İnternet Explorer 10+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini desteklemiyor
Opera Mobile11.1+
Android Browser 2.1+

column-rule

column-rule ile kolonlar arasına çizgi atabiliyoruz. border tanımı ile benzer bir yapısı var. column-rule-size, column-rule-style ve column-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ı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 3+
Opera 11.1+
İnternet Explorer 10+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini desteklemiyor
Opera Mobile11.1+
Android Browser 2.1+

break-before, break-after ve break-inside

Eleman akışını kesmek gerektiğin kullanmak için break-before, break-after ve break-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-after ve -webkit-column-break-inside olarak desteklemektedir.

Tarayıcı Destekleme Listesi
Firefox desteklemiyor
Chrome (-webkit- öneki ile)
Safari (-webkit- öneki ile)
Opera 11.1+ (gerçekleyemedim)
İnternet Explorer 10+ (gerçekleyemedim)

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ı Destekleme Listesi
Firefox desteklemiyor
Chrome (-webkit- öneki ile) kısmen
Safari (-webkit- öneki ile) kısmen
Opera 11.1+
İnternet Explorer 10+

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ı Destekleme Listesi
Firefox desteklemiyor
Chrome (-webkit- öneki ile)
Safari (-webkit- öneki ile)
Opera 11.1+
İnternet Explorer 10+

İ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

İE7 Bitişik Kardeş Seçicisi Sorunu

Eylül 6th, 2011 • 1 yorum CSS
Etiketler: , ,

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üm ie6 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

« Önceki Yazılar

Sonraki yazılar »

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.