tarayıcıların css yorumlarını resetleyin

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.

Eğer tüm tarayıcılarada mükkemele yakın bir sonuç almak istiyorsanız, bazı CSS hack yöntemleri ve ipuçlarını öğrenmeniz gerekiyor. Bu konuya dair, Fatih Hayrioğlu‘nun CSS dersleri, en iyi türkçe kaynaklardan biridir. Bu siteden, CSS’e dair çok önemli ayrıntılara ulaşabilirsiniz.

Bende size, tarayıcıların CSS kodlarını ve özellikle de padding ve margin değerlerini yorumlamalarında ki farklılıkları sıfırlayabilmenizi sağlayan bir css kodu tavsiye edeceğim.

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:

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

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.

<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.

hoşçakalın.