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

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

yakuter

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.

Bu Yazıya Ait Yorumlar

o-d

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

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

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

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

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

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

HMERT

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

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

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

tasarhane
03 Mayıs 2009

faydalı..! teşekkürler.

onur

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

yakuter
14 Mayıs 2009

Olsun, ders olmuştur işte :)

namso-01

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ı

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

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

siteni Tanıt
05 Nisan 2011

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

Salih

Salih
25 Nisan 2011

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

cag

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

Peki ya sizin düşünceleriniz?

Facebook Grubumuz Twitter Wordpress Linked in Google Friendfeed RSS Beslemesi Feedburner RSS

Yakuter web tasarım, yazılım geliştirme, IPhone uygulamaları gibi konular da Üreticy'yi öneriyor.

TAMindir.com - Yeni Programlar

Ashampoo ClipFinder HD - Windows

ClipFinder HD, en ünlü 15 video paylaşım sitesi üzerinden video arayıp indiren ve format dönüştüren ...

G Data TotalCare - Windows

G Data TotalCare bilgisayarınızda sağladığı tam kapsamlı güvenlik yanında optimizasyon araçlarıyla s...

G Data InternetSecurity - Windows

G Data InternetSecurity anti-virüs, anti-casus, anti-spam anti-rootkit korumalarının yanında progra...

G Data AntiVirus - Windows

Performans problemi yaşamadan virüslerden korunmanızı sağlayan G Data AntiVirus, bilgisayarın aktif ...

Xfire - Windows

Multiplayer oyun severlerin en çok ihtiyaç duydukları iletişim araçlarını içinde bulunduran ve onlin...

Abonelik

Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.

yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi).
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.