Yazar: Volkan Görgülü | Yayın Tarihi: 26 Temmuz 2008 | Yorumlar: 44 Yorum
Kategori: CSS & XHTML

Merhaba arkadaşlar, öncelikle hemen belirtmek istiyorum yazının devamında bu paylaşımımın kota dostu metin sürümünü okuyabilirsiniz. Ayrıca yeni öğrendiğim video işleme teknikleri sayesinde paylaşımım için hazırladığım 8 dakikalık videonun boyutu sadece 14,5 MB

Bu paylaşımımda sizler ile geliştiriciler için muazzam derecede hayat kurtarıcı bir yöntem olan CSS Sıfırlama teknikleri üzerine bilgiler paylaşmak istedim, CSS Sıfırlama tekniği nedir? Bize getirileri neler? Ve paylaşımımın sonunda size en sık kullanılan iki sıfırlama tekniğini göstereceğim.

Get the latest Flash Player to see this player.

Kaynak: Videoda kullandığım Eric Meyer’in CSS Sıfırlama tekniği

Dilerseniz bu konu üzerine daha önce yapılan paylaşımlarada göz atabilirsiniz;

• Tarayıcı Uyumluluğu için CSS Sıfırlama, Yakuter
• CSS Sıfırlama, Bildirgeç
• Reset.css ve Kurtardığı Hayatlar, SiberKültür

Lütfen Tartışalım

Arkadaşlar lütfen sizde CSS Sıfırlama konusunda kendi tecrübelerinizi yazınız ve yeni başlayan arkadaşlar ise soruları var ise lütfen çekinmeden sorsunlar. Güzel bir tartışma ortamı olursa paylaşımım çok daha faydalı olacaktır, şimdiden paylaşımıma katkı yapacak herkese teşekkürler!

Metin Sürümlerinin Devam Etmesini İstermisiniz?

İlk defa bu paylaşımım için ayrıca bir metin sürümü hazırladım, nasıl arkadaşlar faydalı buldunuz mu? Bu şekilde devam etmemi istermisiniz? Metin sürümüde yeterince açıklayıcı ve faydalı mı? Lütfen yorumlarınız ile düşüncelerinizi paylaşın.

Beni Takip Edebilirsiniz

Arkadaşlar paylaşımlarımı faydalı buluyor iseniz beni RSS, Twitter ve FriendFeed yayınlarımdan takip ederek, paylaşımlarımdan yayınlanır yayınlanmaz haberdar olabilirsiniz.

CSS Sıfırlama Tekniği Metin Sürümü

Arkadaşlar biz bir XHTML dökümanı için hiç bir CSS tanımlaması yapmasak da, dökümanı bir internet tarayıcısında açtığınızda etiketleri varsayılan stilleri ile görürsünüz. Aşağıdaki resme bakacak olursak

hiç bir stil tanımlamama rağmen başlık etiketinde üst ve alt boşluklar var ve ayrıca paragraf ile karşılaştıracak olursak puntosu çok daha büyük. Paragrafın altındaki listenin de kendine has bir stili var.

Peki Sorun Nerede?

Şöyle bir sorun var, malesef bu varsayılan tanımlamalar internet tarayıcıları arasında değişiklik gösterebiliyor, hemen size uygulaması basit ama çok etkili bir örnek göstermek istiyorum. Sırası ile şu işlemleri yapacağım;

1. Yeni bir XHTML dökümanı açacağım
2. Body etiketinin margin ve padding değerlerini 0 olarak tanımlayacağım
3. H2 etiketini kullanarak sayfaya Web Deneyimleri yazacağım
4. Son olarak, size farklılıkları daha rahat gösterebilmek için H2 etiketine 1px değerinde, kırmızı bir sınır vereceğim.

Dilerseniz bahsi geçen XHTML dökümanını buradan görüntüleyebilirsiniz.

Gelin Testimize Başlayalım

Aşağıdaki resimlerde farklı internet tarayıcılarında yukarıda oluşturduğum dökümanı açtığımda karşılaştığım görüntüleri görebilirsiniz.

Internet Explorer 6

Gördüğünüz gibi Internet Explorer 6 da H2 etiketi için herhangi bir üst boşluk yok.

Internet Explorer 7

Internet Explorer 6′nın ortanca abisi IE 7 de H2 etiketi için herhangi bir boşluk göstermiyor.

Internet Explorer 8

En büyük abi Internet Explorer 8 web standartlarını dikkate aldığından mıdır nedir, H2 etiketine 18px lik bir üst boşluk koyuyor.

Windows için Safari

Safari ise H2 etiketi için 19px değerinde bir üst boşluk tanımlıyor.

Opera 9.0

Yok mu arttıran Opera’da ise üst boşluk değeri 20px’e çıkıyor.

Firefox 3

Sonuç?

Sadece H2 etiketi için durum böyle iken gerisini siz düşünün, işte CSS Sıfırlama tekniği kullanılmadığı zaman internet tarayıcıları arasında farklı görüntüler ortaya çıkabiliyor.

Bu durumu engellemek için tarayıcıları bir şekilde sıfırlamalıyız ki kodumuzu geliştirmeye tüm tarayıcılarda eşit şartlar ile başlayalım.

Teknik 1: Basit Sıfırlama

CSS dökümanımızın en başına aşağıdaki kodu ekliyoruz;

* {margin:0; padding:0}

Kullandığımız bu kod parçasının türkçesi şu demek, “Tüm HTML etiketlerinin margin ve padding değerlerini sıfırla”.  Kolayca anlaşılabileceği gibi bu teknik tamamen bir sıfırlama işlemi yapmıyor ve * seçicisini kullanmanın tarayıcıları yorduğu söyleniyor.

Teknik 2: Tam Sıfırlama

Eric Meyer tarafından geliştirilen bu teknikte, CSS dökümanımızın en başına aşağıdaki kodu ekliyoruz;

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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Bu teknikte ise kodlardanda anlaşılabileceği gibi bütünüyle bir sıfırlama söz konusu ve ilk tekniğe nazaran kullanımı çok daha fazla.

İşte size bir anket sonucu

Arkadaşım Chris’in kendi blogunda yaptığı bir anketin sonuçlarını sizinle paylaşmak istiyorum. Chris sormuş “Hangi CSS Sıfırlama Tekniğini” kullanıyorsunuz,

Gördüğünüz gibi 27% lik bir dilim Eric Meyer’ın geliştirdiği tekniği kullanıyor, 26% lık bir kesmin CSS Sıfırlama tekniği hakkında hiç bir bilgisi yok, 15% lik dilim ise yukarıda sizler ile paylaştığım ilk tekniği kullanıyor.

Peki Hangi Tekniği Kullanmak Lazım?

Bu soruya ben kendi tecrübelerimden yola çıkarak şöyle cevap verebilirim, Eric Meyer’in CSS Sıfırlama tekniğini kullandığınız zaman, tüm stiller sıfırlandığından çok fazla tanımlama yapmak zorunda kalıyorsunuz. Düşünün bir em kullandığınızda metin yatık gözükmeyecek, strong kullandığınız zaman metin koyu gözükmeyecek. Bu tanımlamaları baştan yapmanız lazım ya da sıfırlama kodundan bu etiketleri çıkartacaksınız.

Bitiriyorum

Sonuç olarak şunu söyleyebilirim eğer tüm kontrolün sizin elinizde olmasını istiyorsanız kesinlikle Eric Meyer’in sıfırlama tekniğini kullanın ancak ben her etiketi tanımlamak ile uğraşmak istemiyorum zaten o kadar da bir bilgim yok, geliştirdiğim kod tarayıcılar arasında genişlik boşluk açısından farklı gözükmesin yeter diyorsanız ilk tekniği öneririm.

Bir sonraki paylaşımımda görüşmek üzere

Başka bir paylaşımımı inceleyebilirsiniz

« Bloglara Giriş Bölüm 1

Blogun Durumu ve Gelişmeler 2 »