Tarayıcı Uyumu: CSS Sıfırlama Tekniği

Bir web sayfası hazırlarken bazı etiketlerin her tarayıcıda farklı göründüğünü fark ettiniz mi hiç? Bazı html etiketleri, eğer css ile onlara belirli değerleri vermediyseniz her tarayıcıda farklı değerler alırlar. Örnek verecek olursak h1 etiketini hiçbir css tanımlaması yapmadan bir şablona yerleştirdik. Bazı tarayıcılar h1 etiketini yorumlarken yukarıdan biraz boşluk bırakırlar. Bazı tarayıcılar ise hiçbir boşluk bırakmazlar. Bu nedenle tarayıcılar arasında büyük farklar oluşabilir.

Ancak CSS Sıfırlama Tekniklerini kullandığımızda ise iş biraz değişir. Bu tekniği kullanarak web sayfamızdaki tüm html etiketlerini başlangıçta sıfırlıyoruz. Bu sayede tarayıcılar değil siz belirlemiş oluyorsunuz nasıl görüneceğini. Sıfırlama tekniği CSS kodlarınızın en başında öylece dururken siz de istediğiniz etiketleri onun altında tekrar tanımlamaya başlıyorsunuz.

Aşağıda benim en çok kullandığım ve bloggerdestek'de de kullandığım CSS Sıfırlama Tekniği olan Eric Mayer'in ürettiği "Tam Sıfırlama" tekniğinin kodları var.

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

Sanırım en çok kullanılan sıfırlama tekniği de budur. Bu kodu CSS kodlarımızın en başına eklememiz gerekiyor. Blogger için konuşmak gerekirse:
<b:skin><![CDATA[
kodundan hemen sonra yukarıdaki kodları yapıştırabiliriz. Kodların yukarıdaki haliyle şablonunuzda çok yer kapladığını düşünecek olursanız aşağıdaki haliyle de koyabilirsiniz. Nasıl olsa sıfırlama kodu üzerinde hiçbir değişiklik yapmanız gerekmiyor. Aşağıdaki kod yukarıdaki kodun düzenlenmiş halidir. İşlevsel olarak hiçbir fark yoktur.

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;}
:focus {outline:0;}
body {line-height:1;color:black;background:white;}
ol, ul {list-style:none;}
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: "" "";}

Daha fazla CSS Sıfırlama Tekniği öğrenmek isterseniz Web Deneyimleri isimli blogu ziyaret edebilirsiniz. Link:
http://webdeneyimleri.donanimhaber.com/css-sifirlama-teknigi/