Mendeteksi fitur html5/css3 baru menggunakan modernizr

Penulis：Eve Cole Waktu Pembaruan：2025-08-13 21:48:01

HTML5, CSS3 dan teknologi terkait seperti kanvas dan soket web telah membawa fitur yang sangat berguna yang dapat membantu program web kami meningkatkan tingkat baru. Teknologi baru ini memungkinkan kita untuk membangun beragam halaman bentuk yang dapat berjalan di tablet dan perangkat seluler hanya menggunakan HTML, CSS, dan JavaScript. Meskipun HTML5 menyediakan banyak fitur baru, tidak realistis untuk menggunakan teknologi baru ini jika kita tidak mempertimbangkan versi lama browser. Versi lama browser telah digunakan selama bertahun -tahun, dan kita masih perlu mempertimbangkan masalah kompatibilitas dari versi -versi ini. Masalah yang harus diselesaikan dalam artikel ini adalah: ketika kami menggunakan teknologi HTML5/CSS3, bagaimana menangani masalah browser lama yang tidak mendukung fitur HTML5/CSS3.

Meskipun kita dapat menulis kode sendiri untuk menentukan apakah browser mendukung fitur HTML5/CSS3 tertentu, kode ini tidak terlalu sederhana. Misalnya: Menulis kode untuk menentukan bahwa pembayaran browser mendukung kanvan, kode kami mungkin mirip dengan yang berikut:

 <script> window.onload = function () {if (canvassupported ()) {alert ('canvas didukung'); }}; fungsi canvassupported () {var canvas = document.createElement ('canvas'); return (canvas.getContext && canvas.getContext ('2d')); } </script>

Jika Anda ingin menentukan apakah penyimpanan lokal didukung, kode tersebut mungkin mirip dengan yang di bawah ini, tetapi mudah untuk menyebabkan bug di bawah Firefox.

 <script> window.onload = function () {if (localstorageSupported ()) {alert ('Local Storage didukung'); }}; function localstorageSupported () {coba {return ('localstorage' di window && window ['localstorage']! = null); } catch (e) {} return false; } </script>

Dua contoh pertama semuanya memeriksa fitur. Jika ada banyak fitur HTML5/CSS3, kita harus menulis banyak salinan kode untuk menilai, tetapi untungnya, kode -kode ini tidak bergantung pada pesanan. Modernizr memungkinkan Anda untuk mengimplementasikan fungsi kompleks di atas dengan kode yang sangat sedikit. Mari kita lihat beberapa fitur penting dari Modernizr:

Mulailah dengan Modernizr

Pertama kali saya mendengar Modernizr, saya pikir itu berarti dimodernisasi, dan dapat menambahkan beberapa fitur HTML5/CSS3 baru ke browser yang lebih lama. Faktanya, Modernizr tidak melakukan ini, ini membantu kami meningkatkan praktik pengembangan kami, menggunakan metode yang sangat funky untuk membantu mendeteksi jika browser mendukung beberapa fitur baru, dan bahkan dapat memuat skrip tambahan. Jika Anda seorang pengembang web, itu adalah senjata yang sangat luar biasa untuk Anda.

Situs Resmi Modernizr: http://modernizr.com, Anda dapat menggunakan kedua jenis skrip (versi pengembangan dan versi produksi khusus). Situs web ini menyediakan alat permintaan khusus untuk hanya menghasilkan fitur deteksi yang Anda butuhkan, daripada versi besar dan lengkap yang dapat mendeteksi semuanya, yang berarti Anda dapat meminimalkan skrip Anda. Angka berikut adalah antarmuka alat generasi situs web resmi. Anda dapat melihat bahwa banyak HTML5/CSS3 dan teknologi terkait dapat dipilih.

Setelah mengunduh skrip khusus Anda, Anda dapat merujuknya seperti file JS normal, dan kemudian Anda dapat menggunakannya.

 <skrip src = skrip/modernizr.js type = text/javaScript> </cript>

Elemen modernizr dan html

Setelah menambahkan referensi Modernizr, segera berlaku. Saat 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. Fitur yang didukung akan secara langsung menampilkan nama fitur hari ini sebagai kelas (misalnya: kanvas, websockets). Kelas yang ditampilkan oleh fitur yang tidak didukung adalah nama tanpa properti (misalnya: no-flexbox). Kode berikut adalah efek berjalan di Chrome:

 <html class = js flexbox canvas canvastext webgl no-touch geolocation postmessage webdatabase indexeddb hashchange history draganddrop websockets rgba hsla multipelSize BorderImage boxsgradow csscolums csscolums Csscolums Csscolums csstransforms3d csstransitions fontface dihasilkan konten video audio localstorage sessionstorage webworkers applicationCache svg inlinesvg smil svgclippaths>

Kode berikut adalah efek dari berjalan di bawah IE9:

 <html class = js no-flexbox canvas kanvas kanvas canvastext no-webgl no-touch geoloke postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiple-nobgs no-bordersizats no-bordermage no-csssanimations no-csscolumns no-cssgradients no-cssreflections csStransforms no-csstransforms3d no-csstransitions fontface dihasilkan konten audio localstorage sessionstorage no-webworkers no-applicationcheche svg inlinesvg smmg smmg smmg smmg smmg smgg smgg smg

Menggunakan Modernizr, kode berikut dapat terjadi (tambahkan nama no-js ke kelas):

 <html class = no-js>

Anda dapat mengunjungi situs (http://html5boilerplate.com) untuk melihat konten terkait boilerplate html5, atau (http://initializr.com) untuk melihat konten terkait inisialisasi, tambahkan kelas No-J ke elemen HTML, yang memberi tahu browser apakah javascript didukung. Jika tidak didukung, no-js akan ditampilkan. Jika didukung, no-js akan dihapus. Sangat keren, kan?

Gunakan dengan fitur HTML5/CSS3

Anda dapat secara langsung menggunakan nama kelas yang dihasilkan oleh Modernizr di elemen <Html> untuk menentukan atribut yang sesuai dalam file CSS Anda untuk mendukung browser saat ini. Misalnya, kode berikut dapat menampilkan bayangan di browser yang mendukung Shadow Shadow, dan menampilkan perbatasan standar di browser yang tidak mendukung:

 .boxshadow #mycontainer {border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;} .no-boxshadow #mycontainer {border: 2px solid black;}

Karena jika browser mendukung shadow kotak, Modernizr akan menambahkan kelas BoxShadow ke elemen <Html>, dan Anda dapat mengelolanya ke ID Div yang sesuai. Jika tidak didukung, Modernizr akan menambahkan kelas no-boxshadow ke elemen <Html>, yang menunjukkan perbatasan standar. Dengan cara ini, kami dapat dengan mudah menggunakan fitur CSS3 baru di browser yang mendukung fitur CSS3, dan terus menggunakan metode sebelumnya pada browser yang tidak mendukungnya.

Selain menambahkan kelas yang sesuai ke elemen <html>, Modernizr juga menyediakan objek JavaScript modernizr global, yang menyediakan properti yang berbeda untuk menunjukkan apakah fitur baru didukung di browser saat ini. Misalnya, kode berikut dapat digunakan untuk menentukan apakah browser mendukung kanvas dan penyimpanan lokal. Sangat bermanfaat bagi banyak pengembang untuk mengembangkan dan menguji di bawah browser multi-versi, dan semua orang dapat menyatukan kode.

 $ (dokumen) .ready (function () {if (modernizr.canvas) {// Tambahkan kode kanvas} if (modernizr.localstorage) {// Tambahkan kode penyimpanan lokal}});

Objek Modernizr global juga dapat digunakan untuk mendeteksi apakah fitur CSS3 didukung. Kode berikut digunakan untuk menguji apakah transformasi perbatasan dan CSS didukung:

 $ (dokumen) .ready (function () {if (modernizr.borderradius) {$ ('#myDiv'). addClass ('borderradiusstyle');} if (modernizr.csstransforms) {$ ('#myDiv'). addClass ('transformsstyle');

Beberapa fitur CSS3 lainnya dapat mendeteksi hasil, seperti Opacity, RGBA, Text-Shadow, Animasi CSS, Transisi CSS, banyak latar belakang, dll. Daftar terdeteksi HTML5/CSS3 lengkap yang didukung oleh Modernizr dapat ditemukan di http://www.moderniz.com/docs sebagai berikut.

Memuat skrip skrip dengan modernizr

Pada beberapa browser yang tidak mendukung fitur baru, Modernizr tidak hanya menyediakan metode di atas untuk memberi tahu Anda, tetapi juga menyediakan fungsi beban untuk memungkinkan Anda memuat beberapa skrip shim/polyfill untuk mencapai dukungan (untuk informasi tentang shim/polyfill, silakan kunjungi: https://github.com/modernizr/modernizr/wiki/htmitm. Modernizr menyediakan loader skrip untuk menentukan fungsi, dan jika tidak didukung, skrip yang sesuai akan dimuat. Skrip terpisah juga dapat ditemukan di http://yepnopejs.com.

Anda dapat menggunakan fungsi Modernizr's Load () untuk secara dinamis memuat skrip. Atribut uji fungsi menunjukkan apakah itu didukung. Jika tes berhasil didukung, skrip yang ditetapkan oleh atribut YEP dimuat. Jika tidak didukung, skrip yang ditetapkan oleh atribut NOPE akan dimuat. Terlepas dari apakah itu didukung atau tidak, skrip yang ditetapkan oleh kedua atribut akan dimuat. Kode contoh adalah sebagai berikut:

 Modernizr.load ({test: modernizr.canvas, yep: 'html5canvaSavailable.js', tidak: 'excanvas.js', keduanya: 'mycustomscript.js'});

Dalam contoh ini, Modernizr akan menentukan apakah browser saat ini mendukung fitur Canvas. Jika didukung, itu akan memuat dua skrip html5canvaSavailable.js dan mycustomscript.js. Jika tidak didukung, itu akan memuat file skrip excanvas.js (digunakan untuk versi sebelum IE9) untuk membuat browser mendukung fungsi kanvas, dan kemudian memuat skrip mycustomscript.js.

Karena Modernizr dapat memuat skrip, Anda juga dapat menggunakan kegunaan lain, misalnya, jika skrip pihak ketiga yang Anda referensi (seperti Google dan Microsoft yang menyediakan layanan CDN menyediakan hosting jQuery) gagal memuat, Anda dapat memuat file alternatif. Kode berikut adalah contoh pemuatan jQuery yang disediakan oleh Modernizr:

 Modernizr.load ([{load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', lengkap: function () {if (! Window.jQuery) {modernizr.load ('js/libs/jQuery-1.6.min.min.min.mins'; untuk memuat dan // jalankan jika perlu.

Kode ini pertama -tama akan memuat file jQuery dari Google CDN. Jika unduhan atau pemuatan gagal, fungsi lengkap akan dieksekusi. Pertama, tentukan apakah objek JQEury ada. Jika tidak ada, Modernizr akan memuat file JS asli yang ditentukan. Jika bahkan file yang lengkap tidak berhasil dimuat, file kebutuhan-jquery.js akan dimuat.

Meringkaskan:

Modernizr jelas merupakan alat yang diperlukan jika Anda menggunakan HTML5/CSS3 terbaru untuk membangun program Anda. Menggunakannya, Anda dapat menyimpan banyak kode dan menguji pekerjaan, dan Anda bahkan dapat menerapkan fitur baru yang sesuai dalam bentuk skrip pemuatan tambahan untuk beberapa browser yang tidak mendukung fitur baru.

Alamat asli: http://weblogs.asp.net/dwahlin/archive/2011/11/16/detecting-html5-css3-features-using-modernizr.aspx