Modernizr: Deteksi fitur browser untuk HTML5 dan CSS3

Penulis：Eve Cole Waktu Pembaruan：2025-05-03 11:16:02

Wulin.com (www.vevb.com) Artikel Pendahuluan: Modernizr dan HTML5.

Oke, html5 sekarang populer, jadi saya akan menambahkan html5 ke judulnya :)

Faktanya, Modernizr lahir untuk HTML5 - ini adalah perpustakaan JS yang mendeteksi dukungan browser untuk fitur HTML5 dan CSS3. Situs web kompatibilitas browser HTML5/CSS3 yang terkenal FindMebyip didasarkan pada kerangka kerja ini.

Anda dapat melihat bahwa ada tautan ke Modernizr pada tombol hijau di sudut kanan bawah.

Fitur Modernizr

Fungsi modernizr sebenarnya sangat sederhana. Ini untuk menggunakan JS untuk mendeteksi dukungan browser untuk fitur HTML5/CSS3. Jika mendukung atribut tertentu, tambahkan kelas yang sesuai ke tag <html> halaman. Jika tidak mendukungnya, tambahkan kelas tanpa prefix. Misalnya, jika browser yang terdeteksi mendukung tag video, Modernizr akan menambahkan kelas video ke tag <html>, jika tidak, tambahkan kelas no-video.

Periksa kode sumber FindMebyIP atau gunakan alat seperti Firebug untuk melihat kode halaman, dan Anda dapat melihat kelas di tag <html>.

Selain itu, Modernizr juga menyediakan penggunaan lain, yaitu untuk mendeteksi dukungan browser untuk fitur tertentu saja, seperti:

Relatif aman untuk mendeteksi dukungan browser untuk HTML5 melalui antarmuka yang sama.

Deteksi browser: fitur ua vs

Bahkan, semua orang biasanya menggunakan UA untuk mendeteksi browser. Tentu saja, UA juga memberikan informasi yang lebih kaya. UA tidak mahakuasa, dan juga memiliki beberapa kelemahan, seperti penyamaran UA dari browser pengguna dan kurangnya informasi UA yang disediakan oleh beberapa browser terbelakang akan memengaruhi penilaian informasi browser. Lebih penting lagi, untuk fitur HTML5, menggunakan UA untuk menentukan apakah browser mendukung fitur tertentu terlalu kompleks dan tidak dapat diandalkan.

Tentu saja, selalu ada perdebatan tentang UA dan deteksi fitur. Yang ingin saya katakan di sini adalah bahwa analisis spesifik masalah spesifik, menggunakan HTML5 untuk mendeteksi dukungan fitur di situs web lebih dapat diandalkan dan nyaman daripada UA ~~

Menggunakan Modernizr

Penggunaan Moderniz sangat sederhana, cukup masukkan file JS perpustakaan ke halaman:

>/skrip>

Modernizr adalah open source, tetapi untuk beberapa alasan itu diblokir oleh G-FW.

Modernizr @ git

Proyek Modernizr di -host di Git, Anda bisa mendapatkannya di alamat berikut:

Penulis juga menyediakan halaman output sederhana di git:

Dan halaman tes terperinci:

Bacaan Diperpanjang:

Mendeteksi fitur HTML5

Menggunakan html5 dan css3 dengan aman dengan modernizr