Greench's Blog

Yaklaşık bir sene önce yazıdığım yazıyı iki sayfalık olarak tasarlamıştım yazarken(ne hafıza )

Tarayıcı tanıma kodunun kullanım amaçlarından sonra bu yazıda alternatif olarak kullanılabilecek yöntemden bahsedeceğim.

Özellik Tanıma-Feature Detection
Tarayıcılara eklenen yeni teknolojilerin büyük bir çoğunluğu eski tarayıcıların çalışmasını aksatmayacak, geriye dönük uyumlu olarak tasarlanır ve tasarlandığı şekliyle tarayıcılara eklenir. Eğer bir özelliği kullanmak istiyorsanız öncelikle onun tarayıcı tarafından desteklenip desteklenmediğini kontrol etmelisiniz. Örneği geolocation desteğinin tarayıcı tarafından kullanılabilip kullanılamayacağını test etmek için

if(navigator.geolocation!=null){
 
// geolocation destekli tarayıcı için çalışacak kodlar
}else{

//geolocation desteksiz tarayıcılar için çalışacak kodlar

}

şeklinde bir kod kullanmanız faydalı olur.

Yada IE'ye özgü bir kod olan document.all'ı kullanırken kodu destekleyen tarayıcılar için bir yöntem diğerleri için başka bir yöntem kullanmak istiyorsanız

if(document.all[0]!=undefined){

// document.all destekleyen tarayıcılar için kullanacağınız yöntem

}else{

// document.all desteklemeyen tarayıcılar için çalışacak kod

}

şeklinde bir kod kullanabilirsiniz.

Belgedeki elementleri seçmek için querySelector yeni bir yöntem ama eski tarayıcılarda desteklenmiyor. Düzgünce kullanabilmek için

if(document.querySelector){

// yeni ve destek sunan tarayıcılarda çalıştırılacak kod

}else{

// eski veya henüz destek sunmayan tarayıcılarda çalıştırılacak kod

}

Buraya kadar dikkat ettiyseniz herhangi bir tarayıcı ismi vermeden tarayıcıya "sen bunu yapabiliyorsan yap, yapamıyorsan şunu yap" şeklinde bir komut verdik. Tarayıcı tanımlama kodu kullandığınıda, belirttiğiniz tarayıcıların isimleri değişebilir, tanımlamadığnız tarayıcılar belirebilir ve bu yüzden yazdığınız kod site uyumsuzluklarına yol açar. Tarayıcı tanımlamanın kısa ve geçici bir çözüm olmasının ve gerçekte yenilenen tarayıcılarla birlikte sürekli bakımının yapılmasının gerekliliği de bundan kaynaklanır. Özellik tanımlama biraz daha karmaşık görünebilir, ancak gelecekte de çalışan bir kod yazmış olmak herkesi mutlu edecektir.

Modenizr
Faruk Ateş, Modenizr'ın yapıcısı, isim çok okunaklı değil mi Modenizr, yukarıda bahsettiğim yöntemi oldukça pratikleştiren bir JavaScript kütüphanesi. Java.. ney? diyebilirsiniz. Modenizr'ı sayfanıza ekledikten sonra onu kullanmak için ekstra kod yazmanız gerekecek. Yazıyı çok uzatmadan Modenizr'in belgelendirmesinden kısa bir kod alıp buraya ekliyorum.

Modernizr.load({
  test: Modernizr.geolocation, // yapacağınız test
  yep : 'geo.js', //geolocation destekleyen tarayıcı için sayfaya eklenecek javascript kodu
  nope: 'geo-polyfill.js' // geolocation desteklenmiyorsa sayfaya eklenecek javascript kodu
});

Modenizr'ı aşağıdaki gibi daha karmaşık bir şekilde kullanabilirsiniz.

Modernizr.load([
  // görsel bölüm
  {
    // İstediğiniz özellikleri mantıksal bir şekilde ekleyebilirsiniz
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load testin sonucuna göre aşağıdaki css ve javascript kodunu ekleyecek
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // işlevsel bölüm
  {
    test : Modernizr.websockets && window.JSON,
    // socket-io.js ve json2.js
    nope : 'functional-polyfills.js',
    // içerik yüklemek için dizi de kullanabilirsiniz
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Bu fonksiyon bu ve öncedeki bölmelerdeki her kod indirildikten
      // ve çalıştırıldıktan sonra çalışacak
      myApp.init();
    }
  },
  // Uygulamanızın kalanı yüklendikten sonra uygulamanızı çalıştırabilirsiniz
  'post-analytics.js'
]);