CSS Sıfırlama

stigmata

Süper Üye
Kullanıcı
Katılım
4 Nis 2013
Mesajlar
3,264
[size=xx-large]CSS Sıfırlama.
[/size][align=justify]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 <p> 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

[/align]
 
Üst Alt