Modernizr nedir? Nasıl kullanılır?
Internet Explorer 9, Firefox, Google Chrome, Safari vb. gibi modern internet tarayıcıları tarafından artarak desteklenen HTML5 ve CSS3 özelliklerinin web sitelerinde kullanılmaya başlanması beraberinde birtakım potansiyel problemler de getirmektedir.
Bunların başında modern özelliklerin eski tarayıcılar tarafından desteklenmemesi ve bunun sonucu olarak beklenmeyen veya arzu edilmeyen görsel ve işlevsel sonuçların doğması gelmektedir.
HTML5’in Coğrafik Lokasyon Tespiti olan GeoLocation özelliğini kullanarak bu durumu örnekleyelim.
<script type="text/javascript">
function hata() {
alert("Tarayıcınız HTML5 GeoLocation destekliyor, ancak bir hata oluştu");
}
function lokasyonBulundu(lokasyon) {
alert("Lat: " + lokasyon.coords.latitude + ", " + "Long: " + lokasyon.coords.longitude);
}
navigator.geolocation.getCurrentPosition(lokasyonBulundu, hata);
script>
Yukarıdaki JavaScript kod parçacığı eğer tarayıcı HTML5 GeoLocation özelliğini destekliyorsa çalışacak ve tespit edilen Lokasyon koordinatlarının Latitude ve Longitude değerlerini bildirecektir. HTML5 GeoLocation özelliği desteklendiği halde bir hata oluşursa hata() metodu çalışacaktır.
Fakat eğer tarayıcı GeoLocation özelliğini desteklemiyorsa sayfa üzerinde bir JavaScript hatası oluşacaktır.
Modernizr bize tarayıcının herhangi bir HTML5 özelliğini destekleyip desteklemediğini rapor etmek suretiyle kodumuzun hataya düşmesini engellememize olanak sağlar.
//Modernizr sitesinden modernizr-2.5.3.js dosyasına referans
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js>script>
<script>
function hata() {
alert("Tarayıcınız HTML5 GeoLocation destekliyor, ancak bir hata oluştu");
}
function lokasyonBulundu(lokasyon) {
alert("Lat: " + lokasyon.coords.latitude + ", " + "Long: " + lokasyon.coords.longitude);
}
if 
Modernizr.geolocation) //Modernizr.geolocation true veya false döndürecek
navigator.geolocation.getCurrentPosition(lokasyonBulundu, hata);
else
alert("Tarayıcınız HTML5 GeoLocation desteklemiyor");
script>
Bu kodu irdeleyelim. http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js adresinden Modernizr’ı bir içerik ulaştırma ağından (CDN) yüklüyoruz. Bu yüklediğimiz dosya Modernizr’ın tüm özelliklerini içeriyor.
ÖNEMLİ NOT: Bu örnekte yüklenen modernizr.min.js dosyası bütün Modernizr özelliklerini yani kullanmadığımız bir çok özelliği de içermektedir. İdeal olarak, projelerimizde böyle bir dosya kullanmak yerine www.modernizr.com/download sitesinden sadece kullandığımız özellikleri içeren bir versiyon indirmemiz performans açısından önemli ve gereklidir.
Modernizr’in yüklemesinin hemen akabinde sayfamızda Modernizr adı ile ulaşabileceğimiz bir nesne yaratılmış oluyor. Bu nesne aracığıyla tarayıcının hangi HTML5 ve CSS özelliklerini desteklediğini sorgulayabiliriz.
Mesela, eğer tarayıcımız HTML5’in Canvas özelliğini destekliyorsa Modernizr.canvas ifadesi bize true,desteklemiyorsa false döndürecektir. Yine benzer şekilde eğer tarayıcımız CSS’in animasyon (cssanimations) özelliğini destekliyorsa Modernizr.cssanimations ifadesi bize true, desteklemiyorsa falsedöndürecektir.
Burada akla şu soru gelebilir: GeoLocation gibi tarayıcı tarafından desteklenen modern tarayıcı özelliklerisadece Modernizr ile mi tespit edilebilir? Hayır, bu kontrolü if navigator.geolocation) ifadesi ile de yapabilirdik. Ancak CSS özelliklerinin desteklenip desteklenmediğinin kontrolü if navigator.geolocation)ifadesi kadar kolay olmayacaktır. Modernizr kullanmak bize tarayıcılar arasında zaman zaman görülen JavaScript dili üzerindeki imla (syntax) uyumsuzluklarının yarattığı problemlerden arınmış bir programlama ara yüzü sağlamaktadır.
Modernizr bizim için başka bir önemli iş daha yapar. Sayfamız yüklendiğinde Modernizr otomatik olarak çalışır ve sayfanın elementine bir takım CSS sınıfları ekler. Bunu Firefox’un Firebug eklentisi ya da Internet Explorer’ın Developers Tool aracı ile görebiliriz.
Modernizr tarafından eklenen CSS sınıflarına örnek
<html class=" js canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
Yukarıdaki örnekte görülebileceği gibi no- önekli sınıflar tarayıcı tarafından desteklenmeyen özelliklere ve bu önekin mevcut olmadığı sınıflarda desteklenen özelliklere işaret ediyor. Peki Modernizr bunu neden yapar ve bu bize ne gibi yarar sağlar?
Örnek olarak CSS3’ün gradient özelliğine bakalım. Bu özelliği kullanarak herhangi bir imaj dosyası kullanmaksızın arka-planları değişken renkli yapabiliriz. Aşağıdaki CSS bunun bir örneğidir.
.gradyant {
background: -moz-linear-gradient(top, #ddd, #111); /* Firefox */
background: -webkit-linear-gradient(top, #ddd, #111); /* Chrome */
background: linear-gradient(top, #ddd, #111);
}
Bu CSS sınıfı bize (desteklendiği ortamda) şöyle gibi bir sonuç verecektir:
Bu özelliği desteklemeyen tarayıcılar için bir imaj dosyası kullanılarak benzer bir sonuç yaratacak şekilde alternatif bir CSS sınıfı yazılabilir:
.gradyantImaj {
background-image: url("gradyant.png");
}
Peki bu iki farklı CSS sınıflarını tarayıcının gradient özelliğini destekleyip desteklemediğine bağlı olarak gerekli HTML elemanlarına nasıl bağlayacağız. Bu JavaScript kullanmadan nasıl mümkün olacak?
İşte bu noktada Modernizr tarafından etiketine eklenen sınıflar bize yardımcı olabilirler. CSS kodumuzu aşağıdaki şekilde yazarak kendi CSS sınıflarımızı dinamik olarak sayfa üzerindeki HTML elemanlarına bağlayabiliriz.
.cssgradient .gradyant {
background: -moz-linear-gradient(top, #ddd, #111); /* Firefox */
background: -webkit-linear-gradient(top, #ddd, #111); /* Chrome */
background: linear-gradient(top, #ddd, #111);
}
.no-cssgradient .gradyant {
background-image: url("gradyant.png");
}
CSS3’ün gradient özelliğini destekleyen tarayıcılar otomatik olarak ilk CSS sınıfını desteklemeyen tarayıcılar ise ikinci sınıfı kullanacaklardır.
Modernizr ile HTML5 ve CSS özelliklerinin tespit edilişini inceledikten şimdi koşullu yükleme özelliğine değinmeliyiz. Modernizr’ın bu özelliği aslında çok basit bir tanımla belirli bir koşula bağlı olarak uygun JavaScript/CSS dosyalarının yüklemesidir. Aşağıdaki taslak Modernizr.load metodunun kullanılış şeklini gösterir.
Modernizr.load({
test: true ya da false döndürecek koşul,
yep : koşul true ise yüklenecek dosya veya dosyaları,
nope: koşul false ise yüklenecek dosya veya dosyaları,
both: her iki koşulda yüklenecek dosya veya dosyalar,
complete: function() {/*her şey yüklendikten sonra çalıştırılacak kod*/}
});
Modernizr.load metodunu kullanarak tarayıcı tarafından desteklenmeyen özellikler için geliştirilmiş ve sanki destekleniyor etkisi yaratacak özel JavaScript paketleri yükleyebilir ve eski tarayıcılarda da modern özellikleri simule edebiliriz. Bu özel ve bir nevi boşluk doldurucu JavaScript paketlerine polifil (polyfill)adı verilir ve neredeyse her bir HTML5 özelliği için bir polifil mevcuttur.
Mesela, HTML5 GeoLocation özelliğini desteklemeyen tarayıcılar için şöyle bir Modernizr.load ifadesi yazabiliriz:
Modernizr.load({
test: Modernizr.geolocation,
nope: 'geo-polifil.js' /*örnek polifil: https://gist.github.com/366184*/
});
Modernizr.load ile bir kerede birden çok koşul kontrol edilip, birden çok dosya yüklenebilir:
Modernizr.load([
{
test: Modernizr.canvas && Modernizr.cssgradients,
nope: ['görselPolifiller.js', 'görsel.css']
},
{
test: Modernizr.websockets && window.JSON,
nope: 'işlevselPolifiller.js',
both: ['esasİşlev.js', 'diğer.js'],
complete: function ) {
init();
}
}
]);
Yukarıdaki kod parçası Canvas ve CssGradients özellikleri desteklenmiyorsa görselPolifiller.js ve görsel.css dosyalarını yükleyecek ve benzer şekilde tarayıcı websockets ve JSON desteklemiyorsa işlevselPolifillerdosyasını, her iki durumda da esasİşlev.js ve diğer.js dosyalarını ve bütün yüklemeler tamamlandığında da init() metodunu çağırarak tamamlanacaktır.
Modernizr ve bize sağladıklarını, koşullu yükleme ve polifil kavramlarına da değinerek tanımış olduk. Microsoft tarafından da artık Visual Studio MVC proje şablonlarına otomatik olarak dahil edilen Modernizr kütüphanesi, içinde bulunduğumuz HTML5’e geçiş döneminde web programcılığında önemli bir yer almış ve almaya bir müddet daha devam edecektir. Moderniz’ı kullanarak modern çözümler üretebilir ve eski tarayıcıları polifil yöntemiyle destekleyebilir veya çözümlerimizi hataya düşürmeksizin bilinçli bir şekilde kontrol edebiliriz.
