Wordpress

Wordpress Yakuter

Yakuter bundan böyle bir Vargonen mutlu müşterisidir :) Not: Sadece slogan olarak değil gerçekten mutlu ;) Twitter

1183 takipçi

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

25 Mayıs 2008

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.

Benzer Yazılar

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Sponsor Olmak İstiyorum!

Bu Yazıya Ait Yorumlar

o-d
25 Mayıs 2008

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.

yakuter
25 Mayıs 2008

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

Evren
26 Mayıs 2008

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.

eburhan
26 Mayıs 2008

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.

Fatih Hayrioğlu'nun not defteri
26 Mayıs 2008

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

HMERT
27 Mayıs 2008

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.

CSS Sıfırlama Tekniği
26 Temmuz 2008

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

Güncelleme 5 | Program Bul WP Theme
29 Temmuz 2008

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

tasarhane
03 Mayıs 2009

faydalı..! teşekkürler.

onur
14 Mayıs 2009

sitenin yapimi nerdeyse bitti. css le pek fazla isim kalmadi ve bu yaziyi okudum. güleyim mi aglayayim mi? =)=

yakuter
14 Mayıs 2009

Olsun, ders olmuştur işte :)

namso-01
14 Şubat 2010

eric meyer kodlarını kullanmak daha mantıklı geliyor neden derseniz sıfırlanmaı gerekenleri sıfırlıyor. Hem tarayıcılara yükte birindirmiyor site her tarayıcıda aynı görüntüleniyor. amacımızda zaten tüm tarayıcılarda aynı görünmek…

Emre Aras » CSS / XHTML’in Olmazsa Olmazları
02 Nisan 2010

[...] CSS sıfırlama (reset) ne demek bilmelisiniz ki zaten şurada anlatmıştım. Kısaca söylemek gerekirse tüm CSS seçicilerinin varsayılan değerlerini [...]

Anonim
03 Nisan 2010

[...] [...]

CSS Organizasyonu -1 - kursattokpinar.com
08 Nisan 2010

[...] konusu CSS sıfırlama olmadığından konuyu burada bırakalım. Burada, burada ve burada da konuyla ilgili ayrıntılı bilgiler [...]

siteni Tanıt
05 Nisan 2011

Bu kaynağı yazan ve gelişmesine yorumları ile katkıda bulunan herkese çok teşekkür ederim.

Salih
25 Nisan 2011

Css sıfırlama kullandığımızda İE sürümleri arasındaki farklar da kalkıyor mu?

cag
23 Haziran 2011

Yeni bitirdiğim bir site var; mozilla' da bir sorun yok ancak explorer' da görsel sorunlarla karşılaşıyorum. Bu sorunu nasıl çözebilirim? Teşekkürler….