Pengenalan dan penggunaan perpustakaan js Modernizr_Others

Pelayar tradisional tidak akan diganti sepenuhnya pada masa ini, menyukarkan anda untuk membenamkan ciri CSS3 atau HTML5 terkini ke dalam tapak web anda. Modernizr wujud untuk menyelesaikan masalah ini Sebagai perpustakaan JavaScript sumber terbuka, Modernizr mengesan sokongan penyemak imbas untuk fungsi CSS3 atau HTML5. Daripada cuba menambah ciri yang tidak disokong oleh pelayar lama, Modernizr membenarkan anda mengubah suai reka bentuk halaman dengan membuat konfigurasi gaya pilihan. Ia juga boleh memuatkan skrip tersuai untuk mensimulasikan fungsi yang tidak disokong oleh pelayar lama.

Apakah Modernizr?

Modernizr ialah perpustakaan JS sumber terbuka yang menjadikan kerja pereka bentuk yang membangunkan tahap pengalaman yang berbeza berdasarkan perbezaan dalam penyemak imbas pelawat (merujuk kepada perbezaan dalam sokongan untuk standard baharu) lebih mudah. Ia membolehkan pereka bentuk menggunakan sepenuhnya ciri HTML5 dan CSS3 dalam penyemak imbas yang menyokong dan CSS3, sementara juga Kawalan daripada penyemak imbas lain yang tidak menyokong teknologi baru ini tidak dikorbankan.

Apabila anda membenamkan skrip Modernizr dalam halaman web, ia akan mengesan sama ada penyemak imbas semasa menyokong ciri CSS3, seperti @font-face, border-radius, border-image, box-shadow, rgba(), dsb. , dan pada masa yang sama Ia juga akan menyemak sama ada ia menyokong ciri

HTML5 - seperti audio, video, storan setempat dan jenis dan atribut teg Berdasarkan mendapatkan maklumat ini, anda boleh menggunakannya pada penyemak imbas yang menyokong ciri ini untuk memutuskan sama ada untuk membuat sandaran berasaskan JS atau hanya melakukan penurunan taraf yang anggun untuk penyemak imbas yang tidak menyokongnya. Selain itu, Modernizr juga boleh membolehkan IE menyokong penggunaan gaya CSS pada elemen HTML5, jadi pembangun boleh segera menggunakan teg yang lebih semantik ini.

Modernizr adalah ringkas dan mudah digunakan, tetapi ia tidak mahakuasa. Kejayaan menggunakan Modernizr sebahagian besarnya bergantung pada kemahiran CSS dan JavaScript anda. Isu utama dengan menggunakan HTML 5 dan CSS 3 bukanlah populariti dan perbezaan antara penyemak imbas, tetapi memahami perbezaan tersebut di tempat pertama. Setelah mengetahui, pembangun boleh menggunakan teknik degradasi yang anggun untuk mengatasi batasan ini. Atas sebab ini, ramai pembangun beralih kepada projek sumber terbuka Modernizr.

Daripada mengesan rentetan ejen pengguna, ia menggunakan satu siri ujian untuk menentukan ciri penyemak imbas. Dalam beberapa milisaat ia mampu melakukan lebih 40 ujian dan merekodkan keputusan sebagai sifat dalam objek yang dipanggil Modernizr. Pembangun boleh menggunakan maklumat ini untuk mengesan sama ada ciri yang mereka rancang untuk digunakan disokong oleh penyemak imbas dan mengendalikannya dengan sewajarnya.

versi 2.0 , ia menambahkan pemuat sumber bersyarat untuk JavaScript dan CSS. Pemuat sumber menerima tiga parameter, yang pertama ialah ungkapan yang menghitung ciri yang diperlukan. Parameter kedua ialah senarai fail JavaScript dan CSS untuk dimuatkan jika ungkapan itu kembali benar. Parameter ketiga ialah senarai fail untuk digunakan semula jika ciri yang diperlukan tidak ada. Selain degradasi yang anggun, pemuat juga boleh digunakan untuk memperkenalkan

. Tolong izinkan saya menerangkan kepada mereka yang belum biasa dengan pollyfill ialah "semilan JavaScript yang meniru API standard untuk penyemak imbas yang lebih lama." Walaupun pendekatan ini tidak selalu disyorkan, pollyfills boleh digunakan untuk menambah sokongan untuk kebanyakan ciri HTML 5 (dikesan oleh Modernizr). Di sini, polyfill digunakan untuk mengisi lubang dalam fungsi penyemak imbas. Kadangkala Modernizr melaksanakan tugas ini dengan lancar. Tetapi pada dasarnya, ini hanyalah usaha menampal, jadi ia tidak boleh dipercayai untuk menghasilkan hasil yang sama persis yang dicapai oleh penyemak imbas yang tidak terdedah.

Untuk meningkatkan prestasi, pembangun boleh menyesuaikan Modernizr untuk melaksanakan ujian yang diperlukan untuk tapak web mereka. Ini boleh dilakukan melalui halaman muat turun Modernizr, yang turut memaparkan senarai ciri yang boleh dikesan. Laman web github juga ditandakan dengan ciri tidak dapat dikesan dan kemungkinan penyelesaian .

Modernizr dibangunkan berdasarkan teori peningkatan progresif, jadi ia menyokong dan menggalakkan pembangun untuk mencipta tapak web mereka lapisan demi lapisan. Semuanya bermula dari pangkalan kosong dengan Javascript digunakan, dan lapisan aplikasi yang dipertingkatkan ditambah satu demi satu. Kerana anda menggunakan Modernizr, anda boleh dengan mudah mengetahui perkara yang disokong oleh penyemak imbas.

Prinsip Modernizr

Modernizr menggunakan JavaScript untuk mengesan ciri yang disokong oleh penyemak imbas Walau bagaimanapun, daripada menggunakan JavaScript untuk memuatkan lembaran gaya yang berbeza secara dinamik, ia menggunakan teknik yang sangat mudah untuk menambah kelas pada teg Kemudian terpulang kepada anda sebagai pereka bentuk untuk menyediakan penggayaan yang sesuai untuk elemen sasaran menggunakan cascading CSS.

Contohnya, jika halaman menyokong sifat box-shadow, Modernizr akan menambah kelas boxshadow. Jika ia tidak disokong, maka ia ditambah menggunakan kelas no-boxshadow sebagai alternatif.

Memandangkan penyemak imbas mengabaikan sifat CSS yang tidak mereka kenali, anda boleh menggunakan sifat bayangan kotak mengikut peraturan penggayaan asas anda dengan selamat, namun anda perlu menambah turunan yang berasingan dalam format di bawah untuk pemilih penyemak imbas lama ：

.no-boxshadow img { /* gaya untuk penyemak imbas yang tidak menyokong box-shadow */ }

Hanya pelayar yang tidak menyokong box-shadow akan mempunyai kelas tanpa boxshadow, jadi pelayar lain tidak akan menggunakan peraturan gaya ini.

Jadual berikut menyenaraikan nama kelas yang digunakan oleh Modernizr untuk menunjukkan sokongan untuk CSS3. Jika ciri tidak disokong, nama kelas yang sepadan diawali dengan no-.

Tidak kira di mana sifat CSS tertentu diuji, nama kelas dan nama sifat akan sama, namun ini memerlukan pengalihan keluar sebarang tanda sempang atau kurungan. Kelas lain dinamakan sempena modul CSS3 yang mereka rujuk.

Penggunaan Modernizr

1. Muat turun

Muat turun versi stabil terkini Modernizr daripada www.modernizr.com. Tambahkannya pada bahagian pada halaman:

2. Tambahkan kelas "no-js" pada elemen

Menambah kelas no-js pada elemen html memberitahu penyemak imbas sama ada ia menyokong JavaScript, ia akan memaparkan no-js Jika ia menyokongnya, padamkan no-js
Pada ketika ini, jika anda menggunakan Kod Langsung Dreamweaver, anda dapat melihat bahawa Modernizr telah menambah sejumlah besar kelas yang menunjukkan fungsi penyemak imbas, seperti ditunjukkan di bawah

3. Gunakan kes 1 - Paparkan bayang dalam penyemak imbas yang menyokong bayang bayang dan paparkan sempadan standard dalam penyemak imbas yang tidak menyokongnya

4. Use case 2 - menguji storan setempat

<script> window.onload = function () { if (localStorageSupported()) {
   alert('local storage supported');
 }
};

　　function localStorageSupported() {
 　　try { 　　return ('localStorage' in window && window['localStorage'] != null);
 　　}catch(e) {}
 　　 return false;
} </script> 

 $(document).ready(function () { 
 if (Modernizr.canvas) { //Add canvas code } 
 if (Modernizr.localstorage) { 
 //script to run if local storage is 
 } else { 
 // script to run if local storage is not supported
  
 }
});

$(document).ready(function () { if (Modernizr.borderradius) {
  $('#MyDiv').addClass('borderRadiusStyle');
 } if (Modernizr.csstransforms) {
  $('#MyDiv').addClass('transformsStyle');
 }
}); 

if (Modernizr.video.h264 == "") { 
// h264 is not supported
}

4 Use case 3 - Gunakan Modernizr untuk mengesahkan medan borang yang diperlukan HTML5

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) { //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 　　　　 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; 
　　　　} 
　　};
　} 
}