İçeriğe Atla
POPÜLER ARAMALAR: reklam, pazarlama, ,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog
Feedburner RSS
Şemsiye


25 Mayıs 2008

Tarayıcı Uyumluluğu İçin CSS Sıfırlama

Etiketler: , , , , , , ,
Kategori Css, Web | Toplam 497 kez okunmuş | 8 Yorum

CSS sıfırlamanın amacı farklı tarayıcılarda oluşan görüntü farklılıklarını mümkün olduğunca azaltmaktır. Tasarımda Evrensellik ve Sayılar başlıklı yazımda konuya kısmen değinmiştim fakat böyle bir konunun başlı başına üzerine düşülmesi gerektiğine inanıyorum.

CSS sıfırlama denildiği zaman akla iki metod gelir. İlki basit ve sade olan standart metod, ikincisi ise çok etkili olan ve genel olarak kabul gören, benim de tavsiye edeceğim Eric Meyer metodu.

Standart Metod

Stanfart metod için CSS dosyanızın en başına şu kodları eklemeniz yeterli. Bu kod sayesinde tüm seçicilerin varsayılan margin ve padding değerlerini sıfırlayabilirsiniz.

* { margin:0; padding:0; }
Eric Meyer Metodu

Bu metod daha çok özelliğe etki eder ve yukarıda belirttiğim gibi daha çok kullanılır. Kodumuz ise şu şekilde:

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}

/* remember to define focus styles! */
:focus {
        outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
        text-decoration: none;
}
del {
        text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: collapse;
        border-spacing: 0;
}

Sonuç

Standartların her geçen gün biribirine daha çok yaklaştığı teknoloji dünyasında inanıyorum ki birgün tüm tarayıcılar aynı şekilde yorumlayacaklar CSS seçicilerini veya tüm sistemlerde tek bir tarayıcı kullanılacak fakat o güne kadar sanırım kullanıcı dostu tasarımlar için daha çok çalışmamız gerekli.






Yorumlar

“Tarayıcı Uyumluluğu İçin CSS Sıfırlama” için 8 Yorum

  • 1 o-d

    ben css sıfırlamayı açıkcası pek mantıklı bulmuyorum. Çünkü hiç kullanmayacağım elementlerin bile tanımları var genel sınıfın içinde. Ayrıca ikinci ve en önemli kullanmama sebebim, css sıfırlayıcıda bütün ayarlar sıfırlandığı için tek tek her şeyi yeniden yazmak gerekiyor. E madem hepsini yeniden ayarlamamız gerek en baştan hepsi ayarlı şekilde yazarsak hiç sıfırlamaya gerek kalmaz.

    Örnekleyecek olursam, bir div için margin 5px ve padding 5px istiyorsam, direkt olarak;
    div.filanca { margin:5px; padding:5px;}
    yapmam yeterlidir. Niye resetleyici ile önce bu değerleri sıfırlayıp sonradan yeniden ayarlayayım ki!

    Başka görüşleri olan varsa tabii ki öğrenmek isterim. Ama şu an için bana gereksiz gelmekte css sıfırlayıcı kullanmak.

  • 2 yakuter

    @o-d olaya şu açıdan yaklaşmalısın. Yukarıdaki kodları direk kullanmak zorunda değilsin. Mesela hiç blockquote kullanmayacaksan kodun içinden onunla ilgili alanları çıkartabilirsin. Yukarıdaki örnek en geniş kullanımdır. TÜM seçicileri sıfırlamak içindir.

    Diğer kullanmama sebebin için bir örnek üzerinden konuşalım. Demişsin ki “css sıfırlayıcıda bütün ayarlar sıfırlandığı için tek tek her şeyi yeniden yazmak gerekiyor.” Form etiketini sıfırlamadın diyelim. Tasarımın bittiği zaman bir bakacaksın ki IE6′da alttan ve üstten 10′ar piksellik boşluklar bırakırken diğer tarayıcılarda bu boşluklar yok. Ondan sonra hemen css dosyanı açıp bunun boşluklarını kaldıracaksın. Sonuç olarak css ile sıfırlamış olsaydın en başta tüm tarayıcılarda boşluk olmayadığını görecek ve bir daha dokunmayacaktın.

    Unutmamak gerekir ki bu kodlar tarayıcılar tarafından farklı yorumlanan özellikleri sıfırlarlar yani sıfırlanması gerekenleri.

  • 3 Evren

    Yanlis hatirlamiyorsam, Eric Meyer metodunun baska bir ozelligi de tarayicilarin sayfayi daha cabuk render etmesi. Genelde yildiz karakterini(*) kullanmak tarayiciyi daha cok yoruyor diye biliyorum.

  • 4 eburhan

    Standart yöntemi tavsiye etmem. * seçicisi ile web sayfasını oluşturan bütün elemanlar sıfırlanıyor (parents + childs). Dolayısıyla her elemana yeniden padding ve margin atamak zorunda kalıyorsunuz.

    Eric Meyer’in yönteminde ise sadece sıfırlanması gereken elemanlar sıfırlanıyor.

  • 5 Fatih Hayrioğlu'nun not defteri

    [...] Tarayıcı Uyumluluğu İçin CSS Sıfırlama - yakuter.com Bağlantı [...]

  • 6 HMERT

    yorumumdan yazı çıkarmışın ;) (bkz: #) Fakat IE sürümleri için çok işe yaramıyor onun yerine js ile yazılmış birkaç kod var onları da ben yazayım siteme :D
    @evren kesinlikle doğru, yui reset de öyle bütün tagları seçip öyle resetliyor.
    Bunu kullanacak herkese not tasarıma başlamadan bunu kullanın yoksa tasarımınız bitmişken resetlerseniz bir sürü topoğrafik hatalarla karşılaşırsınız.

  • 7 CSS Sıfırlama Tekniği

    [...] Tarayıcı Uyumluluğu için CSS Sıfırlama, Yakuter [...]

  • 8 Güncelleme 5 | Program Bul WP Theme

    [...] uygun hale getirmek ve bütün tarayıcılarda aynı tasarımı görmek için daha önce şurda okuduğum Eric Meyer metodunu temaya uyguladım. Zero.css dosyasını oluşturup içerisine şu css [...]


Yorum Yapın

yakuter.com © 2006-2008 Erhan Yakut. Site tasarım fallendesign.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.

WordPress Generator Valid XHTML 1.0 Transitional Valid CSS! Clicky Web Analytics

tracker