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

POPÜLER ARAMALAR: reklam, pazarlama, iş,
kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog

25 Mayıs 2008

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

Etiketler: Css, Eric Meyer, kod, metod, seçici, sıfırlama, standart, Web
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.

Düz Metin

* { 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:

Düz Metin

/* 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.

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

1 o-d
25 Mayıs 2008, 20:07

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
25 Mayıs 2008, 22:19

@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
26 Mayıs 2008, 13:15

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
26 Mayıs 2008, 13:57

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
26 Mayıs 2008, 14:36

[...] Tarayıcı Uyumluluğu İçin CSS Sıfırlama - yakuter.com Bağlantı [...]
6 HMERT
27 Mayıs 2008, 04:13

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
26 Temmuz 2008, 02:13

[...] Tarayıcı Uyumluluğu için CSS Sıfırlama, Yakuter [...]
8 Güncelleme 5 | Program Bul WP Theme
29 Temmuz 2008, 23:16

[...] 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 [...]