Modernizr nedir ne işe yarar?

ASP.Net Mvc 4 projesi oluşturunca site ile gelen kütüphanelerden biri de Modernizr’dır. Modernizr, özellik tespit etme (feature detection) için kullanılan bir javascript kütüphanesidir. Web’e gelen her yeni standart eski tarayıcıların biraz daha geride kalmasına neden olur. Son zamanlarda gelen CSS3 ile HTML5 in bazı tarayıcılarca desteklenmemesi gibi. İşte Modernizr tarayıcının x özelliğini destekleyip desteklemediğini öğrenme noktasında ortaya çıkar. Şunu bilmek önemli: Bu kütüphane eski tarayıcıların yeni özellikleri desteklemesini sağlamaz. Sadece destekliyor mu desteklemiyor mu onu öğrenmemizi sağlar.

Gelelelim “neden kullanayım” kısmına. Eski tarayıcıların yeni css özelliklerini dikkate almadığı doğru. Ama x özelliğini desteklemiyorsa şunu şöyle yap diyemiyorsun. Örneğin tarayıcı gradient desteklemiyorsa arkaya gradient bir imaj koymak istiyorum vs. Bunun için kullanılan yöntemlerden biri tarayıcının ne olduğunu yoklamak (browser sniffing) ve buna göre karar vermekti:

if(userAgent.indexOf('MSIE') >= 0) { //bir seyler yap }

Her yeni tarayıcıda veya tarayıcı versiyonunda bu tip kodların günecellenmesi lazım. Ayrıca bir sürü tarayıcı ve versiyonu var hepsini kapsamak çok zor. Zaten genelde en çok kullanılan tarayıcılar sniff edilir(di). Kısacası browser sniffing eskidendi ve yanlıştır.

Ama Modernizr tarayıcının bir özelliği destekleyip desteklemediğini size feature detection yöntemi ile söyler. Bu durumda tarayıcının versiyonu veya tipi önemsizdir ve yöntem kırılgan değil (her yeni tarayıcı versiyonunda güncellenmek zorunda kalmaz kod). Peki nasıl anlarsınız özelliğin desteklenip desteklenmediğini? Modernizr kullanıldığında html tagine özel bir class verilir:

<html class="no-js">

Modernizr çalışır çalışmaz hangi özelliklerin desteklenip hangilerinin desteklenmediği doğrultusunda o classı değiştirir ve şuna benzer bir hale getirir:

<html class=”js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>

no- ile başlayan classlar o özelliğin desteklenmediğini, sadece özellik adını taşıyanlar ise o özelliğin desteklendiğini belirtir.

Eee peki napalım? İşte bu classları graceful degradation’da kullanıyoruz. Nasıl mı?

.no-js .glossy, .no-cssgradients .glossy { background: url("images/gradient.png"); } .cssgradients .glossy { background-image: linear-gradient(top, #555, #333); }

Burada .no-cssgradients (yani tarayıcı gradient desteklemiyorsa) classı için arkada bir imaj, .cssgradients için ise css gradient’ı kullanılsın dedik. Bunun gibi diğer özellikler için de Modernizr yardımıyla envai çeşit tarayıcıda istediğimiz gibi görünmesini ve davranmasını sağlayabiliriz sayfanın.

One thought on “Modernizr nedir ne işe yarar?

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s