Mengenal Modernizr

Modernizr adalah library JavaScript yang digunakan oleh banyak situs populer zoals Twitter, USMagazine, Good.is, About.com, dll Dalam posting kami sebelumnya, kami telah Disebutkan beberapa kali, tapi kami belum benar-benar menggali ke dalam apa yang Modernizr.

Jadi, dalam posting ini kita akan membahas ini Perpustakaan Secara khusus tentang JavaScript.

Apa itu Modernizr?

Pertama-tama, mari kita mendapatkan pertanyaan penting dijawab: apa Modernizr?
Berdasarkan situs resmi, Modernizr adalah "Sebuah perpustakaan JavaScript mendeteksi HTML5 dan CSS3 fitur ditugaskan, Bahwa dalam browser pengguna."
Meskipun HTML5 dan CSS3 yang besar tetapi banyak fitur baru yang mereka miliki, seperti yang kita sudah tahu sekarang, tidak banyak Keuangan berlaku di browser lama. Modernizr, membantu untuk mengatasi masalah ini dengan menguji browser pengguna mendukung pada Apakah fitur khusus. Jika fitur ini "didukung", maka kita dapat memberikan script kesesuaian atau fungsi untuk meniru fitur yang kurang.

Set-up Modernizr

Pada situs resmi Modernizr, kita akan menemukan dua pilihan untuk men-download versi file, Pengembangan dan Produksi.
Versi Pembangunan adalah versi lengkap dan terkompresi Terdiri dari semua tes fitur utama, sedangkan dalam versi produksi, kita dapat memilih tes fitur Bahwa kita hanya perlu.

Seperti yang Anda lihat, ada banyak pilihan untuk pengujian fitur di in the download page. Dalam contoh ini, kita akan memilih semua tes fitur utama. Menghasilkan dan ambil kode. Kemudian, masukkan file ke dalam bagian .
<script src="modernizr.js" type="text/javascript"></script> Terakhir, kita juga perlu menambahkan no-js pada tag <html>.

Kelas ini Diperlukan dalam kasus browser pengguna berjalan tanpa browser diaktifkan, kita dapat menambahkan fallback through this class. Jika tidak, Modernizr akan menggantikan kelas ini hanya dengan js.

Bekerja dengan Class

Sekarang, jika kita suatu Inspect Element pada halaman web kami, Anda akan melihat Bahwa ada banyak CSS kelas ditambahkan dalam tag <html>. Kelas-kelas yang dihasilkan dari Modernizr dan akan bervariasi Tergantung pada kemampuan browser.

Misalnya, jika browser tidak mendukung CSS3 Animasi, maka akan menghasilkan Modernizr Theno-cssanimations kelas. Tapi Ketika hal itu terjadi, ia akan menghapus no-prefix dan hanya menjadi cssanimations. Mari kita lihat pada potongan kode di bawah ini;

Kode di atas diambil dari Internet Explorer 7 dan seperti yang kita dapat lihat dari kelas yang dihasilkan, browser ini jelas kurang dalam begitu banyak fitur baru yang baik, tidak ada dukungan untuk zoals CSS3 border-radius.
Jadi, dalam kasus kita ingin mengganti presentasi radius perbatasan, katakanlah, dengan gambar rounded corner images in Internet Explorer 7, then we can use the no-broderradius class.

.no-borderradius div {
/*-- do some hacks here --*/
}

Jika Anda bertanya-tanya seberapa jauh browser Anda saat ini bootable untuk menangani HTML5 baru dan teknologi CSS3, Modernizr telah memberikan setelan tes yang dapat Anda gunakan. Kunjungi halaman ini (Modernizr Test Suit), dan Anda akan segera melihat output.

Browser Feature Test

Selanjutnya, Seperti disebutkan di atas, Modernizr dibuat untuk mendeteksi atau menguji fitur browser (Mudah). Untuk menguji fitur browser yang kita dapat menggunakan sintaks, berikut;

Modernizr.featuretodetect

Dengan asumsi kita ingin menguji apakah browser mendukung WebGL kita bisa menulis;

if (Modernizr.webgl) {
}

Juga kita dapat meniadakan pernyataan, bahwa cara hasilnya akan kembali sebaliknya, memang benar, Ketika browser tidak mendukung fitur;

if (!Modernizr.webgl) {
}

Atau, jika kita ingin menjalankan script yang berbeda Tergantung pada hasil tes, kita dapat memperpanjang kode Juga, sebagai berikut;

if (Modernizr.webgl) {
    /* Script A */
} else {
    /* Script B */
}

Kode di atas menyatakan Bahwa jika browser mendukung WebGL maka script A akan berjalan, jika tidak, maka Script B akan berjalan. Dengan begitu, script hanya akan dimuat Bila kondisi ini dan script sebenarnya dibutuhkan.

Modernizr.load

Satu hal lagi Bahwa kita akan melihat Modernizr adalah dari Modernizr.load.
Modernizr.load adalah sumber daya bersyarat (CSS dan JS) Bahwa loader didasarkan pada Yepnope. Mari kita lihat kode, berikut;

Modernizr.load({
  test: Modernizr.webgl,
  yep : 'three.js', /* JavaScript 3D Library */
  nope: 'jebgl.js' /*  */
});

Serupa dengan bagian sebelumnya, dalam contoh di atas, kita menjalankan tes untuk melihat apakah browser pengguna mendukung WebGL. Jika hasilnya kembali yep (mendukung WebGL) maka kita akan memuat three.js, tetapi jika ia mengembalikan nggak (tidak mendukung WebGL) maka kita akan memuat sumbu jebgl.js sebagai alternative.
Dalam kasus kita hanya perlu satu syarat untuk memuat script, kita dapat menghapus yang lain Bahwa kita tidak perlu. Berikut ini, contoh menunjukkan bagaimana kita load placeme.js, jika browser pengguna tidak mendukung atribut placeholder dan tidak akan memuat Ketika hal itu terjadi.

Modernizr.load({
  test: Modernizr.placeholder,
  nope: 'placeme.js'
});

Praktek ini, seperti dalam diskusi kami sebelumnya, bersedia untuk Memastikan Bahwa pengguna akan memiliki kinerja terbaik dengan beban Menghindari bit yang tidak perlu untuk men-download - dengan kata lain, kita hanya akan memuat script, Hanya Ketika diperlukan.Untuk pelaksanaan lebih lanjut Modernizr.load Top maju atau Anda dapat lihat dokumentasi resmi atau Anda juga dapat merujuk ke Yepnope dokumentasi di mana ia awalnya berasal

Kesimpulan

Sudah melakukan kerja keras dan menghemat banyak waktu kita untuk kita, sehingga tidak ada alasan untuk tidak menyertakan Perpustakaan JavaScript Ketika Anda bekerja dengan HTML5 dan CSS3, Terutama Ketika Anda perlu mengisi kesenjangan antara teknologi baru dan tua browse
sumber dan gambar ongkiat.com
Mengenal Modernizr

Tips Cakemier