Tarayıcılar bazı CSS kodlarına varsayılan özellikler tanımlarlar ve yazdığımız CSS kodları farklı tarayıcılarda farklı şekillerde görüntülenir. CSS sıfırlama (orjinal tabiri ile CSS Reset) tekniği ile tarayıcıların kendine özel varsayılan kodlarını yok ederek az da olsa standart bir tararıma ulaşmak için bir adım atmış oluruz.

Öncelikle şunu belirteyimki CSS sıfırlama işlemini yapmak için kendinize bir strateji oluşturmanız şart, yani CSS kodlarını sıfırladığınızda birçok standart kodu tekrar baştan yazmanız gerekecek. Örneğin en basidinden bir list (<li>) etiketi bile sıfırlanacak ve tüm özellikleri siz sil baştan vermeniz gerekecek. Bu sebeple sıfırladığınız CSS kodları üzerinde çalışırken biraz daha fazladan çalışmanız gerekebilir…

CSS sıfırlama işlemi için kendinize özel bir reset.css oluşturabileceğiniz gibi hali hazırda bir çok hazır CSS Reset kodları ve dosyaları bulunmaktadır. Bunlardan en ünlüleri Yahoo ‘ya ait olan YUI Css Reset ve CSS konusun da en büyük otoritelerden biri olan Eric Meyer ‘ın hazırladığı ve şu an en çok kullanılan Eric Meyer tekniğidir.

Tüm konuları bu makaleye sıkıştırmamak için konuyu parçalara ayırmak daha iyi olur diye düşündüm;

• Yahoo YUI Css Reset
• Eric Meyer CSS Reset Tekniği

Ayrıca çok basit ve en sade hali ile aşağıdaki gibi CSS kodlarını sıfırlayabilirsiniz.

* {
margin:0;
padding:0;
}

Yukarıdaki kodlamada tüm HTML etiketlerinin margin ve padding değerlerini 0 (sıfır) yaparak tarayıcıların varsayılan olarak verdiği değerlerden kurtarmış olduk. CSS sıfırlama kodlarını CSS dosyamızın en başına koyarak kullanabiliriz. Daha derinlemesine bir CSS sıfırlama yapmak istiyorsanız yukarıdaki listede verdiğim CSS Reset tekniklerini inceleyebilirsiniz, fakat daha öncede belirttiğim gibi CSS kodları tamamen sıfırlandığı için fazladan kod yazmanız gerekecektir.

Hazırladığınız siteyi birde Internet Explorer, Firefox, Opera, Safari, Chrome gibi tarayılarda sorunsuz calışması için emek harcarız. Hadi bakalım tam hersey bitti site hazır derken birde farklı versiyonlarda site nasıl çalışacak sıkıntısı karşımıza çıkar. Internet Explorer ‘da bu konuda olabildiğince acımasızdır, bir versiyonda sorunsuz çalışan site diğer versiyonda içler acısıdır.

Özellikle Internet Explorer 6 çok sorunlu bir tarayıcıdır bir çok Css ve Js kodu sorunlu çalışır hatta bazı kodlar hiç reaksiyon göstermez. Şu an en son versiyon Internet Explorer 8 olmasına ramen hala Internet Explorer 6 kullanan bir çok bilinçsiz internet kullanıcısı var bu sebeple hala sitenizin Internet nasıl çalıştığını kontrol etmelisiniz. Internet Explorer 6 ‘dan sonraki versiyonlar biraz (az biraz) daha sorunsuz diyebiliriz .

Tam anlamıyla farklı tarayıcı uyumu sorununa bir çözüm olmasada en azından Internet Explorer 6 kullananları azaltma için bir çözümden bahsedeceğim..

• ilk olrak buradaki zip dosyasını bilgisayarınıza indiriniz.
• İndirdiğiniz zip dosyasını açtığınızda bir örnek html dosyası (example.html), ie6update klasörğ içinde ie6update.js isimli bir Javascript dosyası olduğunu göreceksiniz. Ayrıca resim ve resimlerin kaynak dosyasını psd formatında eklenmiştir.
• Tahmin ettiğiniz gibi bu bir jQuery eklentisi. example.html dosyasının kaynak kodlarını incelerseniz bu eklentinin ne sekilde calistiğini çok rahat görebilirsiniz.

Fakat yinede kodları bir gözden geçirelim ;

ilk önce tarayıcının Internet Explorer 6 olup olmadığını kontrol ediyoruz

<!--[if IE 6]>

Eğer tarayıcı Internet Explorer 6 ise jQuery ‘i Googlelaps üzerinden çağırıyoruz.

if(typeof jQuery == 'undefined'){
document.write("<script type=\"text/javascript\"  src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
var __noconflict = true;
} 

Sonra IE6UPDATE_OPTIONS değişkenine açılacak popupta kullanılacak resim dosyalarımızın yolunu bildiriyoruz.

var IE6UPDATE_OPTIONS = {
icons_path: "ie6update/images/"
}

jQuery çağırırken açtığımız <script> etiketini kapatıp

</script>

Son olarak ie6update.js dosyamızı çağırıyoruz ve gizli if sorgumuzu kapatıyoruz..

<script type="text/javascript" src="ie6update/ie6update.js"></script>
<![endif] >

İşte bu kadar. Artık ziyaretçileriniz sitenize girdiğinde eğer Internet Explorer 6 kullanıyorsa bir uyarı penceresi çıkacak ve Internet Explorer ‘ın yeni versiyonu çıktını bildirip update etmesini isteyecek…

Tarayıcı ve tarayıcı versiyonu uyuşmazlık soruna ne zaman tam anlamıyla bir çözüm bulunur bilmem ama en azından bizim gayretimizle eski versiyon kullanan bilinçsiz ziyaretçi sayısını azaltabiliriz.

Bir sonraki makalede görüşmek üzere
Hüseyin Koçak