Browser tradisional tidak sepenuhnya diganti saat ini, menyulitkan Anda untuk menyematkan fitur CSS3 atau HTML5 terbaru ke dalam situs web Anda. Modernizr muncul untuk menyelesaikan masalah ini. Sebagai pustaka JavaScript open source, Modernizr mendeteksi dukungan browser untuk fitur CSS3 atau HTML5. Modernizr tidak mencoba menambahkan fitur yang tidak didukung oleh browser yang lebih lama, tetapi memungkinkan Anda untuk memodifikasi desain halaman dengan membuat konfigurasi gaya opsional. Ini juga dapat mensimulasikan fitur yang tidak didukung oleh browser yang lebih lama dengan memuat skrip yang disesuaikan.
Modernizr mudah digunakan, tetapi tidak mahakuasa. Keberhasilan penggunaan Modernizr sangat tergantung pada keterampilan CSS dan JavaScript Anda. Panduan ini memungkinkan Anda untuk mempelajari cara mengatur gaya opsional untuk browser yang tidak mendukung multi-kolom atau proyeksi. Selain itu, Anda dapat mempelajari cara mendapatkan browser yang lebih lama untuk memvalidasi formulir yang menggunakan properti yang diperlukan HTML5 terbaru, dan cara memuat file skrip secara selektif berdasarkan fungsionalitas browser.
Modernizr adalah perpustakaan JavaScript yang digunakan untuk mendeteksi dukungan fungsionalitas browser. Saat ini, dengan memeriksa pemrosesan browser dari serangkaian tes, Modernizr dapat mendeteksi 18 fungsi CSS3 dan lebih dari 40 fungsi tentang HTML5. Ini lebih dapat diandalkan daripada cara tradisional untuk mendeteksi nama browser (sniffing browser). Waktu eksekusi satu set lengkap tes hanya membutuhkan beberapa mikrodetik. Selain itu, situs web Modernizr menggunakan skrip khusus untuk mendeteksi hanya elemen yang menarik, sehingga mencapai optimasi efisiensi.
Saat menggunakan Modernizr untuk mendeteksi dukungan CSS3, Anda tidak perlu memiliki pengetahuan JavaScript. Anda hanya perlu memasukkan file ke halaman web, dan kemudian akan menambahkan satu set kelas ke tag <html> halaman sesuai dengan fungsionalitas browser. Nama -nama kelas yang sesuai telah memenuhi persyaratan standardisasi dan mudah dimengerti. Misalnya, jika browser mendukung properti shadow kotak, Anda perlu menambahkan kelas Boxshadow yang sesuai; Jika tidak, tambahkan kelas No-Boxshadow. Yang harus Anda lakukan adalah membuat tabel gaya yang menggunakan kelas -kelas ini untuk memberikan gaya yang sesuai untuk browser yang sesuai.
Modernizr memudahkan untuk mengimplementasikan solusi JavaScript, yang dikenal sebagai Polyfill - ini mensimulasikan fitur dan teknologi terkait HTML5 seperti geolokasi. Namun, Anda perlu memiliki pemahaman dasar tentang JavaScript untuk menggunakan fitur dan teknologi ini. Istilah Polyfill berasal dari merek tanah liat Inggris yang mengisi retakan (mis., Bahan pengisian yang diketahui orang Amerika). Di sini, Polyfill digunakan untuk mengisi fungsi browser. Terkadang Modernizr melakukan tugas ini dengan mulus. Tetapi pada dasarnya, ini hanya pekerjaan yang ditambal, jadi Anda tidak dapat mengandalkannya untuk menghasilkan hasil yang sama persis yang dicapai oleh browser yang rentan.
Seperti perpustakaan JavaScript lainnya, Modernizr menyediakan versi pengembangan dan produksi. Satu -satunya perbedaan dibandingkan dengan kebanyakan perpustakaan adalah bahwa spasi dan komentar telah dihapus dari versi produksi, yang mengurangi ukuran unduhan. Modernizr mengambil pendekatan yang berbeda. Versi pengembangan dapat disebut wastafel di dapur dalam arti tertentu - itu berisi hampir semuanya. Versi produksi hanya berisi elemen -elemen yang Anda pilih, yang dapat secara signifikan mengurangi unduhan. Dalam banyak kasus, versi produksi dapat dikurangi menjadi satu kedua puluh ukuran versi pengembangan.
Saat menguji dengan Modernizr, saya sarankan Anda mengunduh versi pengembangan. Setelah Anda menguasai cara kerjanya dan kemampuannya, Anda dapat mengunduh versi produksi khusus untuk penempatan di situs web Anda.
File sampel untuk tutorial ini berisi versi pengembangan 2.0.6 dari Modernizr, tetapi saya sarankan Anda menggantinya dengan versi terbaru yang diperbarui dari situs Modernizr.
Catatan: Jika Anda mengklik tautan unduhan di menu navigasi utama karena kesalahan, Anda akan melihat sejumlah besar kotak centang yang muncul, meminta Anda untuk memilih alat yang Anda inginkan. Ini ditetapkan untuk versi produksi yang disesuaikan. Klik tautan ke versi pengembangan di bagian atas panel, atau klik tombol Kembali di browser Anda untuk kembali ke halaman beranda dan pilih tombol pengembangan yang ditunjukkan pada Gambar 1.
Seperti yang disebutkan sebelumnya, Modernizr tidak mencoba menambahkan fitur baru ke browser yang lebih lama, tetapi memungkinkan Anda untuk menebus fitur -fitur yang hilang dengan gaya Anda. Untuk menunjukkan cara kerjanya, file contoh berisi halaman yang disebut css_support_begin.html. Jika Anda memuat halaman ini di browser baru, itu akan terlihat seperti Gambar 2.
Gambar 2. Firefox 5 Menampilkan halaman dalam format multi-kolom dan menambahkan bayangan ke gambar Gaya halaman ini adalah menggunakan properti column-count dan box-shadow CSS3 untuk menampilkan teks dalam format multi-kolom dan menambahkan bayangan ke gambar. Versi browser yang lebih lama tidak mendukung salah satu dari properti ini, jadi halaman yang sama di Internet Explorer (IE) 7 terlihat seperti Gambar 3.
Di IE9, halaman yang sama menunjukkan bayangan gambar, tetapi teksnya sama dengan tata letak yang ditunjukkan pada Gambar 3.
Apa yang Anda ambil dalam mencoba menebus fitur yang hilang tergantung pada persyaratan garis besar desain Anda. Ini akan melibatkan banyak pekerjaan untuk mencoba membuat halaman terlihat persis sama di semua browser, tetapi Anda dapat membuat beberapa perbaikan sederhana, seperti mengelilingi teks di sekitar gambar, menyesuaikan margin kiri gambar ke teks, dan menambahkan batas-batas yang tidak jelas di bagian bawah dan kanan gambar untuk membuatnya terasa seperti lebih dari tiga dimensi.
Modernizr menggunakan JavaScript untuk mendeteksi fungsionalitas yang didukung oleh browser, tetapi alih -alih menggunakan JavaScript untuk secara dinamis memuat berbagai gaya, menggunakan teknik yang sangat sederhana untuk menambahkan kelas ke tag <html> halaman. Kemudian sebagai desainer, terserah Anda untuk memutuskan untuk menggunakan casing CSS untuk memberikan gaya yang sesuai untuk elemen target. Misalnya, jika halaman mendukung properti box-shadow , Modernizr akan menambahkan kelas boxshadow . Jika tidak didukung, maka ditambahkan dengan kelas no-boxshadow sebagai pengganti.
Karena browser mengabaikan properti CSS yang tidak dapat mereka kenali, Anda dapat menggunakan properti box-shadow dengan percaya diri sesuai dengan aturan gaya dasar Anda, namun Anda perlu menambahkan pemilih keturunan terpisah untuk browser yang lebih lama dalam format berikut:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } Hanya browser yang tidak mendukung box-shadow yang tidak akan memiliki kelas no-boxshadow , sehingga browser lain tidak akan menerapkan aturan gaya ini.
Mari kita tambahkan Modernizr ke halaman sampel dan periksa kelas yang ditambahkan ke tag <html>.
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>Modernizr mengandalkan JavaScript yang diaktifkan di browser. Ketika diaktifkan, kelas ini dihapus secara dinamis. Namun, dalam kasus yang jarang terjadi, JavaScript masih ada di HTML Makup ketika tidak diaktifkan, yang memungkinkan Anda untuk membuat aturan gaya khusus untuk pengunjung tersebut jika perlu.
</style> <script src=js/modernizr.js></script> </head> Catatan: Jika Anda menggunakan panel insert atau menu insert, Dreamweaver akan menambahkan type=text/javascript ke tag <script> awal. Ini tidak lagi diperlukan dalam HTML5, tetapi tetap tidak akan menyebabkan kerusakan.
Catatan: Jika versi DreamWeaver Anda tidak memiliki kode langsung (atau Anda menggunakan editor HTML yang berbeda), Anda dapat memeriksa kode yang dihasilkan menggunakan alat pengembangan yang disediakan oleh sebagian besar browser baru atau firebug yang disediakan oleh Firefox Browser.
Seperti yang ditunjukkan pada Gambar 4, kelas no-js telah digantikan oleh kelas js , yang menunjukkan bahwa JavaScript telah diaktifkan.
Tabel 1 mencantumkan nama kelas yang digunakan oleh Modernizr untuk menunjukkan dukungan untuk CSS3. Jika suatu fungsi tidak mendukungnya, nama kelas yang sesuai diawali dengan no- .
Tabel 1. Fungsi CSS3 terdeteksi oleh Modernizr
Fitur CSS | Kelas Modernizr (Properti) |
@font-face | fontface |
::before dan ::after elemen semu | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
Animasi CSS | cssanimations |
Transformasi 2D CSS | csstransforms |
Transformasi 3D CSS | csstransforms3d |
Transisi CSS | csstransitions |
Tata letak kotak yang fleksibel | flexbox |
Gradien | cssgradients |
hsla() | hsla |
Tata letak multi-kolom | csscolumns |
banyak latar belakang | multiplebgs |
opacity | opacity |
cerminan | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
Tidak peduli di mana atribut CSS tertentu diuji, nama kelas dan nama properti adalah sama, namun ini membutuhkan penghapusan tanda hubung atau tanda kurung. Kelas lain dinamai sesuai dengan modul CSS3 yang mereka rujuk.
Lihat Tabel 1, Anda dapat melihat bahwa Modernizr menggunakan boxshadow dan csscolumns untuk menunjukkan dukungan untuk properti box-shadow dan tata letak multi-kolom, masing-masing. Oleh karena itu, Anda dapat menggunakan kelas no-boxshadow dan no-csscolumns untuk membuat aturan gaya khusus untuk browser yang tidak mendukung fitur-fitur ini.
Untuk memastikan arahannya sederhana, saya akan menunjukkan contoh deklarasi CSS saja. Anda dapat mengetiknya langsung ke tampilan kode atau menggunakan kotak dialog CSS Rule baru.
.no-boxshadow img . #8A8A8A ). Aturan gaya yang dihasilkan seharusnya terlihat seperti ini:.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }Ini tidak semenarik bayangan tembus cahaya, tetapi meskipun demikian, masih memungkinkan gambar sedikit menonjol dari latar belakang.
.no-csscolumns img . .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img . Kedua aturan memiliki kekhasan yang sama, jadi jika mereka terbalik, margin kiri 10-piksel dari .columns img dapat menimpa aturan baru yang baru saja Anda buat. Anda dapat mengganti nama .no-csscolumns img menjadi .no-csscolumns .columns img untuk memberikan spesifisitas yang lebih tinggi, tetapi yang terbaik adalah memastikan bahwa semakin sederhana pemilih, semakin baik. ; Dalam contoh sederhana ini, saya membuat gaya khusus untuk versi browser yang lebih lama dengan hanya menggunakan kelas yang diawali dengan no- . Namun, dengan kemampuan mereka, sama sekali tidak ada gunanya Anda menggunakan kedua kelas (dengan atau tanpa awalan) untuk membuat gaya yang berbeda untuk browser Anda. Misalnya:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }Terkadang pendekatan ini masuk akal, misalnya, jika Anda ingin membuat tata letak yang sama sekali berbeda untuk setiap tingkat dukungan. Tetapi jika itu hanya masalah memberikan gaya yang dapat dipilih untuk browser yang lebih tua, jangan lupa bahwa browser mengabaikan properti yang tidak mereka kenal. Jika Anda menggunakan kelas Modernizr untuk semua gaya, halaman Anda akan benar-benar tidak terhubung di browser javascript.
Modernizr menambahkan nama kelas untuk tag <html> awal untuk memainkan tujuan ganda. Saat halaman dimuat, mereka juga nama properti JavaScript yang dibuat oleh objek Modernizr. Tabel 1 mencantumkan nama -nama kelas dan atribut yang terkait dengan CSS. Tabel 2 mencantumkan kelas dan atribut yang tersisa yang terkait dengan HTML5 dan teknologi terkait, seperti lokasi geografis.
Tabel 2. Fitur terkait HTML5 yang terdeteksi oleh Modernizr
Fitur terkait HTML5 | Kelas Modernizr (Properti) |
Cache aplikasi | applicationcache |
Audio | audio. type (ogg, mp3, wav, m4a) |
Kanvas | canvas |
Teks kanvas | canvastext |
Seret dan lepas | draganddrop |
Bentuk atribut input | input. attributeName |
Membentuk elemen input | inputtypes. elementName |
Geolokasi | geolocation |
acara hashchange | hashchange |
Manajemen Sejarah | history |
Indexeddb | indexeddb |
Inline SVG | inlinesvg |
Penyimpanan lokal | localstorage |
Pesan | postmessage |
Penyimpanan Sesi | sessionstorage |
Smil | smil |
SVG | svg |
Jalur klip SVG | svgclippaths |
Acara sentuh | touch |
Video | video. type (ogg, webm, h264) |
Webgl | webgl |
Soket web | websockets |
Database Web SQL | websqldatabase |
Pekerja web | webworkers |
Dalam kebanyakan kasus, semua atribut yang tercantum dalam Tabel 1 dan Tabel 2 mengembalikan true atau false . Jadi, Anda dapat menguji penyimpanan lokal menggunakan JavaScript seperti yang ditunjukkan di bawah ini:
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } Namun, dalam hal audio dan video , nilai pengembalian adalah string yang menunjukkan bahwa browser mampu menangani jenis tingkat kepercayaan tertentu. Menurut spesifikasi HTML5, string kosong berarti jenisnya tidak didukung. Jika jenis ini didukung, nilai pengembalian mungkin atau mungkin. Misalnya:
if (Modernizr.video.h264 == ) { // h264 is not supported } HTML5 menambahkan banyak properti formulir baru, seperti autofocus , yang secara otomatis menempatkan kursor di bidang yang ditentukan ketika halaman dimuat untuk pertama kalinya. Properti bermanfaat lainnya required , yang akan mencegah browser yang kompatibel dengan HTML5 dari mengirimkan formulir jika bidang yang diperlukan dibiarkan kosong (lihat Gambar 6).
Ini bagus, tetapi akan membuat Anda pertanyaan: apa yang harus Anda lakukan dengan versi yang lebih lama dari browser Anda?
Salah satu solusi adalah mengabaikannya dan meninggalkannya ke fungsi verifikasi sisi server untuk pemeriksaan akhir. Jika browser tidak mengenali atribut required , cara lain yang ramah pengguna untuk menangani situasi ini adalah dengan membuat skrip kecil untuk memeriksa bidang yang diperlukan. Instruksi berikut menunjukkan cara melakukan operasi yang sesuai dengan bantuan Modernizr.
</style> <script src=js/modernizr.js></script> </head> <script> terpisah, dan buat penangan acara segera setelah halaman dimuat untuk memfasilitasi eksekusi kode:<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus dan properti required . Cara menangani autofocus sederhana:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it } Kondisi ini menguji Modernizr.input.autofocus , jika autofocus tidak didukung, nilai yang dikembalikan false . Namun, operator logis bukan (tanda seru) dapat membalikkan artinya, jadi jika autofocus tidak didukung, hasil evaluasi dari kondisi ini true , dan inputs[0].focus() menempatkan kursor di bidang input pertama.
required tidak didukung, sekarang tambahkan kode untuk memfasilitasi pemeriksaan bidang yang diperlukan. Kode lengkap dari event handler adalah sebagai berikut:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } Kode baru menghasilkan fungsi yang ketika mengirimkan formulir dapat mengulangi semua elemen input untuk menemukan bidang dengan atribut required . Ketika menemukan bidang, itu menghapus awal dan akhir kosong dari nilai, dan jika hasilnya adalah string kosong, itu menambahkan hasilnya ke array required . Setelah semua bidang telah diperiksa, jika beberapa elemen termasuk dalam array, browser menampilkan peringatan terkait dengan nama bidang yang hilang dan mencegah formulir dari dikirimkan.
Catatan: Safari 5.1 secara tidak benar melaporkan bahwa ia mendukung properti required , sehingga ia menyerahkan formulir tanpa memvalidasi bidang yang diperlukan. Ini adalah cacat safari, tetapi di Modernizr itu tidak ada.
Ketika Anda siap untuk menggunakan situs web Anda, disarankan untuk membuat versi produk khusus dari Modernizr yang hanya berisi elemen -elemen yang sebenarnya Anda butuhkan. Ini dapat mengurangi ukuran perpustakaan Modernizr dari 44kB menjadi 2kB sesuai dengan fungsionalitas yang Anda pilih. Kisaran opsi saat ini ditunjukkan pada Gambar 8.
Gambar 8. Halaman Unduh Modernizr memungkinkan Anda untuk memilih hanya fitur yang Anda butuhkanOpsi dapat dengan mudah dikelompokkan dalam kategori berikut: CSS3, HTML5, Misc (Ellaneous) dan Extra. Klik tombol Toggle di sebelah tiga judul pertama untuk memilih atau membuang semua kotak centang dalam kategori pemilihan.
Secara default, kategori tambahan akan memilih tiga entri berikut:
Jika Anda memilih opsi apa pun dalam kategori CSS3, opsi dalam kategori tambahan berikut juga akan dipilih:
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()Jangan membatalkan pilihan opsi ini. Melakukan hal itu akan secara otomatis membatalkan opsi apa pun yang telah Anda pilih dalam kategori CSS3.
MQ Polyfill (Respons.js) dalam kategori tambahan telah menambahkan skrip yang memungkinkan kueri media di IE 6-8 untuk mendapatkan dukungan terbatas. Saat Anda memilih opsi ini, secara otomatis memilih kueri media dan modernizr.teststyles (). Untuk mempelajari lebih lanjut tentang kueri media Polyfill (response.js), kunjungi https://github.com/scottjehl/responden.
Hanya pengguna tingkat lanjut yang akan tertarik pada opsi lain dalam kategori tambahan. Untuk detail lebih lanjut tentang apa adanya dan bagaimana menggunakannya, lihat bagian ekstensibilitas dari dokumentasi Modernizr.
Deskripsi berikut menjelaskan cara membuat versi produk kustom dari Modernizr untuk file sampel. Versi khusus ini diperlukan untuk latihan selanjutnya, yang akan menunjukkan cara memuat file JavaScript eksternal menggunakan Modernizr.load() .
Saat membuat versi produksi kustom Modernizr, opsi yang berisi Modernizr.load() harus dipilih secara default. Modernizr.load() adalah alias untuk yepnope() , yang merupakan loader skrip mandiri dikembangkan secara serempak dengan modernizr. Untuk mengilustrasikan cara menggunakannya, saya memberikan contoh sederhana. Saya telah memindahkan skrip yang sesuai dari yang diperlukan.html ke check_required.js dan membuat tiga perubahan kecil untuk memfasilitasi penghapusan tes modernizr dan menugaskannya ke variabel yang disebut init . Script yang direvisi terlihat seperti ini:
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }; Keuntungan besar dari Modernizr.load() adalah bahwa ia dapat memuat skrip secara kondisional berdasarkan hasil dari kemampuan peramban pengujian - itulah sebabnya itu disebut yepnope() pada awalnya. Ini dapat memuat skrip eksternal secara tidak sinkron - dengan kata lain, dapat memuat skrip eksternal setelah browser memuat model objek dokumen (DOM) —jadi dapat membantu meningkatkan kinerja situs web Anda.
Sintaks dasar Modernizr.load() adalah untuk meneruskan objek dengan atribut berikut untuk itu:
test : Properti Modernizr yang ingin Anda deteksi. yep : Jika tes berhasil, lokasi skrip yang ingin Anda muat. Gunakan array multi-skrip. nope : Jika tes gagal, lokasi skrip yang ingin Anda muat. Gunakan array multi-skrip. complete : Fungsi yang berjalan segera setelah skrip eksternal dimuat (opsional). Baik yep dan nope adalah opsional, selama Anda menyediakan salah satu dari mereka.
Untuk memuat dan menjalankan skrip di check_required.js, Anda perlu menambahkan blok <script> berikut setelah modernizr.adc.js telah dilampirkan ke halaman (kode tersebut terletak di wajib_Load.html):
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> Ini persis sama seperti sebelumnya, tetapi dapat mengurangi beban pengunduhan browser yang sudah mendukung atribut required .
Untuk menguji beberapa kondisi, Anda dapat meneruskan satu set objek ke Modernizr.load() . Untuk detail lebih lanjut, lihat tutorial Modernizr.Load () tentang dokumentasi Modernizr.
Modernizr adalah alat yang kuat dan berguna, tetapi itu tidak berarti Anda harus menggunakannya. Tidak semua kasus diharuskan menggunakan Modernizr untuk menyediakan banyak gaya ke browser. Jika fokus utama Anda adalah Internet Explorer, pertimbangkan untuk menggunakan komentar bersyarat IE. Anda juga dapat menggunakan tumpukan CSS untuk menimpa beberapa gaya. Misalnya, gunakan warna heksadesimal terlebih dahulu, dan kemudian angkanya dengan rgba() atau hsla() . Versi browser yang lebih lama akan menggunakan nilai pertama dan mengabaikan nilai kedua.
Modernizr benar -benar menjadi kenyataan ketika dikombinasikan dengan polyfill dan javascript lainnya. Tapi ingat, biasanya mudah untuk membuat tes Anda sendiri yang cocok untuk fitur pendukung. Misalnya, berikut ini adalah semua kode yang Anda uji apakah browser mendukung atribut required (kode ini terletak di wajib_nomodernizr.html):
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }Tutorial ini telah membahas semua fitur utama Modernizr. Untuk informasi lebih lanjut tentang fitur -fitur ini, silakan merujuk ke dokumentasi resmi yang sesuai, yang terletak di http://www.modernizr.com/docs/. Selain itu, Anda dapat menemukan sumber daya yang berguna berikut:
yepnope() , yang telah digabungkan menjadi Modernizr.load() di Modernizr. +