Benzer bir uygulamayı yapmak için kodları yazdım. Daha önce bahsettiğim rgba tanımı ile bu iş çok basit olacaktı.

#popup{
  position:absolute;
  top:90px;
  left:40%;
  border:10px solid rgba(0,0,0, 0.5);
  text-align:center;
  font-size:24px;
  background-color:#FFFFFF;
  width:350px;
  padding:50px 0;
  border-radius:10px;
  z-index:100;
}

Ancak aşağıdaki gibi bir görüntü elde ettim.

Çözümü biraz araştırdım ancak pek bir şey bulamadım derken css-tricks’in çözümü bana ilaç gibi geldi. Çözüm background-clip özelliği tanımı ile sağlanıyor.

#popup{
  position:absolute;
  top:90px;
  left:40%;
  border:10px solid rgba(0,0,0, 0.5);
  text-align:center;
  font-size:24px;
  background-color:#FFFFFF;
  width:350px;
  padding:50px 0;
  border-radius:10px;
  z-index:100;
  -moz-background-clip: padding;     /* Firefox 3.6 */
  -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
  background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

Kaynak

• http://css-tricks.com/transparent-borders-with-background-clip/

Farenin işlevini yerine getirip getirmeyeceğini belirlemek için kullanılır. Örneğin bir menüde mevcut sayfayı gösteren menü elemanının tıklanma olayını kaldırabiliriz.

pointer-event özelliği belirlenen elemanın farenin işlevine vereceği tepkiyi belirler. Bu tepki aşağıdaki çerçevededir.

• Kullanıcı arayüzü olayları (örneğin fare tıklaması)
• Dinamik Sahte Sınıflar (örneğin :hover, :focus)
• Hiperlinkler

pointer event özelliği aslında SVG içerikleri için uygulanan bir özelliktir.

Aldığı değerler bakalım;

auto: pointer-events özelliğine herhangi bir tanım yapılmadı ise fare tıklamasına müdahale etmez. SVG içeriklerde, bu değer visiblePainted ile aynı etkiyi yapar.

none: Element fare olaylarını uygulamayacaktır.

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke ve all: Sadece SVG içindir.

Bir örnek ile durumu daha iyi görelim.

• <ul class="menu">
• <li><a href="index.html">Ana Sayfa</a></li>
• <li><a href="hakkimizda.html" class=”on”>Hakkımızda</a></li>
• <li><a href="urunler.html">Ürünler</a></li>
• </ul>

Hakkımızda sayfasında olduğumuzda kullanıcının hakkımızda linkine tıklaması mantıklı değildir, hakkımızda bağlantısının fare tıklama olayını kaldırmak için

• .menu a.on {
•       pointer-events: none;
•       cursor: default;
• }

Tanımı istediğimiz sonucu verecektir.

CSS3 ile dinamik bileşenlerin CSS ile halledilmesi işine alıştık. Bu tip CSS ile halledebilmemiz güzel.

Kaynaklar

• https://developer.mozilla.org/en/CSS/pointer-events
• http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
• http://robertnyman.com/css3/pointer-events/pointer-events.html
• http://css-tricks.com/6379-pointer-events-current-nav/
• http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
• http://www.webkit.org/specs/PointerEventsProperty.html

İlk olarak background-origin özelliğini inceleyerek başlayalım.

background-origin

background-image konumunu hesaplamada elementin kutusunun sınırlarını belirler. CSS3’den önce bu sabit bir değer olarak padding-box idi. Bu özellik bize farklı konumlandırma imkanı sağlar.

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

Aldığı değerleri kısaca açıklarsak

• border-box: background-image konumu border alanından başlar
• padding-box: background-image konumu padding alanından başlar
• content-box: background-image konumu içerik alanından başlar

#kutu1 {
    -moz-background-origin: border;
    -webkit-background-origin: border;
    -webkit-background-origin: border-box;
    background-origin: border-box;
}
#kutu2 {
    -moz-background-origin: padding;
    -webkit-background-origin: padding;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
}
#kutu3 {
    -moz-background-origin: content;
    -webkit-background-origin: content;
    -webkit-background-origin: content-box;
    background-origin: content-box;
}

background-position:fixed tanımlı elementlere etki etmez.

Tarayıcı Destekleme Listesi
Firefox 3.6+ (-moz- öneki ile) 4+ (öneksiz)
Chrome 1+ (-webkit- öneki ile)
Safari 3.0+ (-webkit- öneki ile)
Opera 10.5
İnternet Explorer 9+

background-clip

background-clip ardalanın nerede gösterileceğini tanımlar. Daha önce padding dahil içerik alanı sabit olarak geliyordu, artık border alanıda dahil edilebiliyor veya padding alanı kapsamdan çıkarılabiliyor

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

Aldığı değerleri kısaca açıklarsak

• border-box: Ardalan içerik alanı + padding alanı + border alanını kapsar.
• padding-box: Ardalan içerik alanı + padding alanını kapsar
• content-box: Ardalan sadece içerik alanını kapsar.

border-box tanımı eğer background-origin:border-box ise uygulanır.

#kutu1{
 -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 background-origin: border-box;
 -moz-background-clip:border;
 -webkit-background-clip:border;
 -webkit-background-clip:border-box;
 background-clip:border-box;
}
#kutu2{
 -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 -moz-background-clip:padding;
 -webkit-background-clip:padding;
 -webkit-background-clip:padding-box;
 background-clip:padding-box;
}
#kutu3{
      -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 -moz-background-clip:content;
 -webkit-background-clip:content;
 -webkit-background-clip:content-box;
 background-clip:content-box;
}

background-origin:border-box olarak tanımladığımızda background-clip özelliğini daha iyi anlarız. Her üç kutudaki farkları gördüğünüz gibi. Resim sırası ile border, padding ve içerik alanından kırpılmıştır.

Tarayıcı Destekleme Listesi
Firefox 3.6+ (-moz- öneki ile) 4+ (öneksiz)
Chrome 1+ (-webkit- öneki ile)
Safari 3.0+ (-webkit- öneki ile)
Opera 10.5
İnternet Explorer 9+

backgroun-origin özelliği background-image konumunun kapsama alanını belirlerken, background-clip ise background alanını kırpmak için kullanılır. background-origin sadece ardalan resmini etkilerken background-clip ardalan resmi ve ardalan renginide etkiler.

Bu özellikleri destekleyen farklı tarayıcılar için önek ile çözüm üretilir. Diğer önek uygulamalarında farklı olarak bu özelliklerin değerlerinde de tarayıcı sürümleri arasında farklılıklar vardır. Firefox ve Webkit’in eski sürümlerinde değer olarak border, content ve padding değerlerini desteklerken son çıkan sürümler standartlaşan content-box, border-box ve padding-box değerlerini desteklemektedirler.

background-clip: text Değeri

Webkit tabanlı tarayıcılarda diğerlerinden farklı olarak text değeride vardır. Henüz standartlarda bulunmayan bu değeri sadece webkit kullanan Chrome ve Safari desteklemektedir. Bu değer atandığında metinin ardalanına resim uygulanıyor geri kalan kısımlara ise saydam ardalan olarak kalıyor.

#kutu1 {
   -moz-background-origin: border;
   -webkit-background-origin: border;
   -webkit-background-origin: border-box;
   background-origin: border-box;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font:bold 72px Arial, Helvetica, sans-serif;
}

-webkit-text-fill-color:transparent ile metnin ardalanını saydamlaştırıyoruz ve elemanın ardalanındaki resmi gösteriyoruz. Çok güzel görsel çalışmaları bu şekilde yapabiliriz, ancak henüz sadece Chrome ve Safari desteklediği için pek kullanışlı değil.

Kaynaklar

• http://www.css3.info/preview/background-origin-and-background-clip/
• http://www.w3.org/TR/css3-background/
• http://www.quirksmode.org/css/background.html
• http://www.w3schools.com/cssref/css3_pr_background-clip.asp
• http://www.standardista.com/css3/css3-background-properties/
• http://css-tricks.com/7423-transparent-borders-with-background-clip/
• https://developer.mozilla.org/en/CSS/background-clip
• https://developer.mozilla.org/en/CSS/background-origin
• http://dev.opera.com/articles/view/css3-border-background-boxshadow/
• http://www.sitepoint.com/new-properties-and-values-in-backgrounds-with-css3/
• http://www.css3.info/webkit-introduces-background-cliptext/  (text)
• http://www.cssreset.com/2010/css-tutorials/fun-with-webkit-background-clip-and-font-face/ (text)
• http://www.webkit.org/blog/164/background-clip-text/ (text)
• http://www.impressivewebs.com/background-clip-css3/ (güzel)
• http://css-class.com/test/css/backgrounds/background-origin1.htm
• http://css-infos.net/property/background-origin
• https://www.youtube.com/watch?v=7xVS2FX2Mao&feature=related (video)

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

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

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

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

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

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

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.

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

• http://www.html5rocks.com/en/tutorials/flexbox/quick/ (güzel)
• http://www.css3.info/introducing-the-flexible-box-layout-module/
• http://www.w3.org/TR/css3-flexbox/
• http://dev.w3.org/csswg/css3-flexbox/
• http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/
• http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/
• http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
• http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/
• http://ie.microsoft.com/testdrive/html5/flexin/default.html
• http://htmlrockstars.com/blog/the-flexible-box-layout-module-css3/
• http://blog.w3conversions.com/2011/02/css3-flexible-box-model-layout-coolness-also-oddities-confusion/
• http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained
• http://adactio.com/journal/4778/
• http://www.vanseodesign.com/css/flexbox/ (güzel)
• http://oli.jp/2011/css3-flexbox/ (karmaşık yerleşim uygulamalı)
• http://blog.isotoma.com/2010/08/css3-flexbox/
• http://www.w3schools.com/css3/css3_reference.asp#box
• http://portfo.li/madebyted/477862-css3-flexible-box-layout-module-aka-flex-box-introduction-and-demos-test-cases
• http://ontwik.com/css/css-3-the-flexible-box-model/ (video)
• http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSFlexBox (güzel)
• http://caniuse.com/flexbox (tarayıcı desteği)
• http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

“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.

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.

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

• http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/ (güzel)
• http://caniuse.com/css3-boxsizing (tarayıcı destek listesi)
• http://helephant.com/2008/10/20/css3-box-sizing-attribute/ (güzel)
• http://aninnovativeweb.tumblr.com/post/770432002/understanding-css3-box-sizing
• http://www.w3.org/TR/css3-ui/#box-sizing
• http://www.goldentwine.com/blog/css3-user-interface-box-sizing
• http://csshead.com/controlling-width-with-css3-box-sizing/
• http://css-tricks.com/7323-box-sizing/
• https://www.youtube.com/watch?v=rNqqfMJnpKY&feature=related (video)
• http://maymay.net/blog/2004/10/28/observations-on-the-css3-box-sizing-property-and-how-designers-use-style-sheets/
• http://www.w3cplus.com/content/css3-box-sizing (çince)

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.

Kaynaklar

• http://webdesignernotebook.com/css/the-wonderful-calc-function/
• http://hacks.mozilla.org/2010/06/css3-calc/
• http://msdn.microsoft.com/en-us/library/ms537660(v=vs.85).aspx (ie9 destekliyor)
• https://developer.mozilla.org/en/CSS/-moz-calc
• http://caniuse.com/calc (destek listesi)
• http://mynthon.net/howto/-/webdev/css3-testsuite-calc-property-for-calculating-size.txt (örnek)
• http://bloqk.com/makale/css_calc_kullanimi.html
• http://www.thecssninja.com/demo/css_calc/ (örnek)
• http://www.sitepoint.com/css3-calc-function

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.

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;       
  }

columns

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

  div {columns: 200px 5;}

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ı.

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.

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.

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)

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.

İ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

• Column Script from Michael van Ouwerkerk
• The Script from CSS Scripting
• Multi Column Layout Demonstration from CSS Scripting
• Multi-column layout with CSS3 (and some JavaScript)

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

• http://www.w3.org/TR/css3-multicol/
• http://www.alistapart.com/articles/css3multicolumn
• http://www.vanseodesign.com/css/multi-columns/ (güzel)
• http://css-tricks.com/snippets/css/multiple-columns/ (basit)
• http://www.zenelements.com/blog/css3-multiple-columns/ (basit)
• http://www.css3.info/preview/multi-column-layout/
• http://www.quirksmode.org/css/multicolumn.html
• http://webdesignernotebook.com/css/remembering-the-css3-multi-column-layout-module/
• http://trentwalton.com/2010/07/19/css3-multi-column-layout-column-count/ (örnek)
• http://css-tricks.com/13372-seamless-responsive-photo-grid/ (örnek)
• http://designshack.co.uk/articles/introduction-to-css3-part-5-multiple-columns (güzel)
• http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/ (güzel)
• http://dev.opera.com/articles/view/css3-multi-column-layout/ (güzel)
• http://www.my-html-codes.com/css3-multiple-columns (orta)
• http://www.456bereastreet.com/archive/200509/css3_multicolumn_layout_considered_harmful/ (basit)
• https://developer.mozilla.org/en/CSS3_Columns (basit)
• http://www.red-team-design.com/multi-column-text-using-css3 (örnekli)
• http://www.stuffandnonsense.co.uk/archives/css3_multi-column_thriller.html
• http://www.superiorwebsys.com/blog/20/Creating_A_Multi-Column_Layout_Using_CSS3/ (görsel)
• http://caniuse.com/multicolumn (tarayıcı destek)
• http://people.opera.com/pepelsbey/experiments/multicol/ (güzel örnek)
• http://people.opera.com/zibin/multicol/index.html (güzel örnek)
• http://www.juude.info/css-columns.php (güzel)
• http://www.csscripting.com/css-multi-column/ (js ile çözüm)
• http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/ (sorunları)
• http://help.dottoro.com/lcxquvkf.php

• CSS3 Özellik Seçicileri
• Belirlenen Sözdizimi ile Başlayan Özellik Değer Seçicisi
• Belirlenen Sözdizimi ile Biten Özellik Değer Seçicisi
• İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi
• Çoklu Özellik Seçicisi Kullanımı
• Genel Kardeş Seçicisi
• :target Sözde Seçisi
• Form Elemanları Durumları Sözde Sınıfları
• :disabled
• :enabled
• :checked
• CSS3 Sözde Seçicileri
• Yapısal Sözde Seçiciler
• :root Sözde Sınıfı
• :nth-child() sözde sınıfı
• :nth-last-child() sözde sınıfı
• :nth-of-type() sözde sınıfı
• :nth-last-of-type() sözde sınıfı
• :last-child sözde sınıfı
• :first-of-type sözde sınıfı
• :last-of-type sözde sınıfı
• :only-child sözde sınıfı
• :only-of-type sözde sınıfı
• :empty sözde sınıfı
• Olumsuz(:not) Sözde SınıfıSözde Sınıf
• ::selection sözde sınıf

Özellik Seçicileri

CSS3 ile birlikte 3 yeni özellik seçicisi gelmektedir.

CSS2 ile birlikte gelen özellik seçicileri daha genel seçicilerken CSS3 ile birlikte daha özel seçimler yapabilmemizi sağlayan özellik seçicileri geldi.

Belirlenen Sözdizimi ile Başlayan Özellik Değer Seçicisi

Tüm sözdizimi yerine …ile başlayan elemanı seçmek için kullanılır. Belirtilen sözdizimi ile başlayan elemanlar seçilir. (^) şapka işareti ile kullanılır.

Bu tanımlama ile belirtilen sözdizimi ile başlayan özellik değerini arıyor ve uyguluyor.

This is a sample <a href="http://www.bloggermint.com">hyperlink</a>.
This is a sample <a href="mailto:bloggermint@gmail.com">bloggermint@gmail.com</a>.
This is a sample <a href="ftp://bloggermint.com">FTP Server</a>.

a[href^='http'] {
    background: url(images/link.png) no-repeat left;
    padding-left:20px;
}
a[href^='mailto'] {
    background: url(images/email.png) no-repeat left;
    padding-left:20px;
}
a[href^='ftp'] {
    background: url(images/folder.png) no-repeat left;
    padding-left:20px;
}

Şeklinde link başlangıç değerine göre ikon atayabiliriz.

Belirlenen Sözdizimi ile Biten Özellik Değer Seçicisi

Belirlenen sözdizimi ile biten elemanları seçmek için kullanılır. Başlangıç sözdizimi ile seçme ile aynı şekilde çalışır. Seçici işareti olarak $(dolar) işareti kullanılır.

Bu seçiciyi kullanarak dokümanlara verilen linklerin başına kolayca ikon ekleyebiliriz.

a[href$='.pdf'] { background-image: url('pdf.png'); }
a[href$='.doc'] { background-image: url('word.png'); }
a[href$='.rss'] { background-image: url('feed.png'); }

İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi

Belirlenen sözdizimi özellik değerinde geçen elemanları seçmek için kullanılır. Seçici işareti olarak * (yıldız) işareti kullanılır.

Birçok yerde kullanılabilecek geniş kapsamlı bir kullanımı olan bir seçicidir.

  a[title*='im'] {}

Sadece bir kısmı ile elemanı seçebilme imkanı sağlıyor. CSS2’dekinden farklı olarak.

Çoklu Özellik Seçicisi Kullanımı

Özellik seçicileri birlikte kullanma imkanımızda vardır. Birden fazla seçici ile seçimi daraltabiliriz.

  p[class=highlight] a[title~=important] {
  background : #ffffcc;
  }

Daha fazla özellik seçicisinide birleştirebiliriz.

  a[href^='http://'][href*='/folder2/'][href$='.pdf'] {
  background:url(pdf.gif) 0 0 no-repeat;
  }

CSS3 ile gelen özellik seçicilerinin bir avantajıda ie7’ninde bu seçicileri destekliyor olmasıdır.

Genel Kardeş Seçicisi

CSS2.1 ile birlikte gelen bitiş kardeş seçicilerine benzer bir seçicidir. Bitişik şardeş seçicisine göre daha seçici ve kullanışlı bir seçicidir. Aynı kapsayıcıya sahip elemanların belirtilen elemandan sonraki aynı seviyedeki elemanların tümünü yakalamak için kullanılır. Burada dikkat edilmesi gereken konu belirtilen elemandan sonraki aynı seviyedeki elemanları seçiyor olması. Tanımlama yaparken araya işaret olarak tilde(~) koyuyoruz.

Bir örnek yapacak olursak bir resmimiz var bunu sola hizalayacağız ve sağdanda metinler akacak. Bu resim ve paragraflar arasına padding tanımlamak için genel kardeş seçicisi birebirdir.

img{
   float:left;
}
img ~ p{
   padding-left:110px;
}

html kodu

<img src="kedi.jpg" width="96" height="96" alt="kedi" />
<p>Kedi (Felis catus),...</p>
<p>2,5 ile 12 kilo ...</p>
<p>Kediler hoş görünüşlü, ..</p>

Bu seçiciyi ie7’nin seçicisini destekliyor.

:target Sözde Sınıfı

“:target seçicisi CSS3 ile birlikte gelen yeni seçilerden biri. :target seçicisi doküman içi linklere odaklanmamızı sağlıyor. Daha önce bu işi yapmak için javascript ile yapıyorduk. CSS3’ün bizlere kazandırdığı birçok yenilikte olduğu gibi bu özellikte basit bir şekilde sayfalarımıza güzel etkiler kazandırır. :target sözde sınıfı :hover seçicisi gibi dinamik bir seçicidir.”

Şeklinde tanımladık. Bu konu hakkında daha önce bir makale yazmıştım detayına oradan bakabilirsiniz.

Form Elemanları Durumları Sözde Sınıfları

Form elemanlarının çeşitli durumlarını seçebilmek için kullanılan sözde sınıflardır. Kullanıcıların bu durumları ayırt etmeleri için sınıf tanımlayıp ona göre css ile görselliğini değiştirerek kodlamamızı yapıyorduk. CSS3 ile birlikte daha kolay bir seçim ve sonuç elde edebiliriz. 3 adet durum söz konusu

• :disabled
• :enabled
• :checked

Form elemanlarında bu durumlar HTML olarak

    <textarea disabled="disabled"></textarea>
    <input checked="checked" type="checkbox">

şekilde tanımlanır. Form elemanlarının bu durumlarını kullanıcıya yansıtmamız lazım. Bu sayede daha kullanıcı dostu formlar oluşturmuş olacağız.

:enabled {
   border: 2px solid #6374AB;
}

:disabled {
   border: 2px solid #00cc00;
}

:checked {
   display: inline-block;
   width: 4em;
}

HTML kodumuz

<form id="testForm">
   <input>
   <input type="checkbox">
   <input type="radio" name="test">
   <input type="radio" name="test">
   <input type="submit">
</form>

Basit bir örnek vermiş olsak dahi bu seçiciler ile neler yapabileceğimizi düşünmek bile sevindiriyor bizi. http://dev.opera.com/articles/view/styling-forms-with-attribute-selectors-1/ örneğe bir göz gezdirmek iyi olur.

Yapısal Sözde Sınıfları

“Sözde sınıf ve sözde elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Sözde sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Sözde elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.)”

Şeklinde tanımladığımız sözde sınıf ve sözde elementlere CSS3 ile birlikte çok etkili yeni seçiciler eklendi. Başta söylediğim gibi CSS seçicileri CSS’in en önemli öğeleridir. CSS seçicileri ne kadar gelişirse biz kod yazarken o kadar rahat ederiz.

:nth-child() sözde sınıfı

:nth seçicileri belirlenen elemanın aynı seviyesindeki önemli sıradaki elemanlarını seçmek için kullanılır. Sıralamayı belirleyen numaralar parantez içinde tanımlanır; rakam, belirli kelimeler ve formül tanımlanabilir.

Rakama bir örnek verecek olursak, 3. sıradaki elemanı yakalamak için

  p:nth-child(3) { color:#f00; }

Belirli kelimelere bir örnek verecek olacaksak; odd(çift) ve even(tek) kelimelerinin kullanımı ile seçme işlemini gösterebiliriz. Zebra tablolardan hatırladığımız çift, tek satırlara tanımlama yapmak için kullanılabilir.

  tr:nth-child(odd) { color:#f00; }
  tr:nth-child(even) { color:#ff0; }

Formül için örnek verecek olursak; dinamik bir seçim oluşturmak için gayet iyi sonuçlar verecek bir özelliktir. Matematik derslerindende hatırladığımız (an + b) a ve b değişkenlerdir. Benzer formüller ile eleman seçebilme imkanı veriyor.

  p:nth-child(3n+0)
  {
      background:#ff0000;
  }

Bir tanım ile 3 katı olan elementleri yakalayabiliriz.

:nth-last-child() sözde sınıfı

:nth sözde sınıfına benzer bir kullanımım vardır. :nth sözde sınıfından farklı olarak sıralama olarak baştan değilde sondan başlayarak seçmemizi sağlar.

  tbody tr:nth-last-child(2)
  {
  background:#ff0000;
  }

Tanımı ile tbody içindeki sondan 2. sıradaki satırı yakalamamızı sağlar.

:nth-of-type() sözde sınıfı

:nth-of-type() sözde seçicisi :nth-child() seçicisine benzer şekilde çalışır, farklı olarak :nth-child() sözde seçicisi aynı seviyedeki tüm elemanları seçerken, :nth-of-type() sözde seçicisi sadece aynı tip elemanları seçer.

  p:nth-of-type(3) { background:#ff0; }

Örneğinde mesela paragraf elemanı ile aynı seviyedeki tüm paragrafları seçmemizi sağlar. Benzer şekilde :nth-child()  kullansa idik, aynı seviyedeki farklı tip elemanlarıda yakalamış olacaktık.

:nth-of-type() sözde seçicisi bize çok iyi seçme imkanları sağlayacaktır.

:nth-last-of-type() sözde sınıfı

:nth-last-of-type() sözde seçicisi :nth-of-type() ile aynı yapıda işler farklı olarak seçim sıralaması baştan sona doğru değilde sondan başa doğru aynı seviyedeki ve aynı tipteki elemanları seçmek için yapılır.

:nth-last-child() ile benzer şekilde çalışır, seçicilerin sayısı fazlada olsa aslında benzer özellikte çalışırlar, ancak bu ufak farklar bile bize çok büyük avantajlar sağlayacaktır.

  p:nth-last-of-type(2) { background:#ff0; }

Aynı seviyedeki paragrafların sondan ikincisini yakalar bu seçici

:last-child sözde sınıfı

:last-child sözde seçicisi aynı seviyedeki elemanların en sonuncusunu seçmek için kullanılır. fisrt-child ilk elemanı seçmemizi sağlarken :last-child son elemanı seçmemizi sağlar. Menü gibi yanyana dizdiğimiz elemanların sonuncusunu bulmak bizim her zaman işimize yarayacaktır. :nth-last-child(1) aynı işi görür.

  p:last-child { background:#ff0; }

Tanımı belirlenen paragraf ile aynı seviyedeki elemanların en sonuncusunu seçmemizi sağlar.

Mesela köşeleri oval bir menü yapımında çok işimize yarar bu seçici. Normal bir yatay menü örneğini ele alalım. Yanyana dizelim ve araya ayraç koyalım.

Sondaki kenar çizgisi fazlalığı kaldırmak için

  ul li:last-child a{
      border-right:none;
  }

kodu işimizi görecektir. Ayrıca ilk menü elemanı sol köşeleri ve son menü elemanının sağ köşeleri ovalleştirmek için;

ul li:last-child a{
    border-right:none;
    border-radius:0 15px 15px 0;
}

ul li:first-child a{
    border-radius:15px 0 0 15px;
}

Önceden bu işleri yapmak için javascript kullanmak zorunda idik. Şimdi CSS3 ile hepsini halledebiliyoruz. Süper değil mi?

:first-of-type sözde sınıfı

:first-of-type sözde seçicisi aynı seviyedeki ilk aynı tipteki elemanı seçmek için kullanılır. :nth-of-type(1) aynı işi görür.

  p:first-of-type { background:#ff0; }

Aynı seviyedeki ilk paragrafı seçmek için kullanılır.

:last-of-type sözde sınıfı

:last-of-type sözde seçicisi aynı seviyedeki en son aynı tipteki elemanı seçmek için kullanılır.  :nth-last-of-type(1) ile aynı işi görür.

  p:last-of-type { background:#ff0; }

Aynı seviyedeki paragrafların en sonuncusunu yakalar.

:only-child sözde sınıfı

:only-child sözde seçicisi sadece alt elemanlarını(çocuk) seçmek için kullanılır. Tam karşılığı olmasada :first-child:last-child veya :nth-child(1):nth-last-child(1) aynı işi yapar.

  p:only-child { background:#ff0; }

:only-of-type sözde sınıfı

:only-of-type sözde seçicisi aynı seviyedeki aynı tipteki elemanları seçmek için kullanılır. Tam karşılığı olmasada :first-of-type:last-of-type veya :nth-of-type(1):nth-last-of-type(1) aynı işi yapar.

  ul.deneme > li > a:only-of-type { background:#ff0; }

Aynı seviyedeki bağlantılara sarı ardalan rengi tanımlayacaktır.

:root Sözde Sınıfı

:root sözde sınıfı dokümanın kökünü temsil eder. HTML elemanlarda htlm{} ile aynı etkiyi yapar. buradaki asıl amaç xml ve diğer doküman tipleri için köke inebilmektir.

  :root { background:#ff0; }

HTML dokümanlarında ise html elemanını ezmek içinde kullanılabilir.

html{ background-color: #fff; }
html:root { background-color: #000; }

:empty sözde sınıfı

:empty sözde seçicisi alt elemanı(çocuk) olmayan elemanları yakalamak için kullanılır. Metinlerde buna dahildir.

<ul class="deneme">
    <li></li>
   <li><a href="">deneme</a></li>
   <li><strong></strong></li>
   <li><a href="">deneme</a>
       <ul>
           <li><a href="">deneme</a></li>
           <li><a href="">deneme</a></li>
       </ul>
   </li>
</ul>

CSS kodu

  ul.deneme > li:empty { background:#ff0; }

Yukarıdaki örnekte sadece ilk liste elemanı seçilecektir.

Olumsuz(:not) Sözde Sınıfı

Olumsuzluk belirtmek için kullanılan sözde sınıftır. :not(seçici) şeklinde kullanılır. Jquery’den alışık olduğumuz bir seçicidir.

<h1>Deneme</h1>
<h2>Alt Başlık</h2>
<p>İçerik...</p>
<p>İçerik...</p>
<p>İçerik...</p>
<blockquote>Dipnot</blockquote>

CSS kodu

  body :not(blockquote){ border:1px solid #ccc;}

kodu body içindeki tüm elemanlara kenar çizgisi ata, dipnot(blockquote) hariç şeklinde uygulanacaktır.

Çok kullanışlı bir seçicidir.

::selection Sözde Elementi

Daha önce görselliği dikkatimi çeken bu özelliği şimdi seçici bazlı bakacağız. Seçili alan seçicisi olarak tanımlayabileceğimiz bu özellik seçilen alana css tanımları atamamızı sağlamaktadır.

::-moz-selection {
   background:#c00;
   color:#fff;
}
::selection {
   background:#c00;
   color:#fff;
}

Ataması ile sitenin tümünde bir seçili alanları için bir tanımlama yapabiliriz.

::selection sözde elementine; color, background, cursor ve outline özellikleri tanımlanabiliyor.

Firefox için -moz ön eki kullanılması gerekiyor.

Kaynaklar

• http://www.w3.org/TR/css3-selectors/
• http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ (Detaylı)
• http://www.adobe.com/devnet/dreamweaver/articles/css-selectors-pt2.html (detaylı örnekli)
• http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
• http://tools.css3.info/selectors-test/test.html (test aracı)
• http://24ways.org/2009/cleaner-code-with-css3-selectors (örmeklerle açıklanmış)
• http://ie.microsoft.com/testdrive/HTML5/CSS3Selectors/Default.html
• http://www.w3schools.com/cssref/css_selectors.asp (seçici listesi)
• http://www.quirksmode.org/blog/archives/2010/06/ies_big_leap_fo.html
• http://www.quirksmode.org/css/contents.html (tarayıcı destek listesi)
• http://selectivizr.com/ (ie için çözüm)
• http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
• http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
• http://caniuse.com/css-sel3 (tarayıcı destek listesi)
• http://www.yourinspirationweb.com/en/why-you-should-know-the-new-css3-selectors/
• http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/ (:not seçicisi)
• http://dtsn.co.uk/2009/12/15/css3-selectors-last-child/ (:last-child seçicisi)
• http://perishablepress.com/awesome-new-css3-selectors/ (ilginç)
• http://developer.practicalecommerce.com/articles/2386-Taking-CSS3-Selectors-to-the-Nth (nth seçicisi)
• https://developer.mozilla.org/en/firefox_3.5_for_developers
• https://developer.mozilla.org/en/CSS/%3Achecked (:checked seçicisi)
• https://developer.mozilla.org/en/CSS/:nth-child
• https://developer.mozilla.org/en/CSS/:empty
• https://developer.mozilla.org/en/CSS/%3Adisabled
• No.Starch.The.Book.of.CSS3.Apr.2011
• http://blogs.msdn.com/b/ie/archive/2010/05/13/the-css-corner-css3-selectors.aspx
• http://eriwen.com/css/css-indirect-adjacent-combinator/
• http://msdn.microsoft.com/en-us/library/aa358824%28v=vs.85%29.aspx
• http://www.quirksmode.org/css/enabled.html

Herkesin istediği bir özellik olarak her çözünürlükte ve araçta uygun web siteleri üretmektir. Bunun için medya sorguları bize yardım sağlar.

Daha önce medya sorgularını yazıcıdan çıktı alırken web sitelerimizin çıktı almaya müsait hale getirmek için kullanmıştık. CSS3 ile birlikte medya sorgularında kullanabileceğimiz medya özellikleri eklendi.

Yeni nesil medya sorgularını Firefox, Webkit, Opera ve İnternet Explorer9’dan itibaren desteklemektedir. İnternet Explorer’un eski sürümler için javascript ile çözüm üretilir.

Daha önceki makalemde bahsettiğim gibi medya sorgularının en basit hali

<link rel="stylesheet" media="screen" href="ornek.css">

veya

@media ornek.css screen;

şeklindedir.

Medya sorguları bir veya daha fazla tipe göre sorgulama yapar ve sorgunun doğruluğuna göre o css dosyasını uygular.

Medya Tipleri

Mantıksal Operatörler

Medya sorgularımızda not, and ve only mantıksal operatörlerini kullanabiliriz.

and
İki veya daha fazla medya özelliğini birbirine bağlar. Sorgudaki tüm medya özelliklerinin doğru olması durumunda css dokümanın uygulanmasını sağlar. Örneğin (color) and (orientation: landscape) and (min-device-width: 800px) tanımı; Görüntüleyen aracın renkli, yatayda ve en az 800px genişliğinde ise css dokümanı uygulanır.

@media (min-width:450px) and (max-width:950px)

Bu durumda ise; genişliği en az 450px ve en fazla 950px olan araçlarda uygulanır.

not
Sorguya negatif ifade katar. Sonuç eğer doğru ise css dosyası uygulanmaz.

@media not screen and (color)

Bilgisayar ve renkli ekran olmayan durumlarda uygulanır.

only
Sadece bu şartlar geçerli olduğunda uygula anlamınadır.

@media only screen and  (color) {
    body {background:blue}
}

Sadece bilgisayar ve renkli ekranlar olduğunda css dokümanı uygulanır.

Yukarıdaki operatörlerde dikkat etti iseniz şöyle bir kural var. İlk parametre medya tipini gösteriyor sonra operatör ve ikinci parametre medya özelliği tanımlanıyor. Medya özellikleri parantez içinde tanımlanıyor.

@media screen and (ozellik:deger) { }

Birden fazla sorgu

Birden fazla medya tipi için virgül ile birden fazla sorgu yapabiliyoruz.

@import url(print-color.css) print and (color), projection and (color);

Sorgulardan biri geçerli ise print-color.css dokümanı uygulanır. Renkli yazıcı veya renkli projektörden birisi ile açılırsa print-color.css uygulanır.

Medya Özellikleri

Medya özellikleri web sitesini gösteren aracın bilgileri ile sorgu yapmamızı sağlayan özelliklerdir; boyutları, araç boyutları, çözünürlüğü ve daha fazlası. Bu özellikler sorgu ifadesi olarak kullanılır, eğer bu sorgu doğru ise, yani araç bu özelliğe sahip ise css dosyası gösterilir, değilse gösterilmez. Örneğin 480px genişlikteki ekranlar için bir tanım yapmış olalım, sonuçta 480px genişliğe sahip araçlarda görüntülenecektir.

Yukarıdaki örneklerde görüldüğü gibi medya sorgularında medya özellikleri parantez için tanımlanmaktadır. Genel kullanım;

@media media and (ozellik:deger) { }

Genelde kullanılan medya özelliklerini inceleyelim.

width, height, max-width, min-width, max-height ve min-height

Genişlik(width) değeri web sitesinin görüntüleyen aracın genişliğine göre tanım yapmamızı sağlar. Buradaki genişlik tarayıcının(kaydırma çubukları dahil) genişliğine eşittir.

@media screen and (width:480px) { }

Yukarıdaki tanım 480px genişlikte görüntülemede uygulanacaktır.

Genişlik tanımının ayrıca iki adet önekli kullanımlarıda mevcuttur. max- ve min- ön ekleri ile sabit bir değeri değilde belli bir değer aralığını kontrol edebilme imkanına sahibiz.

@media screen and (max-width:480px) { }

ve

@media screen and (min-width:680px) { }

İlk örnekte genişliği en fazla 480px olana kadar uygulanır, ikinci örnekte ise genişliği en az 680px olan tarayıcı genişliklerinde uygulanır. Bilgisayarımızda tarayıcı genişliği ile oynayarak bu örnekleri test edebiliriz.

Yükseklik değerleride(max-height ve min-height) benzer şekilde çalışır.

device-width, max-device-width, min-device-width, device-height, max-device-height ve min-device-height

Aygıt genişliği yukarıdaki genişlik gibi çalışır, ancak farklı olarak bu genişlik aygıtın genişliğini tanımlar. Genişlik değerinde olduğu gibi aygıt genişliği tanımlarındada max- ve min- ön ekleri vardır. Kullanımı benzerdir

@media media and (device-width:1024px) { }
@media media and (max-device-width:320px) { }
@media media and (min-device-width:800px) { }

Mobil araçlar için web sitesi geliştirirken bize çok yardımı dokunur bu özelliğin mesela iPhone için web sitemizi uyarlamak istediğimizde işimize yarar.

/* iphone */
@media screen and (max-device-width: 480px) {
	body {
		background: #f00;
	}
}

şeklinde iphone kullanıcılarını yakalayabiliriz. Bilgisayarımızda tarayıcı genişliği ile bu sonuca erişemeyiz. Örneği görmek için iphone simülatör veya gerçek iphone’da bu örneği test etmelisiniz.

Benzer şekilde device-height, max-device-height ve min-device-height özellikleride kullanılabilir.

orientation

Uyarlayacağımız aracın yatay veya dikey olması durumuna göre davranış sergileme imkanı veren medya özelliğidir.

Tablet bilgisayarlar için genelde tercih edilir. iPad için site geliştirirken dikkate almalıyız.

@media screen and (orientation: portrait) { }

İki değer almaktadır; landscape veya portrait. landscape değeri tarayıcınızın genişliği yüksekliğinden büyük ise uygulanır, portrait değeride tam tersi durumlarda.

Tarayıcınızın genişliği ile oynayarak sonucu görebilirsiniz. iPad’de daha çok yatay kullanımda daha geniş yer varken site tam gösterilirken dikey kullanımda gizlenmesi gibi durumlarda kullanılabilir. Hatta menü yatayda açık dikeyde bir butona tıklayınca açılır şekilde kodlanabilir.

aspect-ratio, min-aspect-ratio, max-aspect-ratio, device-aspect-ratio, min-device-aspect-ratio ve max-device-aspect-ratio

Belirli bir genişlik yükseklik oranı ile sorgu oluşturmamızı sağlar. Boyut tanımlarında olduğu gibi tarayıcı oranı ve araç oranı diye farklı kullanımları vardır. Benzer şekilde max- ve min- önekleri ile kullanımıda mevcuttur.

16:9 sinematik ekran oranı için bir sorgu oluşturulabilir. Üreticileri ürettiği farklı oranlar(16:10, 15:10 vb.) için sorgular oluşturulup bu araçlar için web sitesi yapmak daha kolay hale getirilebilir.

@media tv and (aspect-ratio:16/9) { }
@media tv and (device-aspect-ratio:16/9) { }

pixel-ratio

Piksel oranı üzerinden sorgular üretmemizi sağlayan medya özelliğidir. Masaüstü tarayıcılarda pek kullanılmasa da mobil araçlarda sıkça kullanılan büyütme işleminde resimlerde sorunlara neden olmaktadır. Bu sorunu çözmek için resimlerimizin iki farklı halini oluşturup yakınlaştırma yapıldığında daha yüksek piksel oranlarına sahip araçlarda daha büyüğünü göstererek resmin bozulma sorununu ortadan kaldırabiliriz.

Farklı tarayıcılarda farklı önek ile uygulanmaktadır. webkit için -webkit-device-pixel, max-webkit-device-pixel, min-webkit-device-pixel

Firefox için -moz-device-pixel-ratio, min–moz-device-pixel-ratio, max–moz-device-pixel-ratio şeklinde uygulanır.

div { background-image: url('image-dusuk.png'); }
	@media screen and (-webkit-min-device-pixel-ratio: 2) {
	background-image: url('image-yuksek.png');
	background-size: 100% 100%;
}

Şeklinde uygulanır. iPhone4 ile ön plana çıkan bu özellik yardımı ile iPhone4 ayrımıda yapılabilir.

/* iphone 4 */</li>
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	background-image:url(yuksek_cozunurluklu_resim.png);
}

Bu medya özelliklerinin dışında color, min-color, max-color, color-index, min-color-index, max-color-index, monochrome, min-monochrome, max-monochrome, resolution, min-resolution, max-resolution, scan, grid medya özellikleride vardır. Ayrıca Firefox mobile için tanımladığı kendine ait medya özellikleride bulunmaktadır. Bu medya özellikleri hakkındaki detaylı bilgiye https://developer.mozilla.org/en/CSS/media_queries sitesinden erişebilirsiniz.

Bu tabloya bakarak ie’nin önceki sürümleri için çözüm üretmeliyiz. Javascript yardımı ile yapılmış çeşitli yöntemler mevcut, ben jquery ile yapılan yöntemi çalıştırabildim açıkçası.

http://protofunc.com/scripts/jquery/mediaqueries/

Bu sitedeki scripti sitenize eklediğinizde ie’nin eski sürümleri ile olan sorununuz çözlüyor.

<link rel="stylesheet" type="text/css" href="ana.css" media="only screen and (max-width: 480px)" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.mediaqueries.js" type="text/javascript"></script>
<![endif]-->

IE9 öncesi tarayıcılar için böyle bir ekleme yaparak sorunu çözebiliriz.

Ayrıca sadece javascript ile ie’nin eski sürümleri için üretilen Javascript çözümlerini uyguladığımda çalışmadı bilemiyorum sorun bende mi ama olmadı.

Kaynaklar

• http://www.w3.org/TR/css3-mediaqueries/
• http://www.css3.info/modules/compatibility-table-media-queries/
• http://webdesignerwall.com/general/the-wall-is-redesigned (örnek uygulama)
• http://blog.bloop.co/the-practicalities-of-css-media-queries-lesso (avantaj ve dezavantajları)
• http://www.broken-links.com/2011/02/21/using-media-queries-in-the-real-world/ (ie için çözüm önerili)
• http://mediaqueri.es/ (örnekler içeriyor)
• http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries
• http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries
• http://webdesignerwall.com/tutorials/css3-media-queries
• https://developer.mozilla.org/en/CSS/media_queries
• http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
• http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
• http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html
• http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries
• http://www.alistapart.com/articles/responsive-web-design/
• http://reference.sitepoint.com/css/mediaqueries
• http://www.tristarwebdesign.co.uk/blog/website-design/css3-media-queries-responsive-web-design/
• http://www.maxdesign.com.au/articles/css3-media-queries/ (slayt gösterisi)
• http://msdn.microsoft.com/en-us/scriptjunkie/gg619395.aspx
• http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/
• http://code.google.com/p/css3-mediaqueries-js/ (ie eski sürümleri için js kodu)
• http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html (iphone 4 için )
• http://aralbalkan.com/3331 (iphone 4 için)
• http://css-tricks.com/6731-css-media-queries/
• http://colly.com/ (örnek site)
• http://www.opera.com/docs/specs/presto27/css/mediaqueries/ (Opera desteği)
• http://www.cloudfour.com/ipad-css/
• http://www.webkit.org/blog/55/high-dpi-web-sites/
• No Starch The Book of CSS3
• http://richardshepherd.com/css-media-queries-jquery/
• http://css.dzone.com/news/bulletproof-css3-media-queries
• http://tests.zerointerface.nl/css3-mediaqueries/ (test sitesi)
• http://www.sercaneraslan.com/css/index.php?page=medya_tipleri
• http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
• http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
• http://blogs.msdn.com/b/ie/archive/2011/01/12/the-css-corner-css3-media-queries.aspx

both: Her iki yöne boyutlandırmaya izin verir.
horizontal: yatayda boyutlandırmaya izin verir.
vertical: dikeyde boyutlandırmaya izin verir.
none: boyutlandırma seçeneğini kaldırır
inherit: kalıtsal olarak bu değeri üst elementten alır.

div{
overfloaw:auto; /* bu tanim gerekli */
resize:both;
}

overflow değeri scroll, auto veya hidden değerlerinde etki ederken overflow: visible tanımında ise etki yapmaz.

Bu özellik Chrome ve Safaride textarea alanları için otomatik gelmektedir. Tarayıcı bu eleman için bu değeri otomatik uygulamaktadır. Daha önce ipucu olarak yazdığım gibi bu otomatik tanımı css ile kaldırabiliyoruz.

Bir örnek yapalım

.icerik{
    box-shadow: rgb(136, 136, 136) 5px 5px 5px;
    border-radius: 5px;
    resize: both;
    overflow: auto;
    border: 1px solid #dedede;
    padding:10px;
    width: 300px;
    height: 200px;
}

Sadece bir yöne boyutlandırabiliyoruz

.siir{
    width: 170px;
    height: 200px;
    resize: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 25px;
    border: 1px solid #DDD;
    font-family: georgia, serif;
}

min-height ve min-width değerleri ile boyutlandırmanın minimum değerlerini belirleyebiliyoruz. Anı şekilde max-height ve max-width değerleri ile de maksimum değerleri belirlenebilir. Bu özelliklerle kullanıcının sayfa görünümünü bozmasını engelleyebiliriz.

.siir{
    width: 170px;
    height: 200px;
    resize: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 25px;
    border: 1px solid #DDD;
    font-family: georgia, serif;
    max-height: 650px;
    min-height: 200px;
}

Resimler için güzel bir uygulama olabilir.

.vasak{
	width: 200px;
	margin: 0 10px;
	height: 150px;
	resize: both;
	overflow: hidden;
	position: relative;
	padding: 15px;
	border: 1px solid #DDD;
}

.vasak img{
	width:100%;
	height:auto;
}

resize özelliği W3C Basic User Interface Module ile önerilen bir özelliğidir. Tarayıcıların destekleme durumuna göre ileride standartlaşıp standartlaşmayacağı belirlenecek bir özellik olarak görünse de Firefox desteği standartlaşması daha olasıdır.

Kaynaklar

• http://www.css3.info/preview/resize/
• http://www.impressivewebs.com/css3-resize/ (detaylı ve karşıt)
• http://www.w3schools.com/cssref/css3_pr_resize.asp
• http://www.w3.org/TR/css3-ui/
• http://www.cssplay.co.uk/menu/resize.html
• https://developer.mozilla.org/en/CSS/resize
• http://www.yousaytoo.com/the-css3-resize-property/784883
• http://robertnyman.com/css3/