Download Modernizr - Download Kode Sumber Modernizr

Modernizr

Kode sumber lainnya

v3.13.1

Unduh

Modernizr

Modernizr adalah perpustakaan JavaScript yang mendeteksi fitur HTML5 dan CSS3 di browser pengguna.

Baca file ini dalam bahasa Portugis di sini
Baca file ini dalam bahasa Indonesia di sini
Baca file ini dalam bahasa Spanyol di sini
Baca file ini dalam bahasa Swedia di sini
Baca file ini di Tamil di sini
Baca file ini di Kannada di sini
Baca file ini dalam bahasa Hindi di sini
Situs web kami sudah ketinggalan zaman dan rusak, jangan gunakan itu (https://modernizr.com) tetapi lebih membangun versi modernizr Anda dari NPM.
Dokumentasi
Tes integrasi
Tes unit

Tes Modernizr yang tersedia fitur CSS3 dan HTML5 asli di UA saat ini dan membuat hasilnya tersedia untuk Anda dalam dua cara: sebagai properti pada objek Modernizr global, dan sebagai kelas pada elemen <html> . Informasi ini memungkinkan Anda untuk secara progresif meningkatkan halaman Anda dengan tingkat kontrol granular atas pengalaman.

Melanggar perubahan dengan v4

Dukungan yang dijatuhkan untuk versi node <= 10, silakan tingkatkan ke setidaknya versi 12
Tes berikut diganti namanya:
- class untuk es6class agar sesuai dengan sisa-tes ES
Tes berikut dipindahkan di subdirektori:
- cookies , indexeddb , indexedblob , quota-management-api , userdata dipindahkan ke subdirektori penyimpanan
- audio pindah ke subdirektori audio
- battery dipindahkan ke subdirektori baterai
- canvas , canvastext dipindahkan ke subdirektori kanvas
- customevent , eventlistener , forcetouch , hashchange , pointerevents , proximity pindah ke subdirektori acara
- exiforientation dipindahkan ke subdirektori gambar
- capture , fileinput , fileinputdirectory , formatattribute , input , inputnumber-l10n , inputsearchevent , inputtypes , placeholder , requestautocomplete , validation dipindahkan ke subdirektori input
- svg pindah ke subdirektori SVG
- webgl dipindahkan ke subdirektori WebGL
Tes berikut dihapus:
- touchevents : Diskusi
- unicode : Diskusi
- templatestrings : Duplikat ES6 Detect stringtemplate
- contains : Duplikat ES6 Deteksi es6string
- datalistelem : Dupe of modernizr.input.list

Pendengar acara asinkron baru

Sering kali orang ingin tahu kapan tes asinkron dilakukan sehingga mereka dapat membiarkan aplikasi mereka bereaksi terhadapnya. Di masa lalu, Anda harus bergantung pada menonton properti atau kelas <html> . Hanya peristiwa pada tes asinkron yang didukung. Tes sinkron harus ditangani secara sinkron untuk meningkatkan kecepatan dan mempertahankan konsistensi.

API baru terlihat seperti ini:

 // Listen to a test, give it a callback
Modernizr . on ( "testname" , function ( result ) {
  if ( result ) {
    console . log ( "The test passed!" ) ;
  } else {
    console . log ( "The test failed!" ) ;
  }
} ) ;

Kami menjamin bahwa kami hanya akan memohon fungsi Anda sekali (per waktu yang Anda on ). Kami saat ini tidak mengekspos metode untuk mengekspos fungsi trigger . Sebagai gantinya, jika Anda ingin memiliki kontrol atas tes async, gunakan fitur src/addTest , dan tes apa pun yang Anda atur akan secara otomatis mengekspos dan memicu fungsionalitas on .

Memulai

Klon atau unduh repositori
Instal dependensi proyek dengan npm install

Membangun Modernizr

Dari JavaScript

Modernizr dapat digunakan secara terprogram melalui NPM:

 var modernizr = require ( "modernizr" ) ;

Metode build diekspos untuk menghasilkan build modernizr khusus. Contoh:

 var modernizr = require ( "modernizr" ) ;

modernizr . build ( { } , function ( result ) {
  console . log ( result ) ; // the build
} ) ;

Parameter pertama mengambil objek JSON opsi dan deteksi fitur untuk dimasukkan. Lihat lib/config-all.json untuk semua opsi yang tersedia.

Parameter kedua adalah fungsi yang dipanggil pada penyelesaian tugas.

Dari baris perintah

Kami juga menyediakan antarmuka baris perintah untuk membangun Modernizr. Untuk melihat semua opsi yang tersedia berjalan:

./bin/modernizr

Atau untuk menghasilkan semuanya di 'config-all.json' jalankan ini dengan npm:

npm start
//outputs to ./dist/modernizr-build.js

Menguji Modernizr

Untuk melaksanakan tes menggunakan mocha-headless-chrome pada konsol menjalankan:

npm test

Anda juga dapat menjalankan tes di browser pilihan Anda dengan perintah ini:

npm run serve-gh-pages

dan arahkan ke dua URL ini:

http://localhost:8080/test/unit.html
http://localhost:8080/test/integration.html

Mengintegrasikan Modernri dengan alat pembangun

Bagian ini memberikan panduan tentang cara mengintegrasikan Modernizr dengan berbagai alat dan kerangka kerja, membuatnya lebih mudah digunakan dalam proyek Anda.

1. Mengintegrasikan dengan Webpack

Untuk mengintegrasikan Modernizr dengan Webpack, ikuti langkah -langkah ini:

Instal Modernizr :
```
npm install modernizr --save
```

Buat file konfigurasi Modernizr : Buat file bernama modernizr-config.js di root proyek Anda:

 module . exports = {
  "feature-detects" : [
    "test/feature1" ,
    "test/feature2" ,
    // Add more feature detects as needed
  ]
} ;

Perbarui Konfigurasi Webpack : Ubah File Konfigurasi Webpack Anda (misalnya, webpack.config.js ) untuk memasukkan plugin modernizr:

 const ModernizrWebpackPlugin = require ( 'modernizr-webpack-plugin' ) ;

module . exports = {
  // Other configurations...
  plugins : [
    new ModernizrWebpackPlugin ( {
      "feature-detects" : [
        "test/feature1" ,
        "test/feature2"
      ]
    } )
  ]
} ;

Bangun Proyek Anda : Jalankan proses pembuatan webpack Anda:
```
npm run build
```

2. Mengintegrasikan dengan Tengkungan

Jika Anda menggunakan Gulp, Anda dapat mengintegrasikan Modernizr sebagai berikut:

Instal Modernizr :
```
npm install modernizr --save-dev
```

Buat Tugas Gulp : Di gulpfile.js Anda, tambahkan tugas untuk membangun modernizr:

 const gulp = require ( 'gulp' ) ;
const modernizr = require ( 'modernizr' ) ;

gulp . task ( 'modernizr' , function ( ) {
  return modernizr . build ( {
    "feature-detects" : [
      "test/feature1" ,
      "test/feature2"
    ]
  } ) . pipe ( gulp . dest ( 'dist/' ) ) ;
} ) ;

Jalankan Tugas Gulp : Jalankan tugas untuk menghasilkan build modernizr:
```
gulp modernizr
```

3. Mengintegrasikan dengan parsel

Untuk proyek yang menggunakan parsel, Anda dapat mengintegrasikan Modernizr sebagai berikut:

Instal Modernizr :
```
npm install modernizr --save
```

Buat file konfigurasi Modernizr : Mirip dengan pengaturan webpack, buat file modernizr-config.js :

 module . exports = {
  "feature-detects" : [
    "test/feature1" ,
    "test/feature2"
  ]
} ;

Perbarui Konfigurasi Parcel : Anda dapat menggunakan plugin seperti parcel-plugin-modernizr untuk mengintegrasikan Modernizr:
```
npm install parcel-plugin-modernizr --save-dev
```
Bangun Proyek Anda : Jalankan paket untuk membangun proyek Anda:
```
parcel build index.html
```

Kesimpulan

Mengintegrasikan Modernizr dengan alat build Anda dapat meningkatkan aplikasi web Anda dengan memungkinkan Anda untuk mendeteksi dan menanggapi kemampuan browser pengguna. Ikuti langkah -langkah di atas untuk mengatur Modernizr dengan alat build pilihan Anda.

Untuk informasi lebih lanjut, lihat dokumentasi Modernizr.