تنزيل Modernizr - تنزيل رمز المصدر Modernizr

Modernizr

شفرة المصدر الأخرى

v3.13.1

تنزيل

Modernizr

Modernizr هي مكتبة JavaScript التي تكتشف ميزات HTML5 و CSS3 في متصفح المستخدم.

اقرأ هذا الملف باللغة البرتغالية
اقرأ هذا الملف باللغة الإندونيسية هنا
اقرأ هذا الملف باللغة الإسبانية هنا
اقرأ هذا الملف باللغة السويدية هنا
اقرأ هذا الملف في التاميل هنا
اقرأ هذا الملف في الكانادا هنا
اقرأ هذا الملف باللغة الهندية هنا
موقع الويب الخاص بنا عفا عليه الزمن والكسر ، يرجى عدم استخدامه (https://modernizr.com) ولكن بدلاً من ذلك بناء إصدار Modernizr الخاص بك من NPM.
الوثائق
اختبارات التكامل
اختبارات الوحدة

اختبارات Modernizr التي تتوفر ميزات CSS3 و HTML5 الأصلية في UA الحالية وتتيح النتائج المتاحة لك بطريقتين: كخصائص على كائن Modernizr عالمي ، وكطبقات على عنصر <html> . تتيح لك هذه المعلومات تعزيز صفحاتك تدريجياً بمستوى تحكم محبب في التجربة.

كسر التغييرات مع V4

دعم إسقاط لإصدارات العقدة <= 10 ، يرجى الترقية إلى الإصدار 12 على الأقل
تم إعادة تسمية الاختبارات التالية:
- class إلى es6class للحفاظ على صفوف بقية اختبارات ES
تم نقل الاختبارات التالية في الدلائل الفرعية:
- 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 ، validation placeholder ، requestautocomplete
- انتقل svg إلى دليل SVG الفرعي
- انتقل webgl إلى دليل الويب الفرعي
تم إزالة الاختبارات التالية:
- touchevents : مناقشة
- unicode : مناقشة
- templatestrings : مكررة من ES6 اكتشاف stringtemplate
- contains : مكررة من ES6 اكتشاف es6string
- datalistelem : A Dupe of Modernizr.Input.List

مستمعون الأحداث غير المتزامنين الجدد

في كثير من الأحيان يريد الناس معرفة متى يتم إجراء اختبار غير متزامن حتى يتمكنوا من السماح لتطبيقهم بالرد عليه. في الماضي ، كان عليك الاعتماد على مراقبة الخصائص أو فصول <html> . يتم دعم الأحداث فقط في الاختبارات غير المتزامنة . يجب التعامل مع الاختبارات المتزامنة بشكل متزامن لتحسين السرعة والحفاظ على الاتساق.

يبدو أن واجهة برمجة التطبيقات الجديدة مثل هذا:

 // 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 لتوليد بنيات 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

لتنفيذ الاختبارات باستخدام Mocha-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"
      ]
    } )
  ]
} ;

قم ببناء مشروعك : قم بتشغيل عملية بناء Propack الخاصة بك:
```
npm run build
```

2. الاندماج مع Gulp

إذا كنت تستخدم Gulp ، فيمكنك دمج Modernizr على النحو التالي:

تثبيت 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
```
قم بإنشاء ملف تكوين Modernizr : على غرار إعداد WebPack ، قم بإنشاء ملف modernizr-config.js :
```
 module . exports = {
  "feature-detects" : [
    "test/feature1" ,
    "test/feature2"
  ]
} ;
```
تحديث تكوين الطرود : يمكنك استخدام مكون إضافي مثل parcel-plugin-modernizr لدمج Modernizr:
```
npm install parcel-plugin-modernizr --save-dev
```
بناء مشروعك : قم بتشغيل الطرود لبناء مشروعك:
```
parcel build index.html
```

خاتمة

يمكن أن يؤدي دمج Modernizr مع أدوات البناء إلى تحسين تطبيقات الويب الخاصة بك من خلال السماح لك باكتشاف قدرات متصفح المستخدم والرد عليها. اتبع الخطوات أعلاه لإعداد Modernizr باستخدام أداة الإنشاء المفضلة لديك.

لمزيد من المعلومات ، راجع وثائق Modernizr.