Beranda>Tutorial Desain Web>tutorial HTML

Ceritakan tentang cara menggunakan modernizr

Penulis：Eve Cole Waktu Pembaruan：2025-08-23 02:32:01

Sudah ada banyak perkenalan Cina tentang Modernizr, Anda dapat mencari melalui Baidu atau Gu GE. Anda juga dapat membacanya di Blue Ideal, artikel ini relatif komprehensif: Modernizr lahir untuk HTML5 dan CSS3;

Apa penggunaan Modernizr selain memberikan penilaian lingkungan dasar dan dukungan semantik untuk HTML5 dan CSS3? Mari kita pelajari bersama hari ini.

1. Mulailah dengan menerapkan Modernizr

Bagian ini dijelaskan secara rinci dalam Modernizr-lahir untuk HTML5 dan CSS3, termasuk perubahan elemen HTML setelah Modernizr berjalan, dll. Dianjurkan agar siswa baru dapat membacanya dengan cermat.

Anda juga dapat langsung pergi ke situs web resmi http://modernizr.com/docs/ untuk informasi lebih lanjut.

2. Penggunaan Modernizr.Load

1. Muat jQuery

Pertama mari kita lihat metode dan kode untuk memuat jQuery di situs web resmi:

  1. Modernizr.load ([{
  2. Muat: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
  3. Lengkap: function () {
  4. if (! window.jQuery) {
  5. Modernizr.load ('js/lib/jQuery-1.7.1.min.js');
  6. }
  7. }
  8. }]);

Kode ini telah diuji dan ditemukan bahwa jika Anda tidak dapat mengakses CDN yang disediakan oleh Google secara normal, browser akan melaporkan kesalahan, dan pesannya

  1. GetHttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (notfound)
  2. modernizr.custom.js: 4Resource interpretededasimageButtransfer dengan mimetypeApplication/x-javascript: js/lib/jQuery-1.7.1.min.js.

Dari informasi umpan balik, kita dapat melihat bahwa format file yang diuraikan oleh Modernizr ketika memuat kembali jQuery lokal salah. Saya tidak tahu apakah ini akan terjadi, tetapi ini memengaruhi penggunaannya. Di antara semua hasil pencarian Cina, tidak ada penjelasan atau penelitian tentang fenomena ini, dan kemampuan pribadi terbatas, sehingga tidak mungkin untuk menyelidiki secara mendalam. Saya baru saja mendapat solusi sementara dari StackOverflow, kodenya adalah sebagai berikut:

  1. <ScriptType = Text/JavaScript> // <! [Cdata [
  2. Modernizr.load ([{
  3. Muat: 'http: //ajax.googleapis.com/ajax/libs/jQuery/1.7.1/jquery.min.js',
  4. Lengkap: function () {
  5. if (! window.jQuery) {
  6. Modernizr.load ([{
  7. Muat: 'js/jQuery.min.js',
  8. Callback: function (url, hasil, kunci) {
  9. //console.log('jQueryonLocalWasloaded! ');
  10. init ();
  11. }
  12. }]);
  13. }kalau tidak{
  14. //console.log('jQueryongoglewasloaded! ');
  15. init ();
  16. }
  17. }
  18. }]);
  19. functionInit () {
  20. jQuery (dokumen) .ready (function () {
  21. $ ('body'). prepend ('helloworld!');
  22. });
  23. }
  24. //]]> </script>

2. Dukungan untuk versi yang lebih rendah yaitu diagram PNG yang dicegat

Dalam deskripsi dokumentasi Yepnopejs, ada bagian tentang penggunaan plug-in untuk IE! Awalan.

Sebagian besar waktu ketika kita membuat kompatibilitas antarmuka front-end, kita harus mempertimbangkan detail versi IE yang berbeda. Meskipun kami sekarang menekankan pengabaian IE6, sebagian besar klien masih menggunakan versi ini. Untuk memastikan konsistensi antarmuka, kita biasanya dapat melihat kode format berikut:

  1. <!-[ifltie7]> <htmlclass = ie6> <! [endif]->
  2. <!-[ifie7]> <htmlclass = ie7> <! [endif]->
  3. <!-[ifie8]> <htmlclass = ie8> <! [endif]->
  4. <!-[ifie9]> <htmlclass = ie9> <! [endif]->
  5. <!-[if (gTie9) |! (IE)]> <!-> <!-<! [Endif]->

Ini adalah pernyataan format bersyarat untuk pemfilteran penyaringan yang diizinkan dalam HTML. Melalui penyaringan, kita dapat mencapai beberapa peretasan CSS untuk versi IE yang berbeda. Bagian konten ini dapat dibaca dan dipelajari di Paulirish.com.

Ada banyak solusi untuk diagram PNG transparan. Berikut adalah beberapa upaya untuk memperkenalkan segmen kode JS untuk menyelesaikan PNG transparan melalui Modernizr. Kode spesifiknya adalah sebagai berikut:

  1. <ScriptType = Text/JavaScript> // <! [Cdata [
  2. Modernizr.load ([
  3. {
  4. Muat: 'js/yepnope.ie_prefix.js', // muat plugin awalan yepnope!
  5. Lengkap: function () {
  6. yepnope ([{
  7. Muat: 'IELT8! JS/IE_PNG.JS', // Plug-in hanya dapat disaring setelah dimuat secara normal (LOAD IE_PNG.JS untuk versi di bawah IE8)
  8. Lengkap: function () {
  9. ie_png.fix ('img');
  10. }
  11. }]);
  12. }
  13. }
  14. ]);
  15. //]]> </script>

Ini adalah upaya yang menarik.

3. Tentukan dukungan browser untuk CSS3 atau HTML5

Bagian ini adalah fitur dasar Modernizr. Dengan menggunakan fitur -fitur dasar ini, kami tidak hanya dapat mencoba fitur baru CSS3 atau HTML5, tetapi juga memastikan bahwa kami memberikan petunjuk ramah di lingkungan yang tidak didukung. Lihatlah kode berikut:

  1. <ScriptType = Text/JavaScript> // <! [Cdata [
  3. Modernizr.load ({
  4. Tes: modernizr.csstransforms3d &#038; & modernizr.csstransitions, // menilai apakah klien saat ini mendukung varian 3-dimensi dan transisi gradien
  5. ya: ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' ,'js/jquery.hoverfold.js'], // jika didukung, muat JS terkait JS
  6. tidak: 'css/fallback.css', // muat lainnya gaya yang relevan yang digunakan untuk pengingat yang ramah
  7. Callback: function (url, hasil, kunci) {// konten callback
  9. if (url === 'js/jQuery.hoverfold.js') {// Jika jalur file JS yang dimuat terakhir adalah sama, aplikasi
  10. $ ('#grid'). hoverfold ();
  11. }
  13. }
  14. });
  16. //]]> </script>

Kode ini dipotong dari paragraf dalam dokumen presentasi dalam efek hover thumbnail 3D. Dengan menganalisis dan mengalami tutorial yang diproduksi oleh penulis, kita tidak hanya dapat mempelajari beberapa penggunaan Modernizr, tetapi juga mengalami beberapa efek CSS3 yang kuat dan mempesona.

Konten di atas masih sangat terorganisir secara kasar, dan tujuannya adalah untuk menggunakannya untuk mempelajari dan memahami karakteristik dan metode penggunaan modernizr (yepnope). Pada saat yang sama, kita juga harus meningkatkan pembelajaran dan perhatian CSS3 dan HTML5.

Seluruh teks sudah berakhir.

Artikel Terkait