Dengan perkembangan cepat HTML5 dan CSS3, semakin banyak tag semantik dan fitur keren telah diterapkan pada pengembangan aplikasi web. Produsen browser utama telah mulai mendukung fitur -fitur baru ini, dan pengembang web juga tertarik untuk mencoba fitur -fitur baru ini untuk mengembangkan aplikasi yang lebih berwarna dan menarik. Namun, masalah kompatibilitas versi yang disebabkan oleh dukungan yang tidak merata dari fitur-fitur baru ini (terutama IE yang merangsang sakit kepala) selalu merupakan mimpi buruk yang tetap ada di benak pengembang. Kebiasaan penggunaan tradisional menyulitkan kita untuk meninggalkan versi lama browser, dan pengembang hanya dapat memilih pengujian manual yang membosankan, menguji, dan kemudian menguji.
Untuk menyelesaikan masalah ini, Modernizr muncul. Namanya terdengar seperti modernisasi, dan memang, namanya berasal dari tujuan membuat pengalaman pengembangan lebih modern, tetapi ini bukan upaya untuk memodernisasi browser lama, yaitu, mendukung fitur -fitur baru ini (meskipun Anda memang dapat membuat browser mendukung fitur baru tertentu yang tidak didukung dengan menambahkan skrip Shim/Polyfill, seperti yang akan dibahas nanti).
Modernizr adalah perpustakaan JS open source yang mendeteksi dukungan browser untuk fitur HTML5 dan CSS3. Situs web kompatibilitas browser HTML5/CSS3 yang terkenal FindMebyip didasarkan pada kerangka kerja ini. Kami dapat menggunakannya untuk mendeteksi apakah browser mendukung beberapa fitur baru, dan bahkan memuat skrip tambahan untuk memenuhi kebutuhan Anda untuk secara dinamis memuat file JS yang berbeda sesuai dengan situasi yang berbeda untuk mengurangi unduhan dan meningkatkan kinerja.
Modernizr menyediakan dua versi: pengembangan dan produksi. Versi pengembangan mencakup deteksi semua fitur HTML5 dan CSS3 baru, cocok untuk belajar dan menguji. Untuk pemula yang baru saja mulai menggunakan Modernizr, Bella merekomendasikan agar Anda menggunakan versi ini. Setelah Anda terbiasa dengan prinsip kerja Modernizr, Anda dapat menggunakan versi produksi khusus. Anda hanya dapat mengunduh sebanyak mungkin fitur yang perlu Anda deteksi untuk sangat mengurangi jumlah unduhan, yang dapat sedikit meningkatkan kinerja program Anda sampai batas tertentu. Anda dapat mengunduh dua versi ini di http://modernizr.com/download/, klik tautan versi pengembangan pada halaman untuk mengunduh versi pengembangan, atau Anda telah melihat halaman tampilan fitur berikut
Anda dapat memeriksa fitur HTML5 atau CSS3 apa pun yang ingin Anda uji, tetapi secara default, kategori tambahan akan dipilih sebagai berikut:
a) html5 shiv v3.6: ia menambahkan skrip-html5 shim itu memaksa IE6-8 untuk merancang dan mencetak elemen html5 dengan benar. Jika Anda berencana untuk menggunakan tag semantik HTML5 baru, seperti <Header>, <footer>, <av nav>, <section>, <carticle>, dll., Maka Anda perlu memilih opsi ini.
b) Modernizr.Load (yepnope.js): Ini menambahkan loader skrip opsional yang tidak termasuk dalam versi pengembangan. Ini meningkatkan unduhan 3kb, jadi jika Anda tidak membutuhkannya, Anda dapat menyerah memilihnya.
c) Tambahkan kelas CSS: Ini menambahkan kelas Modernizr ke tag awal. Jika Anda ingin mendeteksi dukungan untuk fitur CSS3, Anda harus memilih opsi ini.
Metode menggunakan Modernizr sangat sederhana. Setelah Anda mengunduh versi pengembangan, Anda hanya perlu memperkenalkan file perpustakaan JS ke dalam halaman, seperti:
1 | < type script = text/javascript src = > js/modernizr.js script ></ |
Setelah menambahkan referensi Modernizr, ketika program JS berjalan, itu akan menambahkan batch nama kelas CSS ke elemen HTML. Nama -nama kelas ini menandai dukungan yang fitur dan fitur mana yang tidak mendukung di browser saat ini. Jika mendukungnya, nama fitur yang sesuai akan ditampilkan. Jika tidak mendukungnya, nama tanpa fitur akan ditampilkan. Misalnya, jika browser yang terdeteksi mendukung boxshadow properti CSS3, Modernizr akan menambahkan kelas BoxShadow ke tag, jika tidak, kelas No-Boxshadow akan ditambahkan. Gambar di bawah ini menunjukkan dukungan untuk fitur HTML5 dan CSS3 baru pada Chrome 23.0.1271.64.
Kemudian, Anda hanya perlu mendefinisikan informasi gaya yang sesuai dalam lembar gaya CSS Anda, Anda dapat mendefinisikannya seperti di bawah ini:
1 | .boxshadow #MyContainer { |
2 | border : none ; |
3 | -webkit-box-shadow: #666 1px 1px 1px ; |
4 | -moz-box-shadow: #666 1px 1px 1px ; |
5 | } |
6 | .no-boxshadow #MyContainer { |
7 | border : 2px solid black ; |
8 | } |
Karena browser mengabaikan fitur CSS3 yang tidak didukung, jika versi browser saat ini tidak mendukung properti BoxShadow, itu akan mengabaikan kelas Boxshadow dan sebaliknya merujuk pada gaya yang ditentukan dalam kelas No-Boxshadow, menyimpan logika yang merepotkan untuk mendeteksi nama browser dalam program JS.
Tentu saja, ketika skenario aplikasi Anda mengharuskan Anda untuk menentukan apakah fitur baru didukung dalam program dan memberikan logika pemrosesan yang berbeda, Anda juga dapat menggunakan Modernizr untuk membuat penilaian dengan mudah. Pada saat ini, Anda perlu menggunakan objek global bernama Modernizr yang dibuat oleh Modernizr. Konten adalah daftar hasil boolean yang diberikan untuk setiap fitur yang terdeteksi. Jika browser mendukung properti Boxshadow, maka nilai modernizr.boxshadow benar, jika tidak itu salah. Oleh karena itu, setelah memperkenalkan file perpustakaan, Anda juga dapat menggunakan metode ini untuk mendeteksi dukungan browser untuk fitur ini. Objek JS ini juga berisi informasi yang lebih rinci untuk fungsi -fungsi tertentu. Misalnya, modernizr.video.h264 akan memberi tahu Anda apakah browser mendukung codec khusus ini, dan modernizr.InputTypes.Search akan memberi tahu Anda apakah browser saat ini mendukung jenis input pencarian baru.
Selain itu, jika Modernizr tidak mengandung fitur yang perlu Anda deteksi, Anda dapat menghubungi fungsi addtest yang dienkapsulasi modernizr untuk diuji. Untuk fitur HTML5 dan CSS3 yang berbeda, kita dapat menemukan banyak fungsi addtest yang sudah ditulis di GitHub (untuk beberapa alasan, modernizr diblokir, dan proyek ini sekarang di -host di GitHub). Mari kita lihat contoh sederhana. Jika Anda ingin menguji apakah browser mendukung GetUsermedia API (API dalam teknologi WebRTC baru), Anda dapat menulis fungsi addTest berikut untuk menguji:
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
Saya percaya bahwa setelah perkenalan singkat, Anda telah mengalami kenyamanan yang dapat dibawa oleh Modernizr ke pengembangan. Setelah memahami fungsi Modernizr dan cara menggunakan Modernizr, Anda juga dapat mempelajari banyak pengetahuan baru dengan melihat kode sumbernya dan membiasakan diri dengan prinsip -prinsip implementasinya. Meskipun Bella adalah pemula dalam hal ini, dia masih berbagi pengalaman dengan Anda saat membaca kode sumber.
Bella menyebutkan objek global Modernizr sebelumnya. Bagaimana cara dibuat di Modernizr? Mari kita lihat kode sumber berikut:
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | return Modernizr; |
6 | })( this , Dokumen this .document); |
Bagian kode ini menggunakan fungsi asinkron untuk menghasilkan namespace (meskipun tidak ada namespace nyata di JS), dan fungsi mengembalikan objek modernizr, yang ditugaskan ke Window.mordernizr, sehingga program JS lainnya dapat secara langsung menggunakan objek Window.modernizr atau modernizr. Parameter yang dilewati ketika fungsi disebut mengacu pada lingkungan konteks eksekusi fungsi, yaitu objek global jendela.
Bagaimana cara menguji tingkat dukungan untuk fitur baru CSS3? Ternyata Modernizr pertama -tama akan membuat objek DOM, dan kemudian menggunakan atribut gaya di bawah objek ini untuk menguji apakah mendukung fitur CSS3 baru. Kodenya adalah sebagai berikut:
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
Untuk browser, apakah itu dapat mengenali tag HTML kami yang baru dibuat atau tidak, kami dapat menata, sehingga kami dapat menata tag yang baru dibuat di sini. Misalkan kita ingin menguji apakah browser mendukung HSLA untuk mendefinisikan warna dalam CSS, pertama -tama kita dapat menulis gaya dengan atribut HSLA yang diterapkan untuk meletakkannya di bawah label, dan kemudian periksa apakah nilai gaya berisi string HSLA. Jika browser tidak mendukungnya, tidak akan ada string HSLA (karena aksi menempatkan gaya dengan atribut HSLA yang diterapkan pada tag modernizr tidak akan berlaku sama sekali). Kita dapat menulis kode berikut:
1 | tests[ 'hsla' ] = function () { |
2 | setCss('background-color:hsla(120,40%,100%,.5) '); |
3 | return contains(mStyle.backgroundColor, 'rgba' ) || |
4 | contains(mStyle.backgroundColor, 'hsla' ); |
5 | }; |
Di sini, karena beberapa browser akan mengonversi notasi HSLA ke RGBA, kami juga memeriksa apakah ada string RGBA.
Untuk atribut CSS dengan awalan vendor, kita perlu memberikan perawatan yang berbeda. Kembali ke properti Boxshadow, Modernizr akan menguji apakah ada Boxshadow, Webkitboxshadow, Mozboxshadow, Oboxshadow, MSBoxShadow atau properti KHTMLBoxShadow di bawah variabel MSTYLE yang dibuat di atas. Jika demikian, itu berarti bahwa browser mendukung properti ini. Di sini kami terutama menggunakan dua fungsi yang dienkapsulasi Modernizr, satu adalah TestProp () dan yang lainnya adalah TestAllProps (). Modernizr.testprop (str) Mengembalikan apakah properti gaya yang diberikan dapat dikenali, sementara modernizr.testallprops (STR) mengembalikan apakah properti gaya yang diberikan dapat dikenali, atau apakah properti gaya dengan awalan vendor dapat dikenali.
Untuk lebih banyak pengetahuan kode sumber, saya akan memperkenalkannya kepada Anda setelah Bella memiliki lebih banyak penelitian mendalam di masa depan. Bella percaya bahwa jika Anda terbiasa dengan prinsip -prinsip dan penggunaan Modernizr, itu pasti akan membantu Anda meningkatkan efisiensi pengembangan.
Akhirnya, Bella secara singkat merangkum beberapa materi untuk semua orang untuk belajar dari Modernizr:
1. Situs web resmi Modernizr: http://modernizr.com/docs/ Anda dapat mempelajari pengetahuan modernizr, kode sumber, dan unduh modernizr darinya.
2. URL Tes Modernizr: http://modernizr.github.com/modernizr/test/index.html Anda dapat meminta status dukungan fitur HTML5 dan CSS3 dari setiap browser di atas. Metode kueri:
Klik Tampilkan Tes Ref dari Caniuse dan Modernizr di bagian bawah halaman ini, dan kemudian klik salah satu tautan tabel untuk fitur HTML5 atau CSS3 yang diuji untuk melihat dukungan dari setiap browser.
3. Informasi Terkait Script Shim/Polyfill: https://github.com/modernizr/modernizr/wiki/html5-cross browser-polyfills
4. Unduh alamat berbagai fungsi addtest yang mendeteksi fitur HTML5 dan CSS3 baru:
https://github.com/modernizr/modernizr/tree/master/feature-detects
Artikel ini dari blog Tencent Wuhan. Harap tunjukkan sumber saat mencetak ulang