Atraksiyon.NeT

Geçen dersimizde her tarayıcıya uyumluluğu sağlamak için  CSS’i sıfırlamamız gerektiğinden bahsetmiştik. Sıfırlamalıyız, çünkü her tarayıcının ön tanımlı ayarları farklı olabilmektedir.

Örneğin ie, <form></form> etiketine margin verirken firefox vermemektedir. buda tasarımın kaymasına sebep olmaktadır.

Sıfırlama yapmak için ya kendimiz tüm etiketler için gerekli tanımlamaları yapacağız yada daha önce birisi yapmış mı ona bakacağız.



Şanslıyız ki daha önceden yayınlanmış olan resetleme kütüphaneleri mevcut.

İşte onlardan en popüler ikisi;

1 -  Yahoo! UI Library ve

2 - Eric Mayer‘in reset.css’leri.

Bu, Yahoo! reset.css

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, textarea, p, blockquote,
th, td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

Buda, Eric Mayer’in reset.css’i

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: "" "";
}

ayrıca…

Şu hatırlatmayı da yapmam gerek; Bu resetlemeler tamamen CSS ile yapıldığı için, etiket özelliklerinini bazılarını kullanamayacaksınız.

Örneğin;

tablolardaki bir hücreyi hizalerken, etiketi <td align=”right”> bu şekilde kullanamayacaksınız. Kullansanız da bu işe yaramayacaktır. bunun yerine <td style=”text-align:right;”> şeklinde bir kullanımı tercih etmelisiniz.

Ayrıca resetleme dosyanız bu şekildeyken, yine tablolarda cellpadding ve cellspacing gibi tablo özelliklerini de kullanamayacaksınız. Bunun sebebi table, caption, tbody, tfoot, thead, tr, th, td etiketlerinin css dosyasında margin ve padding’lerinin sıfırlanmış olmasından kaynaklanmaktadır.

( Eric Mayer’in Reset.css’i için )
Eğer cellpadding ve cellspacing özelliklerini kullanılabilir duruma getirmek istiyorsanız,

/* remember to define focus styles! */

Açıklama satırının hemen öncesine,

table, caption, tbody, tfoot, thead, tr, th, td {
margin:inherit; padding:inherit;
}

kodlarını eklemeniz gerekmektedir.

Son olarak reset.css kodları tüm sayfa elemanlarının özelliklerini sıfırlayarak tüm tarayıcılarda aynı sonucu elde etmeye yarar. Dolayısıyla, kodlama yaparken bazı farklılıklar yaşayabilirsiniz. Az önce bahsettiğim gibi  noktalar dikkat etmeniz gerekmekte..

İyi kodlamalar….