Modernizr Js Nedir ?
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.
Bu kadar giriş yaptıktan sonra artık konuya girelim.
Modernizr günümüzün sık kullanılan javascript frameworklerinden biri, Wappalyzer’e göre ise jQuery’den sonra en fazla kullanılanı.
Modernizr’in koşulları ele alış biçimi oldukça basit ve anlaşılırdır. Desteklenen özellikler direkt kendi adlarıyla, desteklenmeyen özellikler ise önlerinde “no-” etiketleri eklenir. Dolayısıyla biz özelliklerin tarayıcılar tarafından desteklenmesi ve desteklenmemesi durumlarını işte bu etiketler yardımıyla ele alarak tüm tarayıcılar için en iyi sonuç elde edebilme şansına sahip oluruz. Örneğin CSS’imizde var olan x sınıfını destekleyip destekleme durumunu .x{…} ve .no-x{} şeklinde ele alarak olası durumlara yönelik tatminkar çözümler elde etmiş oluruz.
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. 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*/}
});
Örneğin İE 7’nin column-count ve box-shadow özelliklerini desteklememesi sorununda ortaya çıkan garip görüntüden ve bunu gidermenin yolunu örnekleyelim. Çözüm ise desteklenmeyen durumları ele almak ve ona benzeyen birşey yapmak:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }
.no-csscolumns img { /* styles for browsers that don't support columns count */ }
.no-boxshadow img {
border-right: #fafafa 2px;
border-bottom: #fafafa 2px;
}
.no-csscolumns img {
margin: 3px 8px 3px 0;
float: left;
}
Özetle Modernizr, tarayıcıların desteklediği HTML5 ve CSS3 özellikleri hakkında size bilgi sunarak desteklenen ya da desteklenmeyen durumlara göre koşullu ifadeler yazabilmenize ve tüm tarayıcılar için çalışabilen bir sonuç elde edebilmenize imkan tanır.
web sitesi : modernizr.com
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.
Bu kadar giriş yaptıktan sonra artık konuya girelim.
Modernizr günümüzün sık kullanılan javascript frameworklerinden biri, Wappalyzer’e göre ise jQuery’den sonra en fazla kullanılanı.
Ne işlev yaptığı ise kendi sayfasındaki açıklama ile “Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser” yani kullanıcıların kullandıkları tarayıcıların CSS3 ve HTML5’in hangi özelliklerini desteklediğini tespit eden bir javascript kütüphanesidir.Modernizr’in tarayıcılardaki CSS3 ve HTML5 özelliklerini tespit etmesi, desteklenmeyen özelliklere yönelik program geliştirmede çok önemlidir. İşte Modernizr tam bu noktada devreye girerek desteklenen özellikler için bunu uygula, desteklenmeyen özellikler için şunu diyerek koşullu bir yaklaşımlara imkan verir ve tarayıcılardan kaynaklanan durumlar için en iyi çözüm yolu ortaya koyabilmenize müsaade eder.
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">
Modernizr’in koşulları ele alış biçimi oldukça basit ve anlaşılırdır. Desteklenen özellikler direkt kendi adlarıyla, desteklenmeyen özellikler ise önlerinde “no-” etiketleri eklenir. Dolayısıyla biz özelliklerin tarayıcılar tarafından desteklenmesi ve desteklenmemesi durumlarını işte bu etiketler yardımıyla ele alarak tüm tarayıcılar için en iyi sonuç elde edebilme şansına sahip oluruz. Örneğin CSS’imizde var olan x sınıfını destekleyip destekleme durumunu .x{…} ve .no-x{} şeklinde ele alarak olası durumlara yönelik tatminkar çözümler elde etmiş oluruz.
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. 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*/}
});
Örneğin İE 7’nin column-count ve box-shadow özelliklerini desteklememesi sorununda ortaya çıkan garip görüntüden ve bunu gidermenin yolunu örnekleyelim. Çözüm ise desteklenmeyen durumları ele almak ve ona benzeyen birşey yapmak:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }
.no-csscolumns img { /* styles for browsers that don't support columns count */ }
.no-boxshadow img {
border-right: #fafafa 2px;
border-bottom: #fafafa 2px;
}
.no-csscolumns img {
margin: 3px 8px 3px 0;
float: left;
}
Özetle Modernizr, tarayıcıların desteklediği HTML5 ve CSS3 özellikleri hakkında size bilgi sunarak desteklenen ya da desteklenmeyen durumlara göre koşullu ifadeler yazabilmenize ve tüm tarayıcılar için çalışabilen bir sonuç elde edebilmenize imkan tanır.
web sitesi : modernizr.com
Kayıtlar
Hiç yorum yok: