ดาวน์โหลด Modernizr - ดาวน์โหลดซอร์สโค้ด Modernizr

Modernizr

ซอร์สโค้ดอื่น ๆ

v3.13.1

ดาวน์โหลด

Modernizr

Modernizr เป็นไลบรารี JavaScript ที่ตรวจจับคุณสมบัติ HTML5 และ CSS3 ในเบราว์เซอร์ของผู้ใช้

อ่านไฟล์นี้ใน Portuguese-BR ที่นี่
อ่านไฟล์นี้ในชาวอินโดนีเซียที่นี่
อ่านไฟล์นี้เป็นภาษาสเปนที่นี่
อ่านไฟล์นี้เป็นภาษาสวีเดนที่นี่
อ่านไฟล์นี้ในทมิฬที่นี่
อ่านไฟล์นี้ในกันนาดาที่นี่
อ่านไฟล์นี้ในภาษาฮินดีที่นี่
เว็บไซต์ของเราล้าสมัยและเสียโปรดอย่าใช้ (https://modernizr.com) แต่จะสร้างเวอร์ชัน Modernizr ของคุณจาก NPM
เอกสาร
การทดสอบการรวม
การทดสอบหน่วย

การทดสอบ Modernizr ซึ่งมีคุณสมบัติ CSS3 และ HTML5 ดั้งเดิมที่มีอยู่ใน UA ปัจจุบันและทำให้ผลลัพธ์มีให้คุณได้สองวิธี: เป็นคุณสมบัติของวัตถุ Global Modernizr และเป็นชั้นเรียนในองค์ประกอบ <html> ข้อมูลนี้ช่วยให้คุณสามารถปรับปรุงหน้าเว็บของคุณได้อย่างต่อเนื่องด้วยระดับการควบคุมประสบการณ์

ทำลายการเปลี่ยนแปลงด้วย V4

ลดการรองรับเวอร์ชันโหนด <= 10 โปรดอัพเกรดเป็นอย่างน้อยเวอร์ชัน 12
การทดสอบต่อไปนี้ได้เปลี่ยนชื่อ:
- class ไปยัง es6class เพื่อให้สอดคล้องกับส่วนที่เหลือของการทดสอบ ES
การทดสอบหลังจากได้รับการย้ายในไดเรกทอรีย่อย:
- cookies , indexeddb , indexedblob , quota-management-api , userdata ย้ายไปยังไดเรกทอรีย่อยที่เก็บข้อมูล
- audio ย้ายเข้าสู่ไดเรกทอรีย่อยเสียง
- battery ย้ายเข้าสู่ไดเรกทอรีย่อยแบตเตอรี่
- canvas , canvastext ย้ายไปยังไดเรกทอรีย่อย Canvas
- 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 Detect stringtemplate
- contains : ซ้ำของ ES6 DETECT es6string
- datalistelem : a dupe ของ modernizr.input.list

ผู้ฟังเหตุการณ์แบบอะซิงโครนัสใหม่

บ่อยครั้งที่ผู้คนต้องการทราบเมื่อทำการทดสอบแบบอะซิงโครนัสเพื่อให้พวกเขาสามารถอนุญาตให้แอปพลิเคชันของพวกเขาตอบสนองต่อมัน ในอดีตคุณต้องพึ่งพาการดูคุณสมบัติหรือคลาส <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 หากคุณต้องการควบคุมการทดสอบแบบ async ให้ใช้คุณสมบัติ src/addTest และการทดสอบใด ๆ ที่คุณตั้งค่าจะเปิดเผยและเรียกใช้ฟังก์ชันการ on โดยอัตโนมัติ

เริ่มต้น

โคลนหรือดาวน์โหลดที่เก็บข้อมูล
ติดตั้งการพึ่งพาโครงการด้วย npm install

การสร้าง Modernizr

จาก JavaScript

Modernizr สามารถใช้งานโปรแกรมผ่าน NPM:

 var modernizr = require ( "modernizr" ) ;

วิธี build ถูกเปิดเผยสำหรับการสร้าง Builds Modernizr ที่กำหนดเอง ตัวอย่าง:

 var modernizr = require ( "modernizr" ) ;

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

พารามิเตอร์แรกใช้วัตถุ JSON ของตัวเลือกและการตรวจจับคุณลักษณะเพื่อรวม ดู lib/config-all.json สำหรับตัวเลือกที่มีอยู่ทั้งหมด

พารามิเตอร์ที่สองคือฟังก์ชั่นที่เรียกใช้เมื่อเสร็จสิ้นงาน

จากบรรทัดคำสั่ง

นอกจากนี้เรายังมีอินเทอร์เฟซบรรทัดคำสั่งสำหรับการสร้าง Modernizr หากต้องการดูตัวเลือกที่มีอยู่ทั้งหมดรัน:

./bin/modernizr

หรือเพื่อสร้างทุกอย่างใน 'config-all.json' เรียกใช้สิ่งนี้ด้วย NPM:

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

ทดสอบ Modernizr

ในการดำเนินการทดสอบโดยใช้มอคค่า headless-chrome บนคอนโซลรัน:

npm test

คุณยังสามารถเรียกใช้การทดสอบในเบราว์เซอร์ที่คุณเลือกด้วยคำสั่งนี้:

npm run serve-gh-pages

และนำทางไปยัง URL ทั้งสองนี้:

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

การรวม Modernizr เข้ากับเครื่องมือสร้าง

ส่วนนี้ให้คำแนะนำเกี่ยวกับวิธีการรวม Modernizr เข้ากับเครื่องมือสร้างและเฟรมเวิร์กต่าง ๆ ทำให้ใช้งานได้ง่ายขึ้นในโครงการของคุณ

1. การรวมเข้ากับ webpack

หากต้องการรวม Modernizr เข้ากับ WebPack ให้ทำตามขั้นตอนเหล่านี้:

ติดตั้ง Modernizr :
```
npm install modernizr --save
```
สร้างไฟล์กำหนดค่า Modernizr : สร้างไฟล์ชื่อ 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. การรวมเข้ากับอึก

หากคุณใช้อึกคุณสามารถรวม Modernizr ได้ดังนี้:

ติดตั้ง Modernizr :
```
npm install modernizr --save-dev
```

สร้างงานอึก : ใน 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/' ) ) ;
} ) ;

เรียกใช้งานอึก : ดำเนินงานเพื่อสร้างการสร้าง Modernizr:
```
gulp modernizr
```

3. การรวมเข้ากับพัสดุ

สำหรับโครงการที่ใช้พัสดุคุณสามารถรวม Modernizr ได้ดังนี้:

ติดตั้ง Modernizr :
```
npm install modernizr --save
```
สร้างไฟล์การกำหนดค่า Modernizr : คล้ายกับการตั้งค่า WebPack สร้างไฟล์ modernizr-config.js :
```
 module . exports = {
  "feature-detects" : [
    "test/feature1" ,
    "test/feature2"
  ]
} ;
```
อัปเดตพัสดุการกำหนดค่า : คุณสามารถใช้ปลั๊กอินเช่น parcel-plugin-modernizr เพื่อรวม Modernizr:
```
npm install parcel-plugin-modernizr --save-dev
```
สร้างโครงการของคุณ : Run Parcel เพื่อสร้างโครงการของคุณ:
```
parcel build index.html
```

บทสรุป

การรวม Modernizr เข้ากับเครื่องมือสร้างของคุณสามารถปรับปรุงเว็บแอปพลิเคชันของคุณโดยช่วยให้คุณสามารถตรวจจับและตอบสนองต่อความสามารถของเบราว์เซอร์ของผู้ใช้ ทำตามขั้นตอนด้านบนเพื่อตั้งค่า Modernizr ด้วยเครื่องมือสร้างที่คุณต้องการ

สำหรับข้อมูลเพิ่มเติมโปรดดูเอกสาร Modernizr