Modernizr下載 - Modernizr源代碼下載

Modernizr

其他源碼

v3.13.1

下載

現代化

ModernIzr是一個JavaScript庫，可檢測用戶瀏覽器中的HTML5和CSS3功能。

在此處閱讀此文件
在這裡在印尼語中閱讀此文件
在這裡用西班牙語閱讀此文件
在此處閱讀此文件
在此處閱讀此文件
在此處閱讀此文件
在這裡在印地語中閱讀此文件
我們的網站已經過時且已損壞，請不要使用它（https://modernizr.com），而是從NPM構建現代化版本。
文件
集成測試
單位測試

現代CSS3和HTML5特徵在當前的UA中可用，並以兩種方式可為您提供結果：作為全局Modernizr對像上的屬性以及<html>元素的類。這些信息使您可以通過對體驗的精細控制水平逐步增強頁面。

通過V4破壞變化

放棄對節點版本的支持<= 10，請升級至至少版本12
以下測試重命名為：
- 與es6class class的類別保持一致
以下測試在子目錄中移動：
- cookies ， indexeddb ， indexedblob ， quota-management-api ， userdata移至存儲子目錄中
- audio移入音頻子目錄
- battery移入電池子目錄
- canvas ， canvastext移入了畫布子目錄
- customevent ， eventlistener ， forcetouch ， hashchange ， pointerevents ， proximity遷移到活動子目錄中
- exiforientation移動到圖像子目錄中
- capture ， fileinput ， fileinputdirectory ， formatattribute ， input ， inputnumber-l10n ， inputsearchevent ， inputtypes ， placeholder ， requestautocomplete ，驗證， validation移至輸入子目錄中
- svg進入SVG子目錄
- webgl移至WebGL子目錄中
刪除以下測試：
- touchevents ：討論
- unicode ：討論
- templatestrings ：ES6檢測stringtemplate的重複
- contains ：ES6檢測es6string的重複
- datalistelem ：of Modernizr.input.list list dupe

新的異步活動聽眾

通常，人們想知道何時進行異步測試，以便他們可以使應用程序對其做出反應。過去，您必須依靠觀看屬性或<html>類。僅支持異步測試的事件。應同步處理同步測試，以提高速度並保持一致性。

新的API看起來像這樣：

 // 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!" ) ;
  }
} ) ;

我們保證我們只調用您的功能一次（您on時間）。我們目前沒有揭露公開trigger功能的方法。相反，如果您想控制異步測試，請使用src/addTest功能，並且設置的任何測試都會自動公開並觸發on功能。

入門

克隆或下載存儲庫
使用npm install安裝項目依賴項

建造現代化

來自JavaScript

現代化可以通過NPM編程使用：

 var modernizr = require ( "modernizr" ) ;

暴露了build用於生成自定義現代化構建的方法。例子：

 var modernizr = require ( "modernizr" ) ;

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

第一個參數將選項的JSON對象和功能檢測到包括在內。有關所有可用選項，請參見lib/config-all.json 。

第二個參數是在任務完成時調用的函數。

從命令行

我們還提供了構建現代化的命令行界面。要查看所有可用選項運行：

./bin/modernizr

或在“ config-all.json”中生成所有內容。

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

測試現代化

在控制台運行上使用Mocha-Headless-Crome執行測試：

npm test

您還可以使用此命令在選擇的瀏覽器中運行測試：

npm run serve-gh-pages

並導航到這兩個URL：

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

將Modernizr與構建工具集成

本節提供了有關如何將現代化與各種構建工具和框架集成的指南，從而使其更易於在項目中使用。

1。與WebPack集成

要將Modernizr與WebPack集成，請執行以下步驟：

安裝Modernizr ：
```
npm install modernizr --save
```

創建一個Modernizr配置文件：在您的項目root中創建一個名為modernizr-config.js的文件：

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

更新WebPack配置：修改您的WebPack配置文件（例如， webpack.config.js ）以包含Modernizr插件：

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

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

構建您的項目：運行您的WebPack構建過程：
```
npm run build
```

2。與Gulp整合

如果您使用的是Gulp，則可以按以下方式整合現代化：

安裝Modernizr ：
```
npm install modernizr --save-dev
```

創建一個Gulp任務：在您的gulpfile.js中，添加一個任務以構建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/' ) ) ;
} ) ;

運行GULP任務：執行生成Modernizr構建的任務：
```
gulp modernizr
```

3。與包裹集成

對於使用包裹的項目，您可以按以下方式整合Modernizr：

安裝Modernizr ：
```
npm install modernizr --save
```

創建一個現代化配置文件：類似於WebPack設置，創建一個modernizr-config.js文件：

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

更新包裹配置：您可以使用諸如parcel-plugin-modernizr之類的插件來集成現代化：
```
npm install parcel-plugin-modernizr --save-dev
```
構建您的項目：運行包裹以構建您的項目：
```
parcel build index.html
```