xhtml & css ile uğraşan hemen herkesin ortak sorunudur tarayıcıların kodları farklı yorumlaması. Bu konu çok tartışıldı. Çok yazılar yazıldı. Standartlar oluşturulmaya çalışıldı. Lakin, bir türlü tam olarak istenilen standart oluşturulamadı.
Bu sinir bozucu hadisenin başrolünde ise Microsoft’un sahibi olduğu Internet Explorer var. Pastada ki en büyük dilime sahip olmasından mütevellit, hep kendi kurallarını dayatmaya çalıştı. Web tasarımcıların, Internet Explorer’dan pek haz etmemesinin de en önemli sebebi budur. Microsoft, şuan Internet Explorer 7 ve 8 ile
acid testlerini aynı cümle içersinde kullanmaya başlasada, hâlen rakiplerinden, özellikle de Opera ve Firefox’dan çok geride olduğunu cümle âlem biliyor.
Yahoo! Developer Network tarafından hazırlanmış bu kod, özellikle problem çıkaran CSS elementlerinin padding ve margin değerlerini sıfırlıyor. Böylece, siz CSS kodlarınızı yazmaya başladığınızda, elementlere vereceğiniz padding ve margin değerlerini tüm tarayıcılar eşit algılamış oluyor. Örneğin, H1 tag’ine siz hiçbir değer vermezseniz, Firefox ve Internet Explorer’da farklı görüntüler alırsınız.
Bahsettiğim CSS kodumuz şu:
Alıntı:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,f orm,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;
}
|
Burada belirtmek istediğim çok önemli bir nokta var; Bu kodu CSS kodlarını yazmaya başlamadan önce, CSS dosyanızın en tepesine eklemeniz gerekiyor. Mevcut bir tasarıma uygulamaya kalkarsanız, yeniden tüm margin ve padding değerlerini değiştirmeniz ve büyük zahmetlere girmeniz gerekebilir. Yani tavsiyem, işe başlamadan önce bunu kullanmanız.
Yahoo!, bu kodu kendi server’ında da barınıyor. Pek tavsiye etmesemde, eğer isterseniz, direkt sayfanıza aşağıda ki kodu ekleyerek de kullanabilirsiniz.
Alıntı:
|
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/reset/reset-min.css">
|
Benim tavsiyem, bu kodu ayrı bir CSS dosyasında saklamak ve kullanmak istediğimiz CSS dosyasının en tepesinde
@import “reset.css”; yazarak, ilgili dosyayı çağırmak.
YUI Reset CSS başlıklı bu kodun
kendi sayfasından daha ayrıntılı bilgiye ulaşabilirsiniz.
alıntıdır