Modernizr



modernizr

Modernizr

ما هو Modernizr؟

Modernizr هي جزء صغير من شفرة JavaScript تقوم تلقائيًا باكتشاف توفر تقنيات الويب من الجيل التالي في متصفحات المستخدم. فبدلاً من وضع قائمة بالنطاقات الكاملة للمتصفحات على القائمة السوداء استنادًا إلى "استنشاق UA " ، يستخدم Modernizr ميزة اكتشاف الميزات لتسمح لك بتخصيص تجارب المستخدم بسهولة استنادًا إلى الإمكانات الفعلية لمتصفحه.

مع هذه المعرفة التي تمنحك Modernizr ، يمكنك الاستفادة من هذه الميزات الجديدة في المتصفحات التي يمكنها تقديمها أو استخدامها ، وما زال لديها وسائل سهلة وموثوقة للتحكم في الوضع بالنسبة للمتصفحات التي لا تستطيع ذلك.

ما هي ميزة الكشف؟

في العصور المظلمة لتطوير الويب ، غالبًا ما اضطررنا إلى اللجوء إلى استنشاق UA لتحديد ما إذا كان مستخدمه قادرًا على الاستفادة من ™ Awesome-New-Feature ™. في الواقع ، هذا يعني القيام بشيء مثل ما يلي

if (browser === "the-one-they-make-you-use-at-work") {
  getTheOldLameExperience();
} else {
  showOffAwesomeNewFeature();
}

الآن تبدو جيدة ، أليس كذلك؟ نحن نستخدم ميزةجديد مذهل ، وبالطبع لا يتم دعمها في متصفح قديم قاس مثل هذا ، أليس كذلك؟ يمكن أن يكون الأمر كذلك - اليوم. ولكن ماذا لو أضاف الإصدار التالي من هذا المتصفح الدعم إلى ™ Awesome-New-Feature ؟ الآن عليك العودة وتدوين التعليمات البرمجية الخاصة بك ، وتحديث كل مكان واحد تقوم به هذا الاختيار. هذا هو افتراض أن لديك الوقت لمعرفة كل تحديث ميزة لكل متصفح واحد. الأسوأ من ذلك ، حتى تدرك أنها تعمل في الواقع في الإصدار الأحدث ، كل هؤلاء المستخدمين مرة أخرى في المكتب getTheOldLameExperience ، دون أي سبب على الإطلاق.

يمكن لهؤلاء المستخدمين - الذين يُمنحون موقعًا دون المستوى المطلوب على ما يبدو لأي سبب - الانتقال فعليًا إلى إعدادات المتصفح ونظام التشغيل وتغيير اسم المتصفح (أو user-agent - ما نقارنه في الشفرة عند تنفيذ شغف UA) مثل. عند هذه النقطة - رمزك لا معنى له. أنت تحظر المستخدمين الذين قد يدعمون جميع ميزاتك في الواقع ، ومن المحتمل أنهم يسمحون لهؤلاء الذين لا يدعمون ذلك. كل شخص تقريبا يحصل على تجربة مكسورة. حتما توجد طريقة افضل!

هناك ، ويطلق عليه Feature Detection ، ويبدو أكثر مثل هذا

if (Modernizr.awesomeNewFeature) {
  showOffAwesomeNewFeature();
} else {
  getTheOldLameExperience();
}

وبدلاً من استناد قراراتك إلى ما إذا كان المستخدم one-they-make-you-use-at-work متصفح one-they-make-you-use-at-work ، وبافتراض أن ذلك يعني أنه إما لا يمكنه الوصول إلى ميزةجديد مذهل ، أو ميزة يقوم برنامج الاكتشاف بالفعل برمجيًا بالتحقق مما إذا كان تطبيق Awesome-New-Feature ™ يعمل في المتصفح ، ويعطيك نتيجة true أو false . الآن بمجرد أن يضيف متصفحك الأقل تفضيلاً الدعم إلى ™ Awesome-New-Feature ، يعمل رمزك هناك - تلقائيًا! لا مزيد من الاضطرار إلى تحديث ، من أي وقت مضى. وينتهي الرمز بأن يكون متشابهًا ، ولكنه أكثر وضوحًا في نيته الحقيقية

تحميل Modernizr

لقد تغير الكثير منذ الإصدار الأخير من Modernizr. لم يعد هناك ملف modernizr.js أساسي واحد. بدلاً من ذلك ، انتقل فقط إلى صفحة Download كما كان يمكن أن تكون لديك سابقًا ، وحدد الميزات التي تريد استخدامها في مشروعك. وبهذه الطريقة ، يمكننا توفير أصغر ملف ممكن ، مما يعني أنه موقع ويب أسرع بالنسبة لك. وبمجرد الانتهاء من ذلك ، فقط اضغط على زر Build وكنت قد حصلت على بناء مخصص الخاص بك من Modernizr ، الحار قبالة المطابع!

قد تلاحظ أنه بالإضافة إلى مخرجات Build ، حيث تمكّنت من تنزيل إصدارات مخصصة واحدة في كل مرة منذ سنوات - هناك خياران جديدان.

تكوين سطر الأوامر

منذ 3.0 ، يشحن Modernizr أيضاً نظام بنائه كوحدة node على npm . وهذا يعني أنه يمكنك إنشاء مجموعات متعددة من Modernizr بسرعة لمشاريع مختلفة ، دون الحاجة إلى فتح علامة تبويب جديدة للمتصفح.

بمجرد تثبيت npm ، يمكنك تثبيت أداة سطر الأوامر Modernizr عن طريق التشغيل

npm install -g modernizr

أنت الآن جاهز للبدء في إنشاء تصميمك المخصص! يمكنك تنزيل ملف التكوين من قائمة البناء (ضمن "تهيئة سطر الأوامر"). سيعطيك هذا ملف JSON الذي ستعطيه لوحدة Modernizr ليصنع بناءك المخصص.

modernizr -c modernizr-config.json

لاحظ أنك ستحتاج إلى إعطاء سطر الأوامر تكوين مسار الملف إلى التكوين الذي قمت بتنزيله من الموقع. في المثال أعلاه ، نقوم بتشغيل الأمر modernizr من نفس المجلد الذي قمنا بتنزيل الملف modernizr-config.json إليه.

التكوين الناخر

إذا كنت لا ترغب في تشغيل الإنشاء يدويًا من سطر الأوامر في كل مرة تقوم فيها بتحديث موقعك ، فلديك أيضًا خيار تنزيل مهمة Grunt للقيام بذلك نيابةً عنك. يمكن استخدام ملف التكوين هذا مع grunt-modernizr ليقوم تلقائيًا بإنشاء الإصدار المخصص الخاص بك. فقط إضافته إلى Gruntfile الخاص بك ، وأنت خارج إلى السباقات.

لاحظ أنك ستحتاج إلى تحديث ملف التكوين المقدم بمسارات إلى devFile و outputFile . مزيد من الوثائق متاحة للجرانت - modernizr here

خيارات الإعداد

بالإضافة إلى الخيارات المتاحة والكشف عن الميزات ، هناك عدد قليل من خيارات التكوين الإضافية.

classPrefix - classPrefix الافتراضي: ""

سلسلة تتم إضافتها قبل كل فئة CSS.

enableJSClass - enableJSClass الافتراضي: true

أم لا يتم تحديث .no-js إلى .js على عنصر الجذر.

enableClasses - الافتراضي: true

أم لا يجب على Modernizr إضافة فصول CSS الخاصة به على الإطلاق

انظر القسم التالي لمزيد من المعلومات حول هذه الخيارات

باستخدام Modernizr مع CSS

صفوف Modernizr ل

بشكل افتراضي ، يقوم Modernizr بتعيين الفئات لجميع الاختبارات على عنصر الجذر ( <html> لمواقع الويب). هذا يعني إضافة الصف لكل ميزة عند دعمها ، وإضافتها ببادئة no- عندما لا تكون (على سبيل المثال .feature أو .feature .no-feature ). هذا يجعل من السوبر سهلة لإضافة ميزات في تعزيز التقدمية!

لنفترض أنك تتضمن اكتشاف Modernizr لتدرجات CSS. بناءً على المتصفح ، سيؤدي إلى <html class="cssgradients"> أو <html class="no-cssgradients"> . الآن بعد أن عرفت هاتين الولايتين ، يمكنك كتابة CSS لتغطية كلتا الحالتين

.no-cssgradients .header {
  background: url("images/glossybutton.png");
}

.cssgradients .header {
  background-image: linear-gradient(cornflowerblue, rebeccapurple);
}

classPrefix

إذا كان أحد أسماء فئات classPrefix إحدى classPrefix الموجودة مسبقًا ، classPrefix خيار إضافة classPrefix داخل التهيئة الخاصة بك . فكر في الكشف hidden ، الذي يضيف فئة .hidden - شيء .hidden الكثير من قواعد الكود بالفعل ، إلى جانب إخفاء الأشياء. إذا كنت ترغب في استخدام هذا الكشف المحدد ، فيمكنك استخدام ما يلي كتكوينك

{
  "classPrefix": "foo-",
  "feature-detects": ["dom/hidden"]
}

وهذا يعني أنه بدلاً من <html class="hidden"> ، ستحصل على <html class="foo-hidden"> .

عدم شبيبة

بشكل افتراضي ، سيقوم Modernizr بإعادة كتابة <html class="no-js"> إلى <html class="js"> . يتيح هذا إخفاء عناصر معينة يجب أن يتم عرضها فقط في البيئات التي تنفذ JavaScript. إذا كنت تريد تعطيل هذا التغيير ، فيمكنك تعيين enableJSClass على false في التهيئة .

enableClasses

إذا كنت تستخدم classPrefix ، مثل classPrefix ، فيجب عليك تضمين تلك البادئة في عنصر html الخاص بك. أي. supports-no-js بدلا من no-js .

وأخيرًا ، إذا كنت لا تريد أن يقوم Modernizr بإضافة أي من enableClasses ، فيمكنك تعيين enableClasses على false . لا يؤثر هذا .no-js تحديث .no-js ، لذا إذا كنت لا تريد تحديثه ، فستحتاج إلى تعيين enableJSClass على false في التهيئة.

باستخدام Modernizr مع JavaScript

كائن Modernizr

Modernizr بتتبع نتائج كل من اكتشافات الميزة عن طريق كائن Modernizr . وهذا يعني أنه لكل اختبار ، ستتم إضافة خاصية مقابلة. عليك فقط اختبار truthiness في الرمز الخاص بك لمعرفة ما تريد القيام به

if (Modernizr.awesomeNewFeature) {
  showOffAwesomeNewFeature();
} else {
  getTheOldLameExperience();
}

طرق المساعد

يعرض Modernizr اختياريًا عددًا من الوظائف الإضافية ، والتي يمكنك قراءة المزيد عنها في Modernizr API

Modernizr API

Modernizr.on

Modernizr.on( feature, cb )

Modernizr.on('flash', function( result ) {
  if (result) {
   // the browser has flash
  } else {
    // the browser does not have flash
  }
});

Modernizr.addTest

Modernizr.addTest( feature, test )

تتمثل أكثر الطرق شيوعًا في اكتشاف الميزات الخاصة بك في الاتصال بـ Modernizr.addTest باستخدام سلسلة (يفضل فقط أحرف صغيرة ، دون أي علامات ترقيم) ، ووظيفة تريد تنفيذها والتي ستؤدي إلى نتيجة منطقية

Modernizr.addTest('itsTuesday', function() {
 var d = new Date();
 return d.getDay() === 2;
});

عندما يتم تشغيل ما سبق ، فإنه سيتم تعيين Modernizr.itstuesday إلى true عندما يكون يوم الثلاثاء ، وإلى false كل يوم من أيام الأسبوع. هناك شيء واحد يجب ملاحظته هو أنه يتم دومًا تقليل أسماء دالات اكتشاف الميزات عند إضافتها إلى كائن Modernizr. وهذا يعني أن Modernizr.itsTuesday لن تكون موجودة ، ولكن Modernizr.itstuesday سوف. نظرًا لأننا ننظر فقط إلى القيمة التي يتم إرجاعها من أي وظيفة للكشف عن الميزات ، فإنك لا تحتاج إلى استخدام إحدى الوظائف فعليًا. للكشف عن بسيطة ، مجرد تمرير في بيان سيعود قيمة منطقية يعمل على ما يرام.

Modernizr.addTest('hasJquery', 'jQuery' in window);

تمامًا كما كان من قبل ، عندما يكون تطبيق Modernizr.hasjquery المذكور أعلاه صحيحًا إذا تم تضمين jQuery على الصفحة. لا يؤدي استخدام وظيفة ما إلى حفظ مقدار صغير من النفقات العامة للمتصفح ، بالإضافة إلى جعل التعليمة البرمجية أكثر قابلية للقراءة. وأخيرًا ، لديك أيضًا القدرة على المرور في كائن من أسماء الميزات واختباراتها. هذا مفيد إذا كنت ترغب في إضافة عدة عمليات كشف دفعة واحدة. يجب أن تكون المفاتيح دائمًا عبارة عن سلسلة ، ويمكن أن تكون القيمة منطقية أو دالة تقوم بإرجاع قيمة منطقية.

var detects = {
 'hasjquery': 'jQuery' in window,
 'itstuesday': function() {
   var d = new Date();
   return d.getDay() === 2;
 }
}
Modernizr.addTest(detects);

لا يوجد فرق حقيقي بين الطرق الأولى و هذه الطريقة ، فهي مجرد وسيلة تمكنك من كتابة المزيد من الكود المقروء.

Modernizr.atRule

Modernizr.atRule( prop )

var keyframes = Modernizr.atRule('@keyframes');
if (keyframes) {
  // keyframes are supported
  // could be `@-webkit-keyframes` or `@keyframes`
} else {
  // keyframes === `false`
}

Modernizr._domPrefixes

تعد Modernizr._domPrefixes هي نفسها تمامًا مثل _prefixes ، ولكن بدلاً من خصائص حالة kebab ، فإن كل الخصائص هي المتغير Capitalized الخاص بها

Modernizr._domPrefixes === [ "Moz", "O", "ms", "Webkit" ];

Modernizr.hasEvent

Modernizr.hasEvent( eventName, [element] )

يتيح لك Modernizr.hasEvent تحديد ما إذا كان المستعرض يدعم حدثًا تم توفيره أم لا. بشكل افتراضي ، يقوم بهذا الاكتشاف على عنصر div

hasEvent('blur') // true;

ومع ذلك ، فأنت قادر على إعطاء كائن كوسيطة ثانية لـ hasEvent للكشف عن حدث على شيء آخر غير div.

hasEvent('devicelight', window) // true;

Modernizr.mq

Modernizr.mq( mq )

يسمح Modernizr.mq لك برمجياً بالتحقق مما إذا كانت حالة إطار المستعرض الحالي تطابق استعلام الوسائط.

var query = Modernizr.mq('(min-width: 900px)');
if (query) {
  // the browser window is larger than 900px
}

يتم دعم استعلامات الوسائط الصالحة فقط ، لذلك يجب عليك دائمًا تضمين قيم مع استعلام الوسائط الخاص بك

// good
 Modernizr.mq('(min-width: 900px)');
// bad
 Modernizr.mq('min-width');

إذا كنت ترغب فقط في اختبار أن استعلامات الوسائط مدعومة بشكل عام ، فاستخدمها

Modernizr.mq('only all'); // true if MQ are supported, false if not

لاحظ أنه إذا كان المستعرض لا يدعم استعلامات الوسائط (مثل IE القديم) ، فسيعرض mq false دائمًا.

Modernizr.prefixed

Modernizr.prefixed( prop, [obj], [elem] )

يأخذ Modernizr.prefixed قيمة css لسلسلة في نمط camelCase نمط DOM (على عكس نموذج kebab-case) ، ويعيد إصدار (ربما مسبوقًا) من تلك الخاصية التي يدعمها المتصفح بالفعل. على سبيل المثال ، في أقدم Firefox ...

prefixed('boxSizing')

إرجاع "MozBoxSizing" في أحدث متصفح فايرفوكس ، وأي متصفح آخر يدعم الإصدار غير boxSizing سيعود ببساطة boxSizing . أي متصفح لا يدعم الخاصية على الإطلاق ، فإنه سيعود false . بشكل افتراضي ، يتم فحص البادئة مقابل عنصر DOM. إذا كنت تريد التحقق من خاصية على كائن آخر ، فما عليك سوى تمريرها كوسيطة ثانية

var rAF = prefixed('requestAnimationFrame', window);
raf(function() {
 renderFunction();
})

لاحظ أن هذا سيعود إلى الوظيفة الفعلية - وليس اسم الدالة. إذا كنت تحتاج إلى الاسم الفعلي للعقار ، فاذكر بشكل false كوسيطة ثالثة

var rAFProp = prefixed('requestAnimationFrame', window, false);
rafProp === 'WebkitRequestAnimationFrame' // in older webkit

إحدى حالات الاستخدام الشائعة للبادئة هي إذا كنت تحاول تحديد أي من أحداث نهاية النقل التي سترتبط بها ، يمكنك فعل شيء ما مثل ...

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd', * Saf 6, Android Browser
    'MozTransition'    : 'transitionend',       * only for FF < 15
    'transition'       : 'transitionend'        * IE10, Opera, Chrome, FF 15+, Saf 7+
};
var transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

إذا كنت تريد بحثًا مشابهًا ، ولكن في حالة الكباب ، يمكنك استخدام prefixedCSS .

Modernizr.prefixedCSS

Modernizr.prefixedCSS( prop )

يشبه Modernizr.prefixed الإصدار Modernizr.prefixed ، ولكن يُرجع النتيجة في شكل متصل

Modernizr.prefixedCSS('transition') // '-moz-transition' in old Firefox

نظرًا لأنه مفيد فقط لخصائص نمط CSS ، يمكن اختباره فقط مقابل HTMLElement. يمكن تمرير الخصائص على هيئة نمط camelCase أو نمط cebab لنمط DOM.

Modernizr.prefixedCSSValue

Modernizr.prefixedCSSValue( prop, value )

Modernizr.prefixedCSSValue هو اختبار طريقة لخصائص css مسبوقة (مثل display: -webkit-flex)

Modernizr.prefixedCSSValue('background', 'linear-gradient(left, red, red)')

Modernizr._prefixes

Modernizr._prefixes هي القائمة الداخلية للبادئات التي نختبرها داخل الأشياء مثل prefixed و prefixedCSS . إنها ببساطة مجموعة من بادئات البائعين للكباب التي يمكنك استخدامها داخل الكود. تتضمن بعض حالات الاستخدام الشائعة إنشاء جميع الإصدارات مسبقة المحتملة لخاصية CSS

var rule = Modernizr._prefixes.join('transform: rotate(20deg); ');
rule === 'transform: rotate(20deg); webkit-transform: rotate(20deg); moz-transform: rotate(20deg); o-transform: rotate(20deg); ms-transform: rotate(20deg);'

إنشاء جميع الإصدارات مسبقة المحتملة لقيمة CSS

rule = 'display:' +  Modernizr._prefixes.join('flex; display:') + 'flex';
rule === 'display:flex; display:-webkit-flex; display:-moz-flex; display:-o-flex; display:-ms-flex; display:flex'

Modernizr.testAllProps

Modernizr.testAllProps( prop, [value], [skipValueTest] )

يحدد testAllProps ما إذا كانت خاصية CSS معينة ، في بعض النماذج مسبقة ، معتمدة من قبل المتصفح.

testAllProps('boxSizing')  // true

يمكن اختياريًا إعطاء قيمة CSS في شكل سلسلة لاختبار ما إذا كانت قيمة الخاصية صالحة

testAllProps('display', 'block') // true
testAllProps('display', 'penguin') // false

يمكن تمرير قيمة منطقية كمعلمة ثالثة لتخطي فحص القيمة عند عدم توفر الكشف الأصلي (supports).

testAllProps('shapeOutside', 'content-box', true);

Modernizr.testProp

Modernizr.testProp( prop, [value], [useValue] )

تمامًا مثل testAllProps ، فقط لا يتحقق من أي إصدار testAllProps من السلسلة للمورد. لاحظ أنه يجب توفير اسم الخاصية في camelCase (على سبيل المثال boxSizing not box-sizing)

Modernizr.testProp('pointerEvents')  // true

يمكنك أيضًا توفير قيمة كوسيطة ثانية اختيارية للتحقق مما إذا كانت هناك قيمة محددة معتمدة

Modernizr.testProp('pointerEvents', 'none') // true
Modernizr.testProp('pointerEvents', 'penguin') // false

Modernizr.testStyles

Modernizr.testStyles( rule, callback, [nodes], [testnames] )

تأخذ Modernizr.testStyles قاعدة CSS وتحقنها في الصفحة الحالية مع عناصر DOM (ربما متعددة). يتيح لك هذا التحقق من الميزات التي لا يمكن اكتشافها بمجرد التحقق من IDL .

Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule) {
  // elem is the first DOM node in the page (by default #modernizr)
  // rule is the first argument you supplied - the CSS rule in string form
  addTest('widthworks', elem.style.width === '9px')
});

إذا كان الاختبار يتطلب عقدًا متعددة ، يمكنك تضمين وسيطة ثالثة تشير إلى عدد عناصر div الإضافية التي سيتم تضمينها في الصفحة. يتم حقن العقد الإضافية كأطفال elem التي يتم إرجاعها كوسيطة الأولى إلى رد الاتصال.

Modernizr.testStyles('#modernizr {width: 1px}; #modernizr2 {width: 2px}', function(elem) {
  document.getElementById('modernizr').style.width === '1px'; // true
  document.getElementById('modernizr2').style.width === '2px'; // true
  elem.firstChild === document.getElementById('modernizr2'); // true
}, 1);

بشكل افتراضي ، تحتوي جميع العناصر الإضافية على معرف modernizr[n] ، حيث n هو فهرسها (على سبيل المثال ، الإضافي الأول والثاني هو #modernizr2 ، والثاني هو #modernizr3 ، الخ). إذا كنت ترغب في الحصول على معرفات أكثر دلالة لوظائفك ، فيمكنك توفيرها كوسيطة رابعة ، كصفيف من السلاسل

Modernizr.testStyles('#foo {width: 10px}; #bar {height: 20px}', function(elem) {
  elem.firstChild === document.getElementById('foo'); // true
  elem.lastChild === document.getElementById('bar'); // true
}, 2, ['foo', 'bar']);

الميزات المكتشفة من قبل Modernizr

الكشف فئة CSS / JS
أحداث الضوء المحيط الإضاءة المحيطة

يكتشف دعم واجهة برمجة التطبيقات (API) التي توفر معلومات حول مستويات الإضاءة المحيطة ، كما يتم الكشف عنها بواسطة جهاز الكشف عن الضوء ، من حيث الوحدات التكميلية.

ذاكرة التخزين المؤقت للتطبيق التطبيقات applicationCache

اكتشاف دعم ذاكرة التخزين المؤقت للتطبيق ، لتخزين البيانات لتمكين التطبيقات المستندة إلى الويب دون اتصال.

لقد تعرضت واجهة برمجة التطبيقات لانتقادات شديدة وتجري مناقشات لمعالجة هذا الأمر.

عنصر الصوت HTML5 سمعي

يكتشف العنصر الصوتي

واجهة برمجة تطبيقات البطارية batteryapi

اكتشاف دعم واجهة برمجة تطبيقات البطارية ، للوصول إلى المعلومات حول مستوى شحن البطارية في النظام.

منشئ Blob blobconstructor

يكتشف دعم منشئ Blob ، لإنشاء كائنات تشبه الملفات من البيانات الأولية غير القابلة للتغيير.

اللوحة القماشية اللوحة القماشية

بالكشف عن دعم عنصر <canvas> لرسم ثنائي الأبعاد.

نص قماش canvastext

بالكشف عن دعم لـ APIs للنص لعناصر <canvas> .

المحتوى قابل للتحرير contenteditable

يكتشف دعمًا لسمة العناصر contenteditable ، مما يسمح بتحرير محتويات نص DOM مباشرة بواسطة المستخدم.

قوائم السياق قائمة السياق

يكتشف الدعم لقوائم السياق المخصصة.

بسكويت بسكويت

اكتشاف ما إذا كان دعم ملفات تعريف الارتباط ممكّنًا أم لا.

مشاركة الموارد عبر أصل كر

اكتشاف دعم مشاركة موارد Cross-Origin: طريقة تنفيذ XMLHttpRequests عبر المجالات.

ويب التشفير التشفير

بالكشف عن دعم وظيفة التشفير المتاحة تحت window.crypto.subtle

واجهة برمجة التطبيقات المخصصة customelements

يكتشف دعمًا لواجهة برمجة التطبيقات لـ Custom Elements ، لإنشاء عناصر html مخصصة عبر js

معالج بروتوكول مخصص customprotocolhandler

بالكشف عن دعم واجهة برمجة التطبيقات window.registerProtocolHandler() للسماح لمواقع الويب بتسجيل نفسها window.registerProtocolHandler() محتملة لبروتوكولات معينة.

CustomEvent customevent

يكتشف دعم CustomEvent.

وثبة وثبة

يكتشف الدعم الأصلي للغة برمجة Dart.

عرض البيانات عرض البيانات

بالكشف عن دعم واجهة DataView لقراءة البيانات من ArrayBuffer كجزء من مواصفات "صفيف مكتوب".

رمز تعبيري رمز تعبيري

يكتشف دعم مجموعات الرموز التعبيرية.

مستمع الحدث eventlistener

يكتشف الدعم الأصلي لـ addEventListener

اتجاه EXIF exiforientation

يكتشف دعمًا لتوجيه EXIF ​​في صور JPEG.

يشاهد iOS علامة اتجاه EXIF ​​في JPEG ويقوم بتدوير الصورة وفقًا لذلك. معظم متصفحات سطح المكتب تتجاهل هذه البيانات.

فلاش فلاش

يكتشف دعم Flash بالإضافة إلى الإضافات التي تحظر Flash

قوة اللمس الأحداث forcetouch

اختبار ما إذا كان المستعرض يدعم الكشف عن أحداث Force Touch. تسمح ميزة Force Touch Events بسلوكيات وتفاعلات مخصصة على أساس الضغط المعطى أو التغيير في الضغط من لوحة التتبع المتوافقة.

تتوفر أحداث Force Touch في نظام التشغيل OS X 10.11 والإصدارات الأحدث منه على الأجهزة المزودة ببرامج التتبع Force Touch.

واجهة برمجة تطبيقات كاملة تكبير الشاشة

يكتشف دعمًا للقدرة على جعل موقع الويب الحالي يستحوذ على شاشة المستخدم بالكامل

GamePad API جيم ب

يكتشف دعم واجهة برمجة تطبيقات Gamepad ، للوصول إلى أجهزة التحكم في الألعاب وأجهزة التحكم.

واجهة برمجة تطبيقات الموقع الجغرافي تحديد الموقع الجغرافي

يكتشف دعم واجهة برمجة تطبيقات الموقع الجغرافي للمستخدمين لتوفير موقعهم لتطبيقات الويب.

حدث Hashchange hashchange

يكتشف دعمًا لحدث hashchange ، يتم تشغيله عند تغيير جزء الموقع الحالي.

شريط التمرير المخفي hiddenscroll

بالكشف عن أشرطة تمرير التراكب (عند ظهور أشرطة التمرير على الكتل الفائضة). هذا هو الأكثر شيوعا على المحمول و OS X.

واجهة برمجة تطبيقات السجل التاريخ

اكتشاف دعم API للتاريخ لمعالجة سجل جلسة المتصفح.

واردات HTML htmlimports

اكتشاف دعم استيراد HTML ، وهي ميزة تستخدم للتحميل في Web Components.

وضع التوافق مع IE8 ie8compat

يكتشف ما إذا كان المتصفح الحالي هو IE8 في وضع التوافق (أي يعمل ك IE7).

المفهرسة المفهرسة

بالكشف عن دعم واجهة برمجة التطبيقات الخاصة بتخزين جانب العميل IndexedDB (المواصفات النهائية).

IndexedDB النقطة indexeddbblob

بالكشف عن ما إذا كان المستعرض يمكنه حفظ كائنات File / Blob إلى IndexedDB

سمات المدخلات إدخال

يكتشف دعم سمات عنصر <input> HTML5 ويكشف الخصائص الفرعية المنطقية مع النتائج:

Modernizr.input.autocomplete
Modernizr.input.autofocus
Modernizr.input.list
Modernizr.input.max
Modernizr.input.min
Modernizr.input.multiple
Modernizr.input.pattern
Modernizr.input.placeholder
Modernizr.input.required
Modernizr.input.step
المدخلات [البحث] حدث البحث بحث

يوجد حدث search مخصص يتم تنفيذه في مستعرضات webkit عند استخدام عنصر input[search] .

اكتب أنواع المدخلات inputtypes

يكتشف دعم أنواع إدخال نموذج HTML5 ويكشف الخصائص الفرعية المنطقية مع النتائج:

Modernizr.inputtypes.color
Modernizr.inputtypes.date
Modernizr.inputtypes.datetime
Modernizr.inputtypes['datetime-local']
Modernizr.inputtypes.email
Modernizr.inputtypes.month
Modernizr.inputtypes.number
Modernizr.inputtypes.range
Modernizr.inputtypes.search
Modernizr.inputtypes.tel
Modernizr.inputtypes.time
Modernizr.inputtypes.url
Modernizr.inputtypes.week
واجهة برمجة تطبيقات Internationalization إينتل

يكتشف دعم واجهة برمجة تطبيقات Internationalization التي تسمح بالتنسيق السهل للرقم والتواريخ وسلسلة الترتيب استنادًا إلى اللغة

JSON سلمان

يكتشف الدعم الأصلي لوظائف معالجة JSON.

حروف الخطوط الأربطة

بالكشف عن دعم للخطوط المركبة OpenType

عكس القوائم مرتبة olreversed

يكتشف دعم السمة reversed على العنصر <ol> .

MathML mathml

يكتشف دعم MathML ، لمعادلات الرياضيات في صفحات الويب.

قناة الرسالة MessageChannel

يكتشف دعم قنوات الرسائل ، طريقة للتواصل بين سياقات التصفح المختلفة مثل إطارات iframes والعاملين ، إلخ.

إعلام إعلام

يكتشف دعم واجهة برمجة التطبيقات للإشعارات

واجهة برمجة تطبيقات رؤية الصفحة pagevisibility

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

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

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

DOM Pointer Events API pointerevents

للكشف عن دعم واجهة برمجة تطبيقات أحداث مؤشر DOM ، التي توفر واجهة حدث موحدة لأجهزة الإدخال بالتوجيه ، كما هو مطبق في IE10 +.

Pointer Lock API pointerlock

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

postMessage postmessage

بالكشف عن دعم بروتوكول window.postMessage لرسائل عبر المستند.

API القرب قرب

اكتشاف الدعم لواجهة برمجة التطبيقات (API) التي تسمح للمستخدمين بالحصول على المعلومات المتعلقة بالقرب من مستشعر القرب الخاص بالجهاز.

QuerySelector queryselector

يكتشف دعم querySelector.

كوتا إدارة التخزين API quotamanagement

يكتشف القدرة على طلب مقدار معين من المساحة للوصول إلى نظام الملفات

requestAnimationFrame requestanimationframe

اكتشاف دعم واجهة برمجة التطبيقات window.requestAnimationFrame ، window.requestAnimationFrame تحميل إعادة الرسم المتحرك للرسوم المتحركة إلى المتصفح لتحسين الأداء.

ServiceWorker API serviceworker

تعد ServiceWorkers (وحدات التحكم في التنقل سابقًا) وسيلة لتخزين الموارد مؤقتًا باستمرار لبناء التطبيقات التي تعمل بشكل أفضل بلا اتصال.

SVG SVG

يكتشف دعم SVG في عناصر <embed> أو <object> .

سلاسل القالب templatestrings

سلاسل القوالب هي حرفية سلسلة تسمح بالتعبيرات المضمنة.

المس الأحداث touchevents

يشير إلى ما إذا كان المستعرض يدعم واجهة برمجة تطبيقات W3C Touch Events.

هذا لا يعكس بالضرورة جهاز يعمل باللمس:

  • أجهزة اللمس القديمة فقط تحاكي أحداث الماوس
  • تقوم أجهزة IE الحديثة بتطبيق واجهة برمجة تطبيقات أحداث المؤشر بدلاً من ذلك: استخدم Modernizr.pointerevents للكشف عن الدعم لذلك
  • قد تعمل بعض المتصفحات وإعدادات نظام التشغيل على تمكين واجهات برمجة التطبيقات التي تعمل باللمس عند عدم توصيل أي شاشة تعمل باللمس
  • قد تقوم المتصفحات المستقبلية بتنفيذ نماذج أحداث أخرى للتفاعلات التي تعمل باللمس

انظر هذا المقال: لا يمكنك اكتشاف شاشة تعمل باللمس .

يوصى بربط أحداث الفأرة واللمس / المؤشر في آنٍ واحد - راجع هذا البرنامج التعليمي لـ HTML5 Rocks .

سيعود هذا الاختبار أيضًا إلى دعم Firefox 4 Multitouch.

مصفوفات مكتوبة typedarrays

يكتشف دعمًا لمعالجة البيانات الثنائية المحلية عبر الصفائف المكتوبة في جافا سكريبت.

لا يتحقق من دعم DataView ؛ استخدام Modernizr.dataview لذلك.

مجموعة يونيكود unicoderange
أحرف Unicode يونيكود

بالكشف عن ما إذا كانت أحرف unicode مدعومة في المستند الحالي.

IE User Data API بيانات المستخدم

بالكشف عن دعم IE userData للبيانات المستمرة ، API تشبه localStorage ولكنها مدعومة منذ IE5.

واجهة برمجة تطبيقات الاهتزاز تذبذب

يكتشف دعم واجهة برمجة التطبيقات (API) التي توفر الوصول إلى آلية الاهتزاز الخاصة بجهاز الاستضافة ، من أجل توفير تغذية راجعة عن طريق اللمس.

HTML5 فيديو فيديو

اكتشاف الدعم لعنصر الفيديو ، بالإضافة إلى اختبار أنواع المحتوى التي يدعمها.

يتم توفير الخصائص الفرعية لوصف دعم تنسيقات ogg و h264 و webm ، على سبيل المثال:

Modernizr.video         // true
Modernizr.video.ogg     // 'probably'
VML VML

يكتشف دعم VML.

نوايا الويب هناك شفرات WebIntent

اكتشاف الدعم الأصلي لبيئات Web Intents API لاكتشاف الخدمة والتواصل بين التطبيقات.

أضاف Chrome دعمًا لذلك في الإصدار 19 ، ولكنه أزاله مرة أخرى في الإصدار 24 نظرًا لوجود "عدد من المجالات للتطوير في كل من واجهة برمجة التطبيقات وتجربة مستخدم محددة في Chrome". لا توجد متصفحات أخرى تدعمها حاليًا ، ولكن تتوفر شفرة جافا سكريبت .

Web Animation API الرسوم المتحركة

يكتشف دعم واجهة برمجة تطبيقات الرسوم المتحركة على الويب ، وهي طريقة لإنشاء رسوم متحركة بتنسيق CSS في js

تقنية WebGL تقنية WebGL
دعم WebSockets مآخذ الويب
XDomainRequest xdomainrequest

بالكشف عن دعم XDomainRequest في IE9 و IE8

[تنزيل] سمة adownload

عند استخدامه على <a> ، تشير هذه السمة إلى أنه يجب تنزيل المورد الذي يشير إليه بواسطة المتصفح بدلاً من الانتقال إليه.

سمة حلقة الصوت audioloop

اكتشاف ما إذا كان يمكن إعادة تشغيل عنصر الصوت تلقائيًا ، بمجرد الانتهاء من ذلك

الصوت المسبق audiopreload

اكتشاف ما إذا كان يمكن تنزيل الصوت في الخلفية قبل بدء تشغيله في عنصر <audio>

Web Audio API تطبيقات WebAudio

اكتشاف واجهة برمجة تطبيقات webaudio القديمة غير القياسية ، (بخلاف واجهة برمجة تطبيقات AudioContext القائمة على المعايير)

انخفاض مستوى البطارية البطارية ضعيفة

قم بتمكين مطور لإزالة وحدة المعالجة المركزية CSS / JS المكثفة عندما تكون البطارية منخفضة

قماش مزج الدعم canvasblending

يكتشف ما إذا كانت أنماط مزج نمط Photoshop متوفرة في اللوحة القماشية.

نوع canvas.toDataURL todataurljpeg، todataurlpng، todataurlwebp
دعم قماش لف canvaswinding

يحدد ما إذا كانت القواعد المتعرجة هي التي تتحكم في إمكانية مرور مسار في اتجاه عقارب الساعة أو عكس اتجاه عقارب الساعة

getRandomValues getrandomvalues

يكتشف الدعم الخاص بـ window.crypto.getRandomValues ​​لإنشاء أرقام عشوائية آمنة مشفرة

cssall cssall

اكتشاف دعم خاصية css all ، وهي اختصار لإعادة تعيين جميع خصائص css (باستثناء الاتجاه و unicode-bidi) إلى قيمتها الأصلية

الرسوم المتحركة CSS cssanimations

يكتشف ما إذا كان يمكن تحريك العناصر باستخدام CSS أم لا

مظهر خارجي مظهر خارجي

يكتشف دعم خاصية appearance css ، التي تُستخدم لجعل عنصر يرث نمط عنصر واجهة المستخدم القياسي. ويمكن أيضًا استخدامه لإزالة الأنماط الافتراضية لعنصر ، مثل المدخلات والأزرار.

مرشح خلفية backdropfilter

يكتشف دعم مرشحات الصور الخلفية لـ CSS ، مما يسمح بتأثيرات ضبابية الخلفية كتلك التي تم تقديمها في iOS 7. وقد تمت إضافة الدعم إلى iOS Safari / WebKit في iOS 9.

نمط خلفية مزج CSS backgroundblendmode

يكتشف قدرة المستعرض على استخدام الخلفيات المركبة باستخدام صيغ المزج المشابهة لتلك الموجودة في Photoshop أو Illustrator.

CSS خلفية كليب النص backgroundcliptext

يكتشف القدرة على التحكم يحدد ما إذا كانت خلفية عنصر ما تمتد خارج حدوده في CSS أم لا

موقف الخلفية الاختزال bgpositionshorthand

يكتشف ما إذا كان بإمكانك استخدام الطريقة المختصرة لتعريف أجزاء متعددة من موضع خلفية عنصر ما بشكل سلطوي.

على سبيل المثال ، background-position: right 10px bottom 10px

موقف الخلفية XY bgpositionxy

بالكشف عن القدرة على السيطرة على موقف خلفية عنصر باستخدام CSS

تكرار الخلفية bgrepeatspace، bgrepeatround

بالكشف عن القدرة على استخدام الجولة والفضاء كخصائص لتكرار الخلفية

حجم الخلفية backgroundsize
غطاء حجم الخلفية bgsizecover
صورة الحدود borderimage
دائرة نصف قطرها الحدود borderradius
صندوق الظل boxshadow
مربع التحجيم boxsizing
المغلق احسب csscalc

طريقة السماح للقيم المحسوبة لوحدات الطول. فمثلا:

//lem {
  width: calc(100% - 3em);
}
CSS: محدد زائف محدد التحقق
CSS Font ch Units csschunit
أعمدة CSS csscolumns
CSS الشبكة (القديمة والجديدة) cssgrid، cssgridlegacy
CSS مكعب بيزير نطاق cubicbezierrange
تشغيل CSS عرض-runin
جدول عرض CSS جدول العرض

display: table table-cell . (يتم اختبار كلاهما تحت table-cell اسم واحد)

CSS-overflow ellipsis القطع
CSS.escape () cssescape

اختبارات لدعم CSS.escape() .

CSS Font ex Units cssexunit
فلاتر CSS cssfilters
حول flexbox حول flexbox

يكتشف دعم نموذج Flexible Box Layout ، المسمى Flexbox ، والذي يسمح بالتلاعب السهل لأمر التخطيط والتحجيم داخل الحاوية.

Flexbox (القديمة) flexboxlegacy
فليكس بوكس ​​(tweener) flexboxtweener
فليكس خط التفاف flexwrap

يكتشف دعمًا لخاصية CSS المربعة flex-wrap ، وهي جزء من Flexbox ، وهي غير موجودة في جميع تطبيقات Flexbox (خاصةً Firefox).

وقد ظهر هذا في كل من بنية الجملة 'tweener' (تم تنفيذها بواسطة IE10) والبناء 'الحديث' (الذي نفذه الآخرون). سيعود هذا الكشف إلى أي من هذه التطبيقات ، طالما تم دعم خاصية flex-wrap . لضمان التوافق مع البنية الحديثة ، استخدمها مع Modernizr.flexbox :

if (Modernizr.flexbox && Modernizr.flexwrap) {
  // Modern Flexbox with `flex-wrap` supported
}
else {
  // Either old Flexbox syntax, or `flex-wrap` not supported
}
@font-face fontface
CSS Generated Content generatedcontent
CSS Gradients cssgradients
hairline hairline

Detects support for hidpi/retina hairlines, which are CSS borders with less than 1px in width, for being physically 1px on hidpi screens.

CSS HSLA Colors hsla
CSS Hyphens csshyphens,softhyphens,softhyphensfind
CSS :invalid pseudo-class cssinvalid

Detects support for the ':invalid' CSS pseudo-class.

CSS :last-child pseudo-selector lastchild
CSS Mask cssmask
CSS Media Queries mediaqueries
CSS Multiple Backgrounds multiplebgs
CSS :nth-child pseudo-selector nthchild

Detects support for the ':nth-child()' CSS pseudo-selector.

CSS Object Fit objectfit
CSS Opacity opacity
CSS Overflow Scrolling overflowscrolling
CSS Pointer Events csspointerevents
CSS position: sticky csspositionsticky
CSS Generated Content Animations csspseudoanimations
CSS Generated Content Transitions csspseudotransitions
CSS Reflections cssreflections
CSS Regions regions
CSS Font rem Units cssremunit
CSS UI Resize cssresize

Test for CSS 3 UI "resize" property

CSS rgba rgba
CSS Stylable Scrollbars cssscrollbar
Scroll Snap Points scrollsnappoints

Detects support for CSS Snap Points

CSS Shapes shapes
CSS general sibling selector siblinggeneral
CSS Subpixel Fonts subpixelfont
CSS Supports supports
CSS :target pseudo-class target

Detects support for the ':target' CSS pseudo-class.

CSS text-align-last textalignlast
CSS textshadow textshadow
CSS Transforms csstransforms
CSS Transforms 3D csstransforms3d
CSS Transforms Level 2 csstransformslevel2
CSS Transform Style preserve-3d preserve3d

Detects support for transform-style: preserve-3d , for getting a proper 3D perspective on elements.

CSS Transitions csstransitions
CSS user-select userselect
CSS :valid pseudo-class cssvalid

Detects support for the ':valid' CSS pseudo-class.

CSS vh unit cssvhunit
CSS vmax unit cssvmaxunit
CSS vmin unit cssvminunit
CSS vw unit cssvwunit
will-change willchange

Detects support for the will-change css property, which formally signals to the browser that an element will be animating.

CSS wrap-flow wrapflow
classList classlist
createElement with Attributes createelementattrs,createelement-attrs
dataset API dataset
Document Fragment documentfragment

Append multiple elements to the DOM within a single insertion.

[hidden] Attribute hidden

Does the browser support the HTML5 [hidden] attribute?

microdata microdata
DOM4 MutationObserver mutationobserver

Determines if DOM4 MutationObserver support is available.

Passive event listeners passiveeventlisteners

Detects support for the passive option to addEventListener.

bdi Element bdi

Detect support for the bdi element, a way to have text that is isolated from its possibly bidirectional surroundings

datalist Element datalistelem
details Element details
output Element outputelem
picture Element picture
progress Element progressbar,meter
ruby, rp, rt Elements ruby
Template Tag template
time Element time
Track element and Timed Text Track texttrackapi,track
Unknown Elements unknownelements

Does the browser support HTML with non-standard / new elements?

ES5 Array es5array

Check if browser implements ECMAScript 5 Array per specification.

ES5 Date es5date

Check if browser implements ECMAScript 5 Date per specification.

ES5 Function es5function

Check if browser implements ECMAScript 5 Function per specification.

ES5 Object es5object

Check if browser implements ECMAScript 5 Object per specification.

ES5 es5

Check if browser implements everything as specified in ECMAScript 5.

ES5 Strict Mode strictmode

Check if browser implements ECMAScript 5 Object strict mode.

ES5 String es5string

Check if browser implements ECMAScript 5 String per specification.

ES5 Syntax es5syntax

Check if browser accepts ECMAScript 5 syntax.

ES5 Immutable Undefined es5undefined

Check if browser prevents assignment to global undefined per ECMAScript 5.

ES6 Array es6array

Check if browser implements ECMAScript 6 Array per specification.

ES6 Arrow Functions arrow

Check if browser implements ECMAScript 6 Arrow Functions per specification.

ES6 Collections es6collections

Check if browser implements ECMAScript 6 Map, Set, WeakMap and WeakSet

ES5 String.prototype.contains contains

Check if browser implements ECMAScript 6 String.prototype.contains per specification.

ES6 Generators generators

Check if browser implements ECMAScript 6 Generators per specification.

ES6 Math es6math

Check if browser implements ECMAScript 6 Math per specification.

ES6 Number es6number

Check if browser implements ECMAScript 6 Number per specification.

ES6 Object es6object

Check if browser implements ECMAScript 6 Object per specification.

ES6 Promises promises

Check if browser implements ECMAScript 6 Promises per specification.

ES6 String es6string

Check if browser implements ECMAScript 6 String per specification.

Orientation and Motion Events devicemotion,deviceorientation

Part of Device Access aspect of HTML5, same category as geolocation.

devicemotion tests for Device Motion Event support, returns boolean value true/false.

deviceorientation tests for Device Orientation Event support, returns boolean value true/false

onInput Event oninput

oninput tests if the browser is able to detect the input event

File API filereader

filereader tests for the File API specification

Tests for objects specific to the File API W3C specification without being redundant (don't bother testing for Blob since it is assumed to be the File object's prototype.)

Filesystem API filesystem
input[capture] Attribute capture

When used on an <input> , this attribute signifies that the resource it takes should be generated via device's camera, camcorder, sound recorder.

input[file] Attribute fileinput

Detects whether input type="file" is available on the platform

Eg iOS < 6 and some android version don't support this

input[directory] Attribute directory

When used on an <input type="file"> , the directory attribute instructs the user agent to present a directory selection dialog instead of the usual file selection dialog.

input[form] Attribute formattribute

Detects whether input form="form_id" is available on the platform Eg IE 10 (and below), don't support this

input[type="number"] Localization localizednumber

Detects whether input type="number" is capable of receiving and displaying localized numbers, eg with comma separator.

placeholder attribute placeholder

Tests for placeholder attribute in inputs and textareas

form#requestAutocomplete() requestautocomplete

When used with input[autocomplete] to annotate a form, form.requestAutocomplete() shows a dialog in Chrome that speeds up checkout flows (payments specific for now).

Form Validation formvalidation

This implementation only tests support for interactive form validation. To check validation for a specific type or a specific other constraint, the test can be combined:

  • Modernizr.inputtypes.number && Modernizr.formvalidation (browser supports rangeOverflow, typeMismatch etc. for type=number)
  • Modernizr.input.required && Modernizr.formvalidation (browser supports valueMissing)
iframe[sandbox] Attribute sandbox

Test for sandbox attribute in iframes.

iframe[seamless] Attribute seamless

Test for seamless attribute in iframes.

iframe[srcdoc] Attribute srcdoc

Test for srcdoc attribute in iframes.

Animated PNG apng

Test for animated png support.

Image crossOrigin imgcrossorigin

Detects support for the crossOrigin attribute on images, which allow for cross domain images inside of a canvas without tainting it

JPEG 2000 jpeg2000

Test for JPEG 2000 support

JPEG XR (extended range) jpegxr

Test for JPEG XR support

sizes attribute sizes

Test for the sizes attribute on images

srcset attribute srcset

Test for the srcset attribute of images

Webp Alpha webpalpha

Tests for transparent webp support.

Webp Animation webpanimation

Tests for animated webp support.

Webp Lossless webplossless,webp-lossless

Tests for non-alpha lossless webp support.

Webp webp

Tests for lossy, non-alpha webp support.

Tests for all forms of webp support (lossless, lossy, alpha, and animated)..

Modernizr.webp // Basic support (lossy) Modernizr.webp.lossless // Lossless Modernizr.webp.alpha // Alpha (both lossy and lossless) Modernizr.webp.animation // Animated WebP

input formaction inputformaction

Detect support for the formaction attribute on form inputs

input formenctype inputformenctype

Detect support for the formenctype attribute on form inputs, which overrides the form enctype attribute

input formmethod inputformmethod

Detect support for the formmethod attribute on form inputs

input formtarget inputformtarget

Detect support for the formtarget attribute on form inputs, which overrides the form target attribute

Hover Media Query hovermq

Detect support for Hover based media queries

Pointer Media Query pointermq

Detect support for Pointer based media queries

Beacon API beacon

Detects support for an API that allows for asynchronous transfer of small HTTP data from the client to a server.

Low Bandwidth Connection lowbandwidth

Tests for determining low-bandwidth via navigator.connection

There are two iterations of the navigator.connection interface.

The first is present in Android 2.2+ and only in the Browser (not WebView)

  • http://docs.phonegap.com/en/1.2.0/phonegap_connection_connection.md.html#connection.type
  • http://davidbcalhoun.com/2010/using-navigator-connection-android

The second is specced at http://dev.w3.org/2009/dap/netinfo/ and perhaps landing in WebKit

  • https://bugs.webkit.org/show_bug.cgi?id=73528

Unknown devices are assumed as fast

For more rigorous network testing, consider boomerang.js: https://github.com/bluesmoon/boomerang/

Server Sent Events eventsource

Tests for server sent events aka eventsource.

Fetch API fetch

Detects support for the fetch API, a modern replacement for XMLHttpRequest.

XHR responseType='arraybuffer' xhrresponsetypearraybuffer

Tests for XMLHttpRequest xhr.responseType='arraybuffer'.

XHR responseType='blob' xhrresponsetypeblob

Tests for XMLHttpRequest xhr.responseType='blob'.

XHR responseType='document' xhrresponsetypedocument

Tests for XMLHttpRequest xhr.responseType='document'.

XHR responseType='json' xhrresponsetypejson

Tests for XMLHttpRequest xhr.responseType='json'.

XHR responseType='text' xhrresponsetypetext

Tests for XMLHttpRequest xhr.responseType='text'.

XHR responseType xhrresponsetype

Tests for XMLHttpRequest xhr.responseType.

XML HTTP Request Level 2 XHR2 xhr2

Tests for XHR2.

script[async] scriptasync

Detects support for the async attribute on the <script> element.

script[defer] scriptdefer

Detects support for the defer attribute on the <script> element.

Speech Recognition API speechrecognition
Speech Synthesis API speechsynthesis
Local Storage localstorage
Session Storage sessionstorage
Web SQL Database websqldatabase
style[scoped] stylescoped

Support for the scoped attribute of the <style> element.

SVG as an <img> tag source svgasimg
SVG clip paths svgclippaths

Detects support for clip paths in SVG (only, not on HTML content).

See this discussion regarding applying SVG clip paths to HTML content.

SVG filters svgfilters
SVG foreignObject svgforeignobject

Detects support for foreignObject tag in SVG.

Inline SVG inlinesvg

Detects support for inline SVG in HTML (not within XHTML).

SVG SMIL animation smil
textarea maxlength textareamaxlength

Detect support for the maxlength attribute of a textarea element

Blob URLs bloburls

Detects support for creating Blob URLs

Data URI datauri

Detects support for data URIs. Provides a subproperty to report support for data URIs over 32kb in size:

Modernizr.datauri           // true
Modernizr.datauri.over32kb  // false in IE8
URL parser urlparser

Check if browser implements the URL constructor for parsing URLs.

URLSearchParams API urlsearchparams

Detects support for an API that provides utility methods for working with the query string of a URL.

Video Autoplay videoautoplay

Checks for support of the autoplay attribute of the video element.

Video crossOrigin videocrossorigin

Detects support for the crossOrigin attribute on video tag

Video Loop Attribute videoloop
Video Preload Attribute videopreload
WebGL Extensions webglextensions

Detects support for OpenGL extensions in WebGL. It's true if the WebGL extensions API is supported, then exposes the supported extensions as subproperties, eg:

if (Modernizr.webglextensions) {
  // WebGL extensions API supported
}
if ('OES_vertex_array_object' in Modernizr.webglextensions) {
  // Vertex Array Objects extension supported
}
RTC Data Channel datachannel

Detect for the RTCDataChannel API that allows for transfer data directly from one peer to another

getUserMedia getusermedia
RTC Peer Connection peerconnection
Binary WebSockets websocketsbinary
Base 64 encoding/decoding atobbtoa

Detects support for WindowBase64 API (window.atob && window.btoa).

Framed window framed

Tests if page is iframed.

matchMedia matchmedia

Detects support for matchMedia.

Workers from Blob URIs blobworkers

Detects support for creating Web Workers from Blob URIs.

Workers from Data URIs dataworkers

Detects support for creating Web Workers from Data URIs.

Shared Workers sharedworkers

Detects support for the SharedWorker API from the Web Workers spec.

Transferables Objects transferables

Detects whether web workers can use transferables objects.

Web Workers webworkers

Detects support for the basic Worker API from the Web Workers spec. Web Workers provide a simple means for web content to run scripts in background threads.

原文