İE7 Bitişik Kardeş Seçicisi Sorunu

6 Eyl

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

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

1 yorum

CSS3 Seçicileri

5 Eyl

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

CSS için seçiciler çok önemlidir. CSS3 ile birlikte gelen yeni seçiciler kodlama yaparken elimizi güçlendirecek cinsten. Javascript ile yaptığımız birçok işi css ile yapacağız bu sayede. CSS1de 5-6 seçici varken, CSS2 ile birlikte bu sayı 12’ye çıktı. CSS3 ile birlikte ise bu sayı 20’yi aştı. . İşte CSS3 ile gelen yeni seçiciler;

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

Tarayıcı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 2+
Opera 5+
İnternet Explorer 7+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini 5.0+
Opera Mobile10.0+
Android Browser 2.1+

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'); }
Tarayıcı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 2+
Opera 5+
İnternet Explorer 7+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini 5.0+
Opera Mobile10.0+
Android Browser 2.1+

İç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.

Tarayıcı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 2+
Opera 5+
İnternet Explorer 7+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini 5.0+
Opera Mobile10.0+
Android Browser 2.1+

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

Tarayıcı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 2+
Opera 5+
İnternet Explorer 7+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini 5.0+
Opera Mobile10.0+
Android Browser 2.1+

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.

Tarayıcı Destekleme Listesi
Firefox 1.5+
Chrome 2+
Safari 2+
Opera 5+
İnternet Explorer 7+
Mobil Tarayıcılar
iOS Safari 3.2+
Opera Mini 5.0+
Opera Mobile10.0+
Android Browser 2.1+

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

Tarayıcı Destekleme Listesi
Firefox 1+
Chrome 2+
Safari 3.1+
Opera 9.5+
İnternet Explorer 9+

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.

Tarayıcı Destekleme Listesi
Firefox 3+
Chrome 4+
Safari 4+
Opera 9.5+
İnternet Explorer 9+

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.

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

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

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

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

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

: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

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

: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?

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

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

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

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

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

: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; }
Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

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

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

: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; }
Tarayıcı Destekleme Listesi
Firefox 3+
Chrome 4+
Safari 4+
Opera 9.5+
İnternet Explorer 9+

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

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

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.

Tarayıcı Destekleme Listesi
Firefox 3.5+
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

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

Tarayıcı Destekleme Listesi
Firefox 3.5+ (-moz ön eki ile)
Chrome 4+
Safari 4+
Opera 10.10+
İnternet Explorer 9+

Kaynaklar

4 yorum

CSS 3 medya sorguları

2 Eyl

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

Mobil sektörün hızla ilerlemesi ve akıllı araçlar pazarının büyümesi ile insanlar mobil araçlar için ayrı web siteleri yapmaya başladı ve bu şekilde devam ediyor. Web sitesi olan bir şirketin mobil için ayrı bir site yapması gerek iş ve gerekse düzenleme açısından sorunları olan bir sistem.  Medya sorguları bu anlamda bir ihtiyaç için ortaya çıkmış bir özelliktir.

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

screen Bilgisayarda görüntüleme
tty Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntüleme
tv Televizyonda görüntüleme
projection Projeksiyonda görüntüleme
handheld Taşınabilir telefonlar ve PDA’ler
print Yazıcı çıktılarında görüntüleme
braille Braille dokunsal okuyucularda
all Tüm araçlarda görüntüleme
embossed Braille yazıcı çıktıları için
aural Ses sentez birimlerinde kullanılır

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.

Tarayıcı Desteği
Google Chrome 5+
Safari 3.2(kısmen) 4(tam)+
Firefox3.6+
Opera 10.6+
İnternet Explorer 9+
Mobil Tarayıcılar
Android 2.1+
Firefox mobile +
Opera Mini 5+
iOS 3.2+

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

1 yorum

IE6 Sonrası Kod Yazma Alışkanlıklarımızı Güncellemek

29 Ağu

Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.

Bir çok site İnternet Explorer6 desteği kaldırdı ve kaldırmak için son kullanma tarihi belirledi. Bunda tabi İnternet Explorer6 kullanan kullanıcı sayılarının yüzdesinin hızla düşmesi ve %2,5 seviyesine düşmesinin etkisi büyük. 27 ağustos 2001 tarihinde yayın hayatına başlayan ie6 tam 10 senedir web aleminin etkiliyor. %95’e varan oranlara kadar yükseldiği zamanlarda oldu, ancak en çok 4-5 senedir standartların gerisinde kalması nedeni ile eleştirilere hedef olması ile ün kazandı. Son günlerini yaşayan ie6 artık birçok site tarafından dikkate alınmıyor.

Peki ie6 hayatımızdan çıktı tamam kurtulduk demek ile hemen iş bitiyor mu? Hayır maalesef biz arayüz geliştiricilerinin 10 senedir hayatına dahil olan ie6 kodlama mantığımızın derinliklerine kadar işlemiş durumda. Biz test etmesekte kod yazarken hala ie6’yı bilemedende olsa düşünerek kod yazıyoruz. Bu makalemde neleri hala eskisi gibi düşünüyoruz, ie6 bize neleri yaptırdı ve artık bunları yapmamamız gerekiyoru yazmaya çalışacağım.

Benim kod yazarken dikkatimi çeken bir şey oldu. Biz bazı şeyleri otomatik yapıyoruz, bilmeden alışkanlık olarak, bazı şeyleri ise düşünüyoruz ve öyle uyguluyoruz. Bu kötü bir şey değil aksine güzel bir şey, her gülün dikeni olmak zorunda işte beynimizde düşünmeden yazdığımız bilinçaltı kodlama sayesinde biz daha hızlı kod yazıyoruz ve daha hızlı sonuç elde ediyoruz. Ancak bu bilinçaltı kodlama bazen bize dezavantajlarda sunuyor. Mesela 10 senedir uğraştığın ie6 gibi bir tarayıcıyı öldürdüğün halde hala ona göre kod yazmaya devam ediyor olmak gibi, hala ondan sonraki adımı bekletmek gibi.

Daha önce “Internet Explorer 6 olmasa hayat daha kolay ve zevkli olurdu” diye bir makale yazmıştım, bundan 2 sene önce. Tabi oradaki temenni bugün gerçeğe dönüştü. Artık tamamen yok sayabiliyoruz ie6’yı. Şimdi oradaki ve diğer avantajları görerek kod yazma mantığımızı güncellememiz gereken özellikleri sıralayacağım.

Saydam PNG

İnternet Explorer 7. sürümünden itibaren saydam png desteği sunmaya başladı. ie6 için ayrıca düzeltme kodu yazmak zorunda kalıyorduk. “Internet Explorer 6 için saydam PNG desteği” makalemde yazdığım yöntem ile ie6 desteği sağlamış oluyorduk. Bu yöntem ile bir çözüm üretiyorduk ama bu çözüm beraberinde bazı sorunlarıda getiriyordu. Uygulanan alan içindeki bağlantılar ve form elemanlarında ile sıkıntılar tam olarak çözülebilmiş değildi. Ayrıca ie6 için yazılan AlphaImageLoader resmin geç yüklenmesine ve fazla kaynak tüketmesine sebebiyet veriyordu. Sonradan sayfaya eklenen öğelerde sorunlar çıkarıyordu.

PNG formatı ie6’nın etkisi ile yeterince değer görmedi. Birçok yerde ie6’yı düşünerek saydam gifler kullandık, buda sitemizin görüntüsünde sevmediğimiz sonuçlara neden oldu. PNG bize hem gif hemde jpeg ve hemde saydamlık özelliği kazandırmaktadır. Tek dezavantaj olarak görünen kısmı saydam png boyutlarının eğer gerekli şartlar dikkate alınmazsa çok büyümesidir.

Biz sprite resimlerimizi ie’yı düşünerek hep gif yaptık, ama artık png yapabiliriz. Sprite resimlerimizde tam saydamlık bizim elimizi güçlendirecektir.

ie’da saydam png kullanmamamız nedeni ile bazen iki adet resim hazırlardık. Diğer tarayıcılar için saydam png, ie6 için yarı saydam gif. Buda sitemizi barındırdığımız yerde bir ikilem oluşması, düzenleme yaparken her iki dosyayıda düzenlemek zorunda kalmamızı neden oluyordu. Artı iş gücü kaybına neden oldu.

Şimdi tüm sprite resimlerimizi saydam png yapalım demiyorum tabi duruma göre kullanalım diyorum, ama artık elimizide korkak alıştırmayalım yani kullanmamız gereken yerlerde çekinmeden kullanalım.

Saydam PNG kullanalım. Saydam PNG’yi daha çok dikkate alalım.

Seçici Desteği

Benim en çok geride kaldığım konulardan bir tanesi bu kısımdır. Ben hala bir çok seçiciyi kullanmıyorum, halbuki ie6’dan kurtulduk bunları kullanabiliriz. Sizi bilmiyorum ama bu seçicileri unutmuş olmak beni çok üzdü. CSS’de seçiciler bizim elimiz, kolumuz gibidir. Çok değerldir yani. Ne kadar seçme imkanımız varsa o kadar güçlüyüz demektir. Şimdi ie6’nın desteklemediği ama ie7’den itibaren desteklenen ve artık rahatlıkla kullanabileceğimiz seçicileri tanıtayım.

Özellik Seçicileri

CSS2.1 ile gelen özellik seçicilerini ie7 desteklemektedir. Bu seçiciler bize daha az kod ile daha fazla erişim sağlamaktadır. Bu konuyu yazarken bile ie7’nin çıkmasını beklemişim.

Basit Özellik Seçicisi 

  a [title] {
  color:#f00
  }

Sadece title özelliği tanımlanmış bağlantı elementlerini yakalamamıza sağlar.

Özellik Değeri Seçicisi

  input[type="text"] {
    border: 1px solid #177F75;
    font-family:Verdana, Arial, Helvetica, sans-serif;
  }
  input[type="submit"]{
    margin-left: 201px;
    background-color: #00CC00;
  }

Özellik değeri seçicisi daha fazla esneklik sağlar. Yukarıda örnekte görüldüğü gibi Form elemanlarını ayırmak zor oluyordu. Normal bir input tanımı yapmak istediğimizde her özelliği için ayrı class yazmak zorunda kalıyorduk. Özellik değeri seçicisi ile artık ayrımı yukarıdaki gibi yapmak çok kolay. http://dev.opera.com/articles/view/styling-forms-with-attribute-selectors/ yazısında bu özelliğin bize ne kadar avantaj sağladığını görüyoruz.

Kısmi Özellik Değeri Seçicisi

Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

  a[title~="Google"] {
  text-decoration:overline;
  }

Dikkate Değer Özellik Seçicisi

Bir etiketin özellik değerindeki kesik çizgi(-) ile ayrılmış kısımlarına göre tanımlama yapmamızı sağlar. 

  *[lang|="en"] {
  color: red;
  }

Bunların dışında CSS3 ile birlikte gelen Özellik seçicileride var. Daha gelişmiş özellikler ile gelen CSS3’ni de desteklemektedir. Makaleye bunları yazmamışım bile ie6 desteklemiyor diye.

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

Özellik içeriğinin başlangıç değerine göre ayırt etmemizi sağlar.

Mesela web siteleri ile e-posta ayrımını yapmak için mesela

  a[href^="http:"] {
  background:(&ldquo;baglanti.gif&rdquo;) 0 0 no-repeat;
  padding-left:15px;
  }
  a[href^="mailto:"] {
  background:(&ldquo;posta.gif&rdquo;) 0 0 no-repeat;
  padding-left:15px;
  }

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

Özellik içeriğinin bitiş değerine göre ayırt etmemizi sağlar.

Mesela farklı dosya tiplerine verilen bağlantıları ayırt etmek için bağlantıların başına ikon koymak istediğimizde 

  a[href$='.pdf'] {
      display:inline-block;
      padding-left:20px;
      line-height:18px;
      background:transparent url(/Images/PDFIcon.gif) center left no-repeat;
  }

  a[href$='.doc'] {
      display:inline-block;
      padding-left:20px;
      line-height:18px;
      background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
  }
  a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] {
      display:inline-block;
      padding-left:20px;
      line-height:18px;
      background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
  }

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

Özellik içeriğinde belirlenen değerin geçip geçmemesine göre ayırt etmemizi sağlar.

  a[href*="example.com"] {
  color:#ff0
  }

Sadece özellik seçicileri değil ayrıca çocuk seçicileri, bitişik kardeş seçicisi, :first-child

Çocuk seçicileri

Sadece bir alt elemanı, yani çocuğunu(torunlar dahil değil) seçmek istediğimizde kullandığımız seçici. Bir menüde liste elemanlarına tanımlama yaparken tüm alt elemanlara değilde sadece ilk menü liste elemanlarına etki yapmasını istediğimizde çok işimize yarar mesela

  ul > li{
  list-style:none
  }

Çocuk seçicisi bizi fazla kod yazmaktan korur. Mesela bir menü için tanımlama yaptığımızda eğer menünün alt elemanlarına farklı stiller ekleyeceksek alt elemanlar için üstteki her tanımı ezmemiz gerekiyor, ancak çocuk seçicisi ile buna gerek kalmıyor.

Bitişik Kardeş Seçicisi

Bitişik Kardeş Seçicileri biribiri ardına gelen aynı seviyedeki elementlerden sonra gelenine stil tanımlamak için kullanılır. Tam olarak “Bir Ufak Kardeş Seçicisi” olmalıdır. Yeri gelince oldukça kullanışlı bir özellik.

Genel Kardeş Seçiciler

CSS3 ile birlikte gelen genel kardeş seçicisi bitik kardeş seçicisinden farklı olarak sadece bir sonraki değil aynı ana kapsayıcı içindeki belirtilen elemandan sonraki aynı seviyedeki elemanları seçmek için kullanılır. Seçici işareti olarak elemanlar arasına tilde(~) işareti konulur.

  E ~ F {}

Bitişik kardeş seçicisine göre daha avantajlı bir seçicidir. Burada dikkat edilmesi gereken bir durum vardır oda genel kardeş seçicisi belirtilen elemandan sonraki kardeşler için geçerlidir önceki kardeşleri kapsamaz.

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

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

:first-child sözde seçicisi

Birçok yanyana dizilimde ilk ve son elemanı yakalama sorunlarımız olur. Genelde bu sorunları çözmek için javascript yardımına gereksinim duyarız. :fisrt-child ile ilk elemanı yakalayabiliyoruz, ama last-child ile sonu yakalamak için biraz daha beklememiz gerekiyor. ie9’dan itibaren destekliyor.

Mesela bir listemiz olsun yanyana sıraladığımız aralarında 10px’lik mesafelerin olduğu biz eğer tanımı

  ul li{
  margin-right:10px
  }

şeklinde yaparsak listenin son elemanı sonrasınada 10px atayacaktır ve bu sorun olacaktır. Biz first-child seçicisini de düşünerek kodumuzu şöyle değiştirelim.

  ul li{
  margin-left:10px
  }
  ul li:first-child{
  margin-left:0
  }

Evet sağ margin yerine sol margin verdik ama first-child ile istediğimizi elde ettik.

Bu seçicileri aklınızın bir kenarına not edin. Hatta bir yere not edip çalışma alanınızda görebileceğiniz bir yere yapıştırın. Unutmayın

Tüm elemanlarda :hover desteği

CSS’e ilk adım herkes linklerin farklı durumu için css ile tanımlama yapmasına ve javascript gereksinimi olmadan açılır menü yapmasına şaşırmıştır.

Genelde CSS ile menü yaparken ie6 için javascript ile çözüm ürettik. Ancak artık js kullanmadan açılır menüler yapabileceğiz. Tabi sadece menü değil tüm html elementlerinde :hover sahte sınıfını kullanabileceğiz. 

  ul li ul{
  display:none
  }

  ul li:hover ul{
  display:block
  }

kodu kısaca bize menü oluşturma imkanı veriyor. liste öğesine bu şekilde yapılan tanımlarda alt menüye geçildiğinde ve üzerinde iken üst menüde seçili görünecektir ve buda kullanıcı dostu bir görünüm sağlayacaktır.

Ayrıca diğer alanlarda :hover kullanarak js olmadan gizle-göster yapma imkanımız var artık.

  div > p{
  display:none
  }
  div:hover > p{
  display:block
  }

:hover sahte seçicisinin nimetlerinden yaralanmayı unutmayın. Menülere özgürlük. Gizel-Göster CSS

min-height, min-width, max-height ve max-width desteği

Bence height değeri yerine her zaman min-height değerini kullanmakta yarar var. height değeri bizi sınırlandırıyor ve birçok sorunlara neden olabiliyorken min-height değeri ise sade belirtilen değerde içerik yok ise yüksekliği o değere çeker fazla içerik geldiğinde ise kapsayıcıyı uzatır.

ie6 için min-height basit bir css düzeltmesi olsada min-width, max-height ve max-width için javascript ile çözüm üretmek zorunda kalıyorduk. Buda tarayıcıyı ve siteyi zorluyordu.

min-height, min-width, max-height ve max-width ile sınırlarınızı daha iyi kontrol edin.

Farklı Genişlik ve Yükseklik Tanımlarına Son(box model hacking)

Kutu modeli çözümü(box model hacking) diyede bildiğimiz ie6’nın genişlik ve yükseklik yorumlamada diğer tarayıcılardan farklı yorumlaması nedeni ile css ile düzeltme yazmak zorunda kalıyorduk. Box Model Sorunu ve Çözümü makalesinde yazdığım gibi ben uzun düzeltmeyi kullanıyordum genelde ancak (_) ile daha kolay bir çözüm de vardı, ben w3c doğrulamasından geçmediği için tercih etmiyordum bu yöntemi.

Sorunu tekrar hatırlarsak;

“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 sürümleri 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.”

Bundan dolayı 

  #icerik{
      width:230px;
      padding:10px;
      border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
      voice-family: "\"}\"";
      voice-family:inherit;
      width:200px;
  }
  html>body #icerik {
      width:200px;
  }

şeklinde bir css çözümü veya 

#icerik{
  width:200px;
  _width:230px;
  padding:10px;
  border:5px solid #000;
}

çözüm üretiyorduk. Yoksa sitemiz ie6’da yamuk görünüyordu. Bloklar aşağı kaçıyor hiç istemidiğimiz görüntüler ortaya çıkıyordu. Ama artık çift tanım ve css düzeltmeleri yok bitti.

Kutu modeli sorunu sonu

position:fixed desteği

ie6 postion özelliğinin fixed değerini desteklemiyordu. Bizde çözüm için “Sabit Konumlandırma (Postion:fixed)” expression ile çözüm üretiyorduk. Artık çözüm üretmeye gerek yok.

İstediğimiz alanı sabitleyebileceğiz artık.

İki sınıf tanımlama

ie6 birden fazla sınıf içeren elemanlara bu iki sınıfı kullanarak tanımlama yaptığımızda bunu görmüyordu.

  <div class="liste onemli">
      ...
  </div>

  div.liste.onemli {
      ...
  }

Tanımı yaptığımızda ie6 burada .onemli için tanım yapmış gibi davranıyordu. Artık daha kolay seçim yapabileceğiz. Ufak ama güzel bir özellik.

!important kullanımı

Tanımlarımızın etkinliğine arttırmak için !important son ekini kullanıyoruz. Ancak ie6 bir özellik tanımlı ise ve tekrar ezmek için bir daha !important’lu kullanılıyorsa bu tanımı görmüyor

Artık çekinmeden !important tanımını kullanabileceğiz.

Diğer Hatalar

Tüm liste için http://blogs.msdn.com/b/ie/archive/2006/08/22/712830.aspx bakın.

ve CSS dersleri altındaki CSS Problemleri ve Çözüm Önerileri başlıklı içeriğin bir çoğunu tek başına oluşturan ie6 sorunlarını düzeltmeyeceğiz artık.

Artık sol ve sağ margin tanımları yaptık diye display:inline tanımı yapmak zorunda değiliz,
Artık tekrarlayan karakter sorunu nedeni ile HTML yorumlarımızı silmek veya değiştirmek zorunda değliz,
Artık 3px sorunu için takla atmak zorunda değiliz,
Artık cee-ee sorunu nedeni yüzünden background değerlerini silmek zorunda değiliz,
Artık relative içindeki absolute tanımlar için fazladan kod yazmak zorunda değiliz.,
Artık yorum satırlarında Türkçe karakter kullanabileceğiz,
Artık saydam kenar çizgileri kullanabileceğiz,
Artık line-height sorunuları nedeni ile fazladan kod yazmayacağız.,
Artık liste işaretleri sorunu ile uğraşmayacağız,
Artık overflow sorunu nedeni ile fazladan position:relative ve height:100% tanımı yapmayacağız.,
Artık ie6 için çözüm üretmek için *html, _ ile çözüm üretmeyeceğiz.,
Artık kenar çizgilerinden dotted  dashed gibi görünüyor diye dert etmeyeceğiz,
Artık ie6 yok.

Kodlarımızı bu gerçeklere göre tekrar gözden geçirelim.

Sonuç

İe6’dan kurtulmak bizim için bir bayramdır. İki bayramı birden yaşayacak olmanın sevinci içindeyiz. Bu yazıdaki amacım kod yazarken otomatiğe bağladığımız sistemi biraz irdeleyerek güncellemek. Belki siz benim kadar bu sorunu yaşamıyor olabilirsiniz, ancak benim gibi böyle bir sorun yaşayanlar için yazdım bu yazıyı. Burada sadece css sorunları hakkında yazı yazdı isemde javascript yönündende çok sorunlu bir tarayıcı idi ie6, çok büyük performans sorunları ve güvenlik sorunları mevcut idi.

Altta kaldım diye üzülme, üste çıktım diye sevinme

Tamam sevinelim ama çokda sevinmeyelim. Çünkü hala sorunlu ie sürümleri var ve hala ie pazarda lider. ie7’nin hatta 8’in javascript yorumlamadaki yavaşlığı. 7,8,9’un css3 ve html5 eksikleri ie7’nin hasLayout sorunları hala bizimle. Muhtemelen ie7’nin sonunada yaklaşmaktayız. 1-2 seneye belki daha evvel kurtulma ihtimalimiz var.

Ama bugün arayüz geliştiricileri için bayram.

ie6 öldü.

Kaynaklar

12 yorum

Javascript’te “null” ve “undefined” farkı

18 Ağu

Yazı Fatih HAYRİOĞLU tarafından Javascript kategorisine eklendi.

Javascript diğer birçok dilden farklı olarak null ve undefined iki ayrı durum olarak kabul eder.

null; boş değer anlamına gelen özel bir değerdir. typeof null bize nesne döndürür.

<script>
var testDegiskeni = null;
alert(testDegiskeni); //null
alert(typeof testDegiskeni); //object
</script>

undefined değişken bildirilmiş ama henüz değeri atanmamış demektir.

<script>
var testDegiskeni;
alert(testDegiskeni); // undefined
alert(typeof testDegiskeni); //undefined
</script>

Yukarıdaki örneklerde gördüğümüz gibi null özel bir nesne iken undefined tip olarak undefiend döndürür.

Atanmamış değişkenlerin değeri javascript tarafında otomatik olarak undefined olarak atanır.

Javascript asla null değeri atamaz. Eğer bir elemanın değeri null ise bu javascript tarafından değil, program tarafından atanmış demektir.

undefined ve null kontrolü

if(typeof(test) !== 'undefined' && test != null) {
    //test değişkenin kullanabiliriz
}

Kaynak

2 yorum

Firefox 6

17 Ağu

Yazı Fatih HAYRİOĞLU tarafından Haberler kategorisine eklendi.

Firefox 6

Firefox6 çıktı. Mozilla’da artık hızlı tarayıcı sürümleri çıkarmaya başladı. Her neyse ki otomatik güncelleme özelliği sayesinde kullanıcılar hızla yeni sürüme geçiyor. Otomatik güncelleme kullanıcının Firefox Hakkında penceresini açması ile çalışıyormuş. İlginç bir yöntem.

Firefox 5 çıkalı yaklaşık 2 ay olmuştu ve 16 Ağustos’ta Firefox 6 çıktı tabi bu kadar hızlı sürüm çıkınca yeni sürüm ile birlikte hata düzeltmeleri ve bir kaç özellik ile yetinmemiz gerekiyor. Yeni sürümün Firefox’daki en büyük sorunu eklentilerin uyumsuz olması, eklentiler daha yeni Firefox5’e uyum sağlamışken şimdi Firefox6 ile bu sorunu tekrar yaşacayacağız.

Hız konusunda Google Chrome’a yetişmeye çalışan Firefox bu yeni sürümde hızlanmanın bir önceki sürüme göre %20 olduğunu söylüyor. Linux kullanıcıları için daha kararlı ve hızlı bir sürüm olduğu söyleniyor.

Adres barda web sitesinin isim kısmını ön plana çıkaran bir değişiklik yapılmış. Bu özellik bir çok yeni nesil tarayıcıda vardı zaten. Hatta İnternet Explorer’da bile vardır :

Firefox 6

Detaylı yetkilendirme özelliği ile artık site bazlı yetkilendirme imkanı sunuyor bize Firefox6. İzin Yöneticisi penceresini adres bara about:permissions yazarak açabiliyoruz. Bu pencereden web sitelerinin tek tek çerezlerin, parolaların, popup pencerelerini, çevirim dışı depolamayı ve konum bilgilerini kullanmasına dair izinleri ayarlayabiliyoruz.

Firefox 6

JavaScript Karalama Defteri(Scratchpad): FireBug’ın konsolune benzer bir işleve sahip bu uygulama herhangi bir eklenti kurmadan tarayıcının kendi özelliği olarak geliyor. Bu araç ile javascript kodlarımızı çalıştırabiliyoruz.

Firefox 6

Daha fazla HTML5, CSS3 ve DOM özelliği desteği geldi.

  • WebSocket son hali desteği geldi. Websocket özelliği sunucu ile tarayıcı arasında bir bağlantı kurulmasını sağlıyor, bu sayede biz mesajlaşma servisi, çok kullanıcılı oyunlar vb çok güzel uygulamalar yapma imkanı sağlıyor. Aslında ajax teknolojisinin standartlaştırılmış hali gibi geldi bana.
  • HTML5 <progress> etiketi destekleniyor. ::-moz-progress-bar özelliği ile stilini ayarlayabiliyoruz.
  • Yeni -moz-orient özelliği örneğin progress barın dikey mi yataymı olacağını ayarlayabiliyoruz.
  • HTML5 ses ve video elementlerinde metinleri izleyebilmemizi sağlayan <track> elementini destekliyor.
  • CSS3 border-radius özelliği artık iframelerde uygulanabiliyor.
  • Özel veri özelliklerine(data-*) DOM’un element.dataset özelliği erişebilme imkanı sağlıyor.
  • -moz-text-decoration-color Bu yeni özellik text decorations’a renk veriyor, örneğin underlines, overlines ve strikethroughs olarka tnaımlanan çizgilere.
  • -moz-text-decoration-line Bu özellik bir elemena atanacak text decorations çeşidini belirliyor.
  • -moz-text-decoration-style Bu özellik text decorations stilini belirlememizi sağlıyor, örnek underlines, overlines, and strikethroughs, single-strokes, double strokes, wavy lines, dotted lines vb.
  • -moz-hyphens özelliği ile kelimelere tireleme yapabiliyoruz. (none, manual, auto).
  • window.matchMedia() metodunu kullanarak medya sorgularını programatik olarak kontrol edebiliyoruz.
  • Server-Sent Events desteği eklenmiş. Bu API sunucuya istemci tarafından uyarı mesajları göndermeye izin veriyor. Bir mesajlaşma örneği
  • Touch eventları destekliyor. Dokunmatik ekranlar ve trackpadlerde bu özellikleri kullanabiliyoruz artık.
  • Tüm destek listesini görmek için tıklayınız.

Kaynaklar

5 yorum

Sayfa 3 - 10112345...102030...Son »

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