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

BLOGGER DESTEK


Blogger Tema, Eklenti, İpucu, Widget

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

Yazar: Sedran Bu yazı Salı, Ağustos 11, 2009 tarihinde yazılmış olup yazıda 3 yorum vardır.
Bu yazı şu etiketlere sahiptir: .
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/
Bu yazıyı beğendiyseniz RSS akışına abone olarak yeni yazılarımızı e-posta aracılığıyla takip edebilirsiniz. Bu link ile abone olabilirsiniz.
Bu yazıya 3 adet yorum yapılmış. Sen de yorum yap!
4hmt dedi ki...
11 Ağustos 2009 11:36

Çok yararlı bilgiler.SağoLasın.

İyi günler.

Berk Bavaş dedi ki...
11 Ağustos 2009 11:40

Güzel paylaşım,teşekkürler...(hemen uyguluyorum.)

Sezer dedi ki...
13 Ağustos 2010 09:20

uyguladım ihşallah işe yarar.

Yorum Gönder

Yorum yazarken dikkat ediniz;

1) Öncelikle, kesinlikle küfür etmiyorsunuz.

2) Eğer önceki yorumlardan birine cevap veriyorsanız kime cevap verdiğinizi belirtiyorsunuz.

3) Web sitenizin reklamını yapmak için saçma sapan, konuyla alakası olmayan yorumlar atmıyorsunuz.

4) Bunlar haricinde kardeş kardeş yorumlarınızı yazabilirsiniz.:)

BloggerDestek Ekibi

Kaydol: Kayıt Yorumları (Atom)
 

Asosyal Sözlük, sözlükspot, pcdostu, asosyalbebe