CSS Sıfırlama

CSS kodlarının tarayıcıdan tarayıcıya farklı yorumlanması sorunlarından birini de bu dersimizde çözeceğiz.

Merhaba Arkadaşlar,

Bugün sizlerle CSS sıfırlama konusunu paylaşacağım. Bende daha önceleri gereksiz bulduğum için kullanmıyordum fakat daha ciddi olarak tasarım yapmaya başlayınca tarayıcılar arasındaki uyumsuzluğu görüp bu sorunları ortadan kaldırmakla ilgili araştırma yaparken tekrar karşımda buldum CSS Sıfırlama'yı. Lafı uzatmadan konuya geçelim.

CSS Sıfırlama konusunda birden çok seçenek var ama ben sizinle en çok kullanılan olan Eric Meyer'in tekniğini paylaşacağım.

Neden Kullanmalı?

Neden CSS Sıfırlama kullanıyoruz? Bunun sebebi tarayıcıların etiketlere farklı padding veya margin değerleri atamalarıdır. Örneğin (gerçeği yansıtmıyor, örnek olması için veriyorum):

Firefox bir

etiketine 10 piksel margin-top atarken, Internet Explorer 12, Opera 14, Google Chrome ve Safari 15 piksel değer atıyor. Tabii bu bizim etikete bir margin veya padding değeri vermediğimiz durumlarda karşımıza çıkıyor. Bunun önüne geçmek için bütün etiketlerin padding ve margin değerlerini sıfırlıyoruz. ( Olay tabiiki bundan ibaret değil ama basitçe böyle ifade edebiliriz. )

Kullanımı

Kullanımı oldukça basit. CSS dosyamızın en üstüne şu kodları 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,

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;

}

:focus {

outline: 0;

}

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

table {

border-collapse: collapse;

border-spacing: 0;

}



Evet, bu kadar basit. Bu yöntem bütün tarayıcı uyumsuzluklarını çözmese de farkını hissettirecektir. Hoşçakalın...

Kodun Kaynağı:

CSS Tools: Reset CSS
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

hiç bişe anlamadım kusura bakmayın walla:)
Bu ie7 ve türevi tarayıcılarda tablolarda sorun oluşturuyor. Daha doğrusu tablo kenarlıklarında... Şu anda hatırladığım tek problemi bu, site yapımı ilerledikçe ve css kodları biriktikçe yeni yeni tarayıcı tepkileri alabiliyoruz =) En kolayı ie ve türevlerini yasaklamak =P
abi seni anlatim neden yapdihini ama o taklari terkrar kullanmam gerekiyorsa ne yapaçaz ben onu anlamadim yani tarayiiçiya ilk başta bunu boyle yap sondan sonrada bben fazgeçdim sen boyle yap deyim iki farkli Css dosyasimi oluşduraçaz :-dusun::-dusun::-dusun:
if kullanarak farklı tarayıcılara farklı özellikte kodlar vermek mümkün değil mi acaba?
9 uncu satıra kadar html nini sorun yaratan tagları tanıtılıyor sonrada sıfırlama işlemine geçiliyor he mi ? onu açıklasan

Yukarı Git