Modernizr, MIT lisanslı, açık kaynak bir javascript kütüphanesidir. Html5&CSS3 özelliklerinin desteklenip desteklenmediklerini belirler. Her zaman son sürümünü kullanmanız tavsiye edilir. Kullanmak için aşağıdaki <script>öğesini sayfanızın üst kısmına yerleştirin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5'e Giriş</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
Modernizr otomatik olarak çalışır. Modenizr’ı başlatmak için modernizr_init() gibi bir fonksiyon yoktur. Çalıştığı zaman, Modernizr adında yeni bir genel nesne oluşturur. Modernizr, tanımladığı her bir sayfa için bir dizi Boolean özellikler içerir. Eğer tarayıcınız canvas apisini destekliyorsaModernizr.canvas özelliği true(doğru) olacaktır. Eğer desteklemiyorsa false(yanlış) olacaktır.
if (Modernizr.canvas) {
// bir kaç şekil çizelim
} else {
// canvas desteği yok
}
Javascript ile uğraşmada oluşturduğu css tanımları ile de kullanabilirsiniz:
HTML tagı altına bir çok CSS class ı ekleyen bu kütüphane, kullanacağınız CSS özelliğini client tarafındaki browser desteklemiyorsa yazılacak olan CSS bir if statement içerisinde kolayca yazımını sağlıyor.
Örnek verecek olursak bir div elementine çoklu arka plan vermek istiyorsunuz ancak bunu her browserda sorunsuz yapamazsınız. Hele ki IE6 da . Şu tarz bir kodlama ile bunu kolaylıkla çözebilirsiniz.
div.kutu { width: 500px; }
.multiplebgs div.kutu { background: url(altsol.jpg) bottom left no-repeat,
url(altsag.jpg) bottom right no-repeat,
#ccc url(altorta.jpg) bottom center repeat-x; }
.no-multiplebgs div.kutu {
background: #ccc url(altbutun.jpg) bottom left no-repeat;
}
Kaynaklar:
Hiç yorum yok:
Yorum Gönder