Modernizr



modernizr

Modernizr

Modernizr क्या है?

Modernizr जावास्क्रिप्ट कोड का एक छोटा टुकड़ा है जो स्वचालित रूप से आपके उपयोगकर्ता के ब्राउज़र में अगली पीढ़ी वाली वेब प्रौद्योगिकियों की उपलब्धता का पता लगाता है। " UA sniffing" के आधार पर ब्राउज़रों की संपूर्ण श्रेणियों को ब्लैकलिस्ट करने की बजाय, मॉडर्निज़र सुविधा का उपयोग करता है ताकि आप अपने ब्राउज़र के वास्तविक क्षमताओं के आधार पर आसानी से अपने उपयोगकर्ता के अनुभवों को तैयार कर सकें।

इस ज्ञान के साथ कि Modernizr आपको देता है, आप ब्राउज़र में इन नई सुविधाओं का लाभ उठा सकते हैं जो उन्हें प्रस्तुत या उपयोग कर सकते हैं, और अभी भी ब्राउज़र के लिए स्थिति को नियंत्रित करने के आसान और विश्वसनीय साधन हैं जो नहीं कर सकते हैं।

फीचर डिटेक्शन क्या है?

वेब विकास की अंधेरे उम्र में, हमें यह निर्धारित करने के लिए अक्सर यूए स्नीफिंग का सहारा लेना पड़ता था कि क्या उनके उपयोगकर्ता Awesome-New-Feature ™ का उपयोग करने में सक्षम होंगे। अभ्यास में, इसका मतलब है कि निम्न की तरह कुछ करना

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

अब यह ठीक दिखता है , है ना? हम Awesome-New-Feature ™ का उपयोग कर रहे हैं, और निश्चित रूप से यह पुराने क्रिस्टी ब्राउज़र में समर्थित नहीं है, है ना? यह मामला बहुत अच्छी तरह से हो सकता है - आज। लेकिन क्या होगा यदि उस ब्राउज़र का अगला संस्करण Awesome-New-Feature ™ के लिए समर्थन जोड़ता है? अब आपको वापस जाना होगा और अपना कोड ऑडिट करना होगा, जो आप इस चेक को कर रहे प्रत्येक स्थान को अपडेट कर रहे हैं। यह माना जा रहा है कि आपके पास प्रत्येक ब्राउज़र के लिए प्रत्येक सुविधा अद्यतन के बारे में जानने का समय है। इससे भी बदतर, जब तक आपको एहसास नहीं होता कि यह वास्तव में नवीनतम संस्करण में काम करता है, तो उन सभी उपयोगकर्ताओं को कार्यालय में वापस जाने के लिए getTheOldLameExperience , किसी भी कारण से।

उन उपयोगकर्ताओं - स्पष्ट रूप से किसी कारण के लिए एक घटिया वेबसाइट नहीं दी गई - वास्तव में उनके ब्राउज़र और ओएस सेटिंग्स में जा सकती है और ब्राउजर का नाम बदल सकती है (या user-agent - जो हम UA स्निफ़ करते समय कोड में तुलना करते हैं) जो भी वे करेंगे पसंद। उस बिंदु पर - आपका कोड व्यर्थ है। आप उन उपयोगकर्ताओं को अवरुद्ध कर रहे हैं जो वास्तव में आपकी सभी सुविधाओं का समर्थन कर सकते हैं, और संभावित रूप से उन लोगों को दे सकते हैं जो नहीं करते हैं। लगभग सभी को एक टूटा अनुभव मिलता है। कोई बेहतर तरीका ज़रूर होगा!

वहां है, और इसे Feature Detection कहा जाता है, और यह इस तरह दिखता है

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

उपयोगकर्ता द्वारा one-they-make-you-use-at-work ब्राउज़र पर है या नहीं, इसका मानना ​​है कि इसका अर्थ यह है कि वे या तो बहुत बढ़िया-नए-फ़ीचर ™ तक पहुंच नहीं पाते हैं या नहीं, इस पर आपके फैसले को आधार देने के बजाय डिस्कवर वास्तव में प्रोग्रामेटिक रूप से जांचता है कि क्या बहुत बढ़िया-नया-फ़ीचर ™ ब्राउज़र में काम करता है, और आपको या तो एक true या false परिणाम देता है। तो जैसे ही आपका कम से कम पसंदीदा ब्राउज़र Awesome-New-Feature ™ के लिए समर्थन जोड़ता है, आपका कोड वहां काम करता है - स्वचालित रूप से! अब अद्यतन करने के लिए और अधिक नहीं है। कोड समान होता है, लेकिन इसके वास्तविक इरादे के लिए और अधिक स्पष्ट है

Modernizr डाउनलोड कर रहा है

Modernizr के अंतिम संस्करण के बाद से बहुत कुछ बदल गया है। अब एक एकल, आधार modernizr.js फ़ाइल नहीं है। इसके बजाए, Download पेज पर जाएं, जैसा कि आप पहले कर सकते थे, और उन सुविधाओं का चयन करें जिन्हें आप अपनी परियोजना में उपयोग करना चाहते हैं। इस तरह हम सबसे छोटी फ़ाइल संभव प्रदान कर सकते हैं, जिसका अर्थ है आपके लिए एक तेज वेबसाइट। एक बार ऐसा करने के बाद, बस Build बटन दबाएं और आपके पास आधुनिकता का अपना कस्टम निर्माण है, प्रेस को गर्म करें!

आप नोटिस कर सकते हैं कि Build आउटपुट के अतिरिक्त, जहां आप कई वर्षों के लिए कस्टम बिल्ड डाउनलोड करने में सक्षम हैं - दो नए विकल्प हैं।

कमांड लाइन कॉन्फ़िगरेशन

3.0 के बाद से, मॉडर्निज़र भी एनपीएम पर node मॉड्यूल के रूप में अपनी बिल्ड सिस्टम को शिप करता है। इसका मतलब यह है कि आप एक नई ब्राउज़र टैब खोलने के बिना, विभिन्न परियोजनाओं के लिए आधुनिकता के कई बिल्डों को जल्दी से बना सकते हैं।

एक बार आपके पास एनपीएम स्थापित हो जाने के बाद , आप चलकर Modernizr कमांड लाइन टूल इंस्टॉल कर सकते हैं

npm install -g modernizr

अब आप अपनी कस्टम बिल्डिंग शुरू करने के लिए तैयार हैं! आप बिल्ड मेनू से कॉन्फ़िगरेशन फ़ाइल डाउनलोड कर सकते हैं ("कमांड लाइन कॉन्फ़िगर" के अंतर्गत)। यह आपको एक JSON फ़ाइल देगा जो आप अपने कस्टम निर्माण के लिए Modernizr मॉड्यूल को देंगे।

modernizr -c modernizr-config.json

ध्यान दें कि आपको साइट से डाउनलोड की गई कॉन्फ़िगरेशन के लिए फ़ाइल पथ को कमांड लाइन कॉन्फ़िगर करने की आवश्यकता होगी। उपर्युक्त उदाहरण में, हम उसी फ़ोल्डर से modernizr कमांड चला रहे हैं जिसे हमने modernizr-config.json फ़ाइल को डाउनलोड किया है।

ग्रंट कॉन्फ़िगर करें

यदि आप अपनी साइट को हर बार अपडेट करते समय कमांड लाइन से मैन्युअल रूप से अपना निर्माण नहीं करना चाहते हैं, तो आपके पास यह करने के लिए एक Grunt कार्य डाउनलोड करने का विकल्प भी है। स्वचालित रूप से अपने कस्टम संस्करण को बनाने के लिए इस कॉन्फ़िगरेशन फ़ाइल का उपयोग grunt-modernizr साथ किया जा सकता है। बस इसे अपने Gruntfile जोड़ें, और आप दौड़ के लिए बंद हैं।

ध्यान दें कि आपको devFile और outputFile पथ के साथ प्रदत्त कॉन्फ़िगरेशन फ़ाइल को अद्यतन करने की आवश्यकता होगी। here grunt-modernizr के लिए अधिक दस्तावेज उपलब्ध here

कॉन्फ़िगरेशन विकल्प

उपलब्ध विकल्पों और फीचर के अलावा, कुछ अतिरिक्त कॉन्फ़िगरेशन विकल्प हैं।

classPrefix - डिफ़ॉल्ट: ""

एक स्ट्रिंग जो प्रत्येक सीएसएस वर्ग से पहले जोड़ दी जाती है।

enableJSClass - डिफ़ॉल्ट: true

मूल तत्व पर .no-js से .js को अद्यतन करना है या नहीं।

enableClasses - डिफ़ॉल्ट: true

मॉडर्निजर को अपने सीएसएस वर्गों को बिल्कुल जोड़ना चाहिए या नहीं

उन विकल्पों पर अधिक जानकारी के लिए अगला खंड देखें

सीएसएस के साथ Modernizr का उपयोग करना

आधुनिकता के वर्ग

डिफ़ॉल्ट रूप से, Modernizr रूट तत्व ( <html> वेबसाइटों के लिए) पर आपके सभी परीक्षणों के लिए कक्षाएं सेट करता है। इसका मतलब यह है कि प्रत्येक सुविधा के लिए वर्ग को समर्थन के दौरान जोड़ना, और जब यह नहीं है (उदाहरण के लिए। .no-feature या .no-feature ) के साथ इसे no- उपसर्ग के साथ जोड़ना। यह प्रगतिशील वृद्धि के माध्यम से सुविधाओं को जोड़ने के लिए बहुत आसान बनाता है!

मान लें कि आप सीएसएस ग्रेडियेंट्स के लिए मॉडर्निज़र का पता लगाने शामिल हैं। ब्राउज़र के आधार पर, इसका परिणाम <html class="cssgradients"> या <html class="no-cssgradients"> । अब जब आप उन दो राज्यों को जानते हैं, तो आप दोनों मामलों को कवर करने के लिए सीएसएस लिख सकते हैं

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

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

classPrefix

यदि classPrefix के क्लास नामों में से एक आपके पूर्ववर्ती वर्गों में से एक के साथ संघर्ष करता है, तो आपके पास अपनी कॉन्फ़िगरेशन के अंदर classPrefix जोड़ने का विकल्प होता है। hidden डिटेक्ट पर विचार करें, जो एक। .hidden वर्ग जोड़ता है - कुछ कोड बेस पहले से ही चीजों को छिपाते हैं, कुछ भी उपयोग करते हैं। यदि आप उस विशिष्ट पहचान का उपयोग करना चाहते हैं, तो आप निम्न को अपनी कॉन्फ़िगरेशन के रूप में उपयोग कर सकते हैं

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

इसका मतलब यह होगा कि <html class="hidden"> बजाय, आपको <html class="foo-hidden"> मिलेगा।

नो-js

डिफ़ॉल्ट रूप से, Modernizr <html class="no-js"> <html class="js"> को फिर से लिख देगा। यह कुछ तत्वों को छिपाने देता है जिन्हें केवल जावास्क्रिप्ट निष्पादित करने वाले वातावरण में उजागर किया जाना चाहिए। अगर आप इस परिवर्तन को अक्षम करना चाहते हैं, तो आप अपनी कॉन्फ़िगरेशन में enableJSClass को false सेट कर सकते हैं।

enableClasses

यदि आप classPrefix का उपयोग कर रहे हैं, जैसे कि classPrefix , तो आपको अपने html तत्व पर उस उपसर्ग को शामिल करना होगा। अर्थात। supports-no-js बजाए supports-no-js no-js

अंत में, यदि आप नहीं चाहते हैं कि आधुनिकतार अपनी किसी भी कक्षा को जोड़ना चाहें, तो आप enableClasses को false सेट कर सकते हैं। यह .no-js अद्यतन को प्रभावित नहीं करता है , इसलिए यदि आप इसे अद्यतन नहीं करना चाहते हैं तो आपको अपने कॉन्फ़िगरेशन में enableJSClass को false पर सेट करने की आवश्यकता होगी।

जावास्क्रिप्ट के साथ Modernizr का उपयोग करना

Modernizr ऑब्जेक्ट

Modernizr Modernizr ऑब्जेक्ट के माध्यम से इसके सभी फीचर डिटेक्शन के परिणामों का ट्रैक रखता है। इसका मतलब है कि प्रत्येक परीक्षण के लिए, एक संबंधित संपत्ति जोड़ा जाएगा। आप जो करना चाहते हैं उसे समझने के लिए आपको बस अपने कोड में truthiness का परीक्षण करना होगा

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

सहायक तरीके

Modernizr वैकल्पिक रूप से कई अतिरिक्त कार्यों का खुलासा करता है, जिन्हें आप आधुनिकizr API में और अधिक पढ़ सकते हैं

Modernizr एपीआई

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 जैसा ही है, लेकिन कबाब-केस गुणों के बजाय, सभी गुण उनके पूंजीकृत संस्करण हैं

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

Modernizr.hasEvent

Modernizr.hasEvent( eventName, [element] )

Modernizr.hasEvent आपको यह निर्धारित करने देता है कि ब्राउज़र एक आपूर्ति की गई घटना का समर्थन करता है या नहीं। डिफ़ॉल्ट रूप से, यह एक div तत्व पर यह पता लगाता है

hasEvent('blur') // true;

हालांकि, आप किसी ऑब्जेक्ट को div के अलावा किसी अन्य चीज़ पर किसी ईवेंट को पहचानने के लिए Ivent को दूसरे तर्क के रूप में देने में सक्षम हैं।

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

ध्यान दें कि यदि ब्राउज़र मीडिया प्रश्नों का समर्थन नहीं करता है (उदाहरण के लिए पुराना आईई) mq हमेशा झूठी वापसी करेगा।

Modernizr.prefixed

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

Modernizr.prefixed डीओएम स्टाइल ऊंटकेस (सीएसएस शैली केबैब-केस के विपरीत) रूप में एक स्ट्रिंग सीएसएस मान लेता है और उस संपत्ति के (संभावित रूप से प्रीफ़िक्स्ड) संस्करण को वापस देता है जो ब्राउज़र वास्तव में समर्थन करता है। उदाहरण के लिए, पुराने फ़ायरफ़ॉक्स में ...

prefixed('boxSizing')

'फ़ायरफ़ॉक्स' को वापस लेता है, नए फ़ायरफ़ॉक्स में, साथ ही साथ कोई भी अन्य ब्राउज़र जो boxSizing संस्करण का समर्थन करता है, बस boxSizing वापस कर boxSizing । कोई भी ब्राउज़र जो संपत्ति का समर्थन नहीं करता है, यह false वापसी करेगा। डिफ़ॉल्ट रूप से, एक DOM तत्व के विरुद्ध prefixed की जांच की जाती है। यदि आप किसी अन्य ऑब्जेक्ट पर किसी संपत्ति की जांच करना चाहते हैं, तो बस इसे दूसरे तर्क के रूप में पास करें

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.prefixedCSS की तरह है, लेकिन परिणाम हाइफेनेटेड रूप में देता है

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

चूंकि यह केवल सीएसएस शैली गुणों के लिए उपयोगी है, यह केवल HTMLElement के खिलाफ परीक्षण किया जा सकता है। गुणों को डीओएम शैली ऊंटकेस या सीएसएस शैली केबैब-केस दोनों के रूप में पारित किया जा सकता है।

Modernizr.prefixedCSSValue

Modernizr.prefixedCSSValue( prop, value )

Modernizr.prefixedCSSValue प्रीफिक्स्ड सीएसएस गुणों के लिए एक तरीका परीक्षण है (उदाहरण के लिए: -webkit-flex)

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

Modernizr._prefixes

Modernizr._prefixes उपसर्गों की आंतरिक सूची है जिसे हम prefixed और prefixedCSS जैसी चीजों के अंदर परीक्षण करते हैं। यह केवल आपके कोड के भीतर उपयोग किए जाने वाले कबाब-केस विक्रेता उपसर्गों की एक सरणी है। कुछ आम उपयोग मामलों में सीएसएस संपत्ति के सभी संभावित प्रीफिक्स्ड संस्करण उत्पन्न करना शामिल है

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);'

एक सीएसएस मूल्य के सभी संभावित prefixed संस्करण उत्पन्न करना

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 निर्धारित करता है कि किसी दिए गए सीएसएस प्रॉपर्टी को कुछ प्रीफिक्स्ड फॉर्म में ब्राउज़र द्वारा समर्थित किया गया है या नहीं।

testAllProps('boxSizing')  // true

संपत्ति मूल्य मान्य होने पर यह परीक्षण करने के लिए वैकल्पिक रूप से स्ट्रिंग फॉर्म में एक सीएसएस मान दिया जा सकता है

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

देशी पहचान (@supports) उपलब्ध नहीं होने पर मूल्य जांच को छोड़ने के लिए एक बूलियन को तीसरे पैरामीटर के रूप में पारित किया जा सकता है।

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

Modernizr.testProp

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

testAllProps तरह, केवल यह स्ट्रिंग के किसी भी विक्रेता prefixed संस्करण की जांच नहीं करता है। ध्यान दें कि संपत्ति का नाम ऊंटकेस में प्रदान किया जाना चाहिए (उदाहरण के लिए बॉक्स आकार बदलना बॉक्स आकार नहीं)

Modernizr.testProp('pointerEvents')  // true

एक विशिष्ट मान समर्थित है या नहीं, यह जांचने के लिए आप वैकल्पिक वैकल्पिक तर्क के रूप में एक मूल्य भी प्रदान कर सकते हैं

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

Modernizr.testStyles

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

Modernizr.testStyles एक सीएसएस नियम लेता है और इसे वर्तमान पृष्ठ पर (संभावित रूप से एकाधिक) 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] की एक आईडी होती है 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 द्वारा पता चला विशेषताएं

पता लगाना सीएसएस वर्ग / जेएस संपत्ति
परिवेश प्रकाश घटनाक्रम परिवेश प्रकाश

एपीआई के लिए समर्थन का पता लगाता है जो लक्स इकाइयों के मामले में डिवाइस के लाइट डिटेक्टर द्वारा पता लगाए गए परिवेश प्रकाश के स्तर के बारे में जानकारी प्रदान करता है।

आवेदन कैश applicationcache

वेब-आधारित अनुप्रयोगों को ऑफलाइन चलाने में सक्षम करने के लिए डेटा संग्रहीत करने के लिए, एप्लिकेशन कैश के लिए समर्थन का पता लगाता है।

एपीआई की अत्यधिक आलोचना की गई है और इसे हल करने के लिए चर्चा चल रही है।

एचटीएमएल 5 ऑडियो तत्व ऑडियो

ऑडियो तत्व का पता लगाता है

बैटरी एपीआई batteryapi

सिस्टम के बैटरी चार्ज स्तर के बारे में जानकारी तक पहुंचने के लिए, बैटरी एपीआई के लिए समर्थन का पता लगाएं।

ब्लॉब कन्स्ट्रक्टर blobconstructor

अपरिवर्तनीय, कच्चे डेटा की फ़ाइल जैसी वस्तुओं को बनाने के लिए, ब्लॉब कन्स्ट्रक्टर के लिए समर्थन का पता लगाता है।

कैनवास कैनवास

2 डी ड्राइंग के लिए <canvas> तत्व के लिए समर्थन का पता लगाता है।

कैनवास पाठ canvastext

<canvas> तत्वों के लिए टेक्स्ट एपीआई के लिए समर्थन का पता लगाता है।

सामग्री संपादन योग्य contenteditable

तत्वों की contenteditable विशेषता के लिए समर्थन का पता लगाता है, जिससे उनकी डीओएम टेक्स्ट सामग्री सीधे उपयोगकर्ता द्वारा संपादित की जा सकती है।

संदर्भ मेनू संदर्भ की विकल्प - सूची

कस्टम संदर्भ मेनू के लिए समर्थन का पता लगाता है।

कुकीज़ कुकीज़

यह पता लगाता है कि कुकी समर्थन सक्षम है या नहीं।

क्रॉस-ओरिजिनल रिसोर्स शेयरिंग CORS

क्रॉस-ओरिजिनल रिसोर्स शेयरिंग के लिए समर्थन का पता लगाता है: डोमेन पर XMLHttpRequests निष्पादित करने की विधि।

वेब क्रिप्टोग्राफी क्रिप्टोग्राफी

Window.crypto.subtle के तहत उपलब्ध क्रिप्टोग्राफिक कार्यक्षमता के लिए समर्थन का पता लगाता है

कस्टम तत्व एपीआई customelements

जेएस के माध्यम से कस्टम एचटीएमएल तत्व बनाने के लिए कस्टम एलिमेंट्स एपीआई के लिए समर्थन का पता लगाता है

कस्टम प्रोटोकॉल हैंडलर customprotocolhandler

window.registerProtocolHandler() API के लिए समर्थन का पता लगाता है ताकि वेबसाइटों को विशेष प्रोटोकॉल के लिए संभावित हैंडलर के रूप में खुद को पंजीकृत करने की अनुमति मिल सके।

CustomEvent customevent

CustomEvent के लिए समर्थन का पता लगाता है।

तीव्र गति तीव्र गति

डार्ट प्रोग्रामिंग भाषा के लिए मूल समर्थन का पता लगाता है।

आँकड़ों का खाका आँकड़ों का खाका

टाइप किए गए ऐरे स्पेक के हिस्से के रूप में एक ArrayBuffer से डेटा पढ़ने के लिए DataView इंटरफ़ेस के लिए समर्थन का पता लगाता है।

इमोजी इमोजी

इमोजी चरित्र सेट के लिए समर्थन का पता लगाता है।

घटना श्रोता eventlistener

AddEventListener के लिए देशी समर्थन का पता लगाता है

EXIF ओरिएंटेशन exiforientation

जेपीईजी छवियों में EXIF ​​ओरिएंटेशन के लिए समर्थन का पता लगाता है।

आईओएस जेपीईजी में EXIF ​​अभिविन्यास ध्वज को देखता है और तदनुसार छवि को घुमाता है। अधिकांश डेस्कटॉप ब्राउज़र केवल इस डेटा को अनदेखा करते हैं।

फ़्लैश फ़्लैश

फ़्लैश समर्थन के साथ ही फ्लैश-अवरुद्ध प्लगइन्स का पता लगाता है

फोर्स टच घटनाक्रम forcetouch

परीक्षण करें कि ब्राउज़र फोर्स टच घटनाओं का पता लगाने का समर्थन करता है या नहीं। फोर्स टच घटनाएं दिए गए दबाव या संगत ट्रैकपैड से दबाव में परिवर्तन के आधार पर कस्टम व्यवहार और इंटरैक्शन की अनुमति देती हैं।

फोर्स टच इवेंट ओएस एक्स 10.11 और बाद में फोर्स टच ट्रैकपैड से लैस उपकरणों पर उपलब्ध हैं।

फुलस्क्रीन एपीआई पूर्ण स्क्रीन

वर्तमान वेबसाइट को उपयोगकर्ता की पूरी स्क्रीन पर लेने की क्षमता के लिए समर्थन का पता लगाता है

गेमपैड एपीआई गेमपैड

गेमपैड और नियंत्रकों तक पहुंच के लिए गेमपैड एपीआई के लिए समर्थन का पता लगाता है।

जिओलोकेशन एपीआई जियोलोकेशन

उपयोगकर्ताओं के लिए वेब अनुप्रयोगों को अपना स्थान प्रदान करने के लिए जिओलोकेशन एपीआई के लिए समर्थन का पता लगाता है।

हैशचेंज घटना hashchange

hashchange इवेंट के लिए समर्थन का पता लगाता है, जब वर्तमान स्थान खंड बदलता है तो निकाल दिया जाता है।

छिपी स्क्रॉलबार hiddenscroll

ओवरले स्क्रॉलबार का पता लगाता है (जब अतिप्रवाह ब्लॉक पर स्क्रॉलबार दिखाई दे रहे हैं)। यह आमतौर पर मोबाइल और ओएस एक्स पर पाया जाता है।

इतिहास एपीआई इतिहास

ब्राउज़र सत्र इतिहास में हेरफेर करने के लिए इतिहास API के लिए समर्थन का पता लगाता है।

एचटीएमएल आयात htmlimports

HTML आयात के लिए समर्थन का पता लगाता है, एक सुविधा जो वेब घटक में लोड करने के लिए उपयोग की जाती है।

आईई 8 कंपैट मोड ie8compat

पता चलता है कि वर्तमान ब्राउज़र आईई 8 संगतता मोड में है यानी आईई 7 के रूप में कार्य कर रहा है)।

IndexedDB IndexedDB

इंडेक्सड डीबी क्लाइंट-साइड स्टोरेज एपीआई (अंतिम स्पेक) के लिए समर्थन का पता लगाता है।

इंडेक्स डीडी ब्लॉब indexeddbblob

यह पता लगाता है कि ब्राउज़र फ़ाइल / ब्लॉब ऑब्जेक्ट्स को indexedDB में सहेज सकता है या नहीं

इनपुट गुण इनपुट

एचटीएमएल 5 <input> तत्व विशेषताओं के लिए समर्थन का पता लगाता है और परिणामों के साथ बूलियन उपप्रोपर्टी का खुलासा करता है:

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
इनपुट [खोज] खोज घटना खोज

एक input[search] तत्व का उपयोग करते समय वेबकिट ब्राउज़र में लागू एक कस्टम search कार्यक्रम है।

फॉर्म इनपुट प्रकार inputtypes

एचटीएमएल 5 फॉर्म इनपुट प्रकारों के लिए समर्थन का पता लगाता है और परिणाम के साथ बूलियन उपप्रोपर्टी का खुलासा करता है:

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
अंतर्राष्ट्रीयकरण API intl

अंतर्राष्ट्रीयकरण API के लिए समर्थन का पता लगाता है जो लोकेल के आधार पर संख्या और तिथियों और सॉर्टिंग स्ट्रिंग के आसान स्वरूपण की अनुमति देता है

JSON json

जेएसओएन हैंडलिंग कार्यों के लिए देशी समर्थन का पता लगाता है।

फ़ॉन्ट Ligatures संयुक्ताक्षर

OpenType Ligatures के लिए समर्थन का पता लगाता है

रिवर्स आदेशित सूची olreversed

<ol> तत्व पर reversed विशेषता के लिए समर्थन का पता लगाता है।

MathML MathML

वेब पृष्ठों में गणितीय समीकरणों के लिए, MathML के लिए समर्थन का पता लगाता है।

संदेश चैनल MessageChannel

संदेश चैनलों के लिए समर्थन का पता लगाता है, आईफ्रेम, श्रमिक इत्यादि जैसे विभिन्न ब्राउज़िंग संदर्भों के बीच संवाद करने का एक तरीका ..

अधिसूचना अधिसूचना

नोटिफिकेशन एपीआई के लिए समर्थन का पता लगाता है

पेज दृश्यता API पेज की दर्शनीयता

पृष्ठ दृश्यता API के लिए समर्थन का पता लगाता है, जिसका उपयोग अनावश्यक कार्यों को अक्षम करने और अन्यथा उपयोगकर्ता अनुभव में सुधार करने के लिए किया जा सकता है।

नेविगेशन टाइमिंग एपीआई प्रदर्शन

ब्राउजर और कनेक्शन प्रदर्शन को मापने के लिए नेविगेशन टाइमिंग एपीआई के लिए समर्थन का पता लगाता है।

डोम सूचक घटनाक्रम एपीआई pointerevents

डोम पॉइंटर इवेंट एपीआई के लिए समर्थन का पता लगाता है, जो आईई 10 + में लागू इनपुट डिवाइस को इंगित करने के लिए एक एकीकृत इवेंट इंटरफ़ेस प्रदान करता है।

सूचक लॉक एपीआई pointerlock

पॉइंटर लॉक एपीआई का समर्थन करता है जो आपको माउस कर्सर को ब्राउज़र विंडो में लॉक करने की अनुमति देता है।

संदेश भेजें संदेश भेजें

क्रॉस-दस्तावेज़ मैसेजिंग के लिए window.postMessage प्रोटोकॉल के लिए समर्थन का पता लगाता है।

निकटता एपीआई निकटता

एक एपीआई के लिए समर्थन का पता लगाता है जो उपयोगकर्ताओं को डिवाइस के निकटता सेंसर से निकटता से संबंधित जानकारी प्राप्त करने की अनुमति देता है।

QuerySelector queryselector

QuerySelector के लिए समर्थन का पता लगाता है।

कोटा स्टोरेज प्रबंधन API quotamanagement

फाइल सिस्टम एक्सेस के लिए एक विशिष्ट मात्रा में स्थान का अनुरोध करने की क्षमता का पता लगाता है

requestAnimationFrame requestanimationframe

अनुकूलित प्रदर्शन के लिए ब्राउज़र पर एनीमेशन पुनर्निर्मित करने के लिए window.requestAnimationFrame API के लिए समर्थन का पता लगाता है।

सेवावर्कर एपीआई ServiceWorker

सेवावर्कर्स (पूर्व में नेविगेशन नियंत्रक) उन संसाधनों को लगातार कैश करने का एक तरीका हैं जो ऑफ़लाइन बेहतर काम करते हैं।

एसवीजी svg

<embed> या <object> तत्वों में एसवीजी के लिए समर्थन का पता लगाता है।

टेम्पलेट तार templatestrings

टेम्पलेट तार स्ट्रिंग अक्षर हैं जो एम्बेडेड अभिव्यक्तियों को अनुमति देते हैं।

घटनाओं को स्पर्श करें touchevents

इंगित करता है कि ब्राउज़र डब्ल्यू 3 सी टच इवेंट एपीआई का समर्थन करता है या नहीं।

यह टचस्क्रीन डिवाइस को जरूरी नहीं दर्शाता है:

  • पुराने टचस्क्रीन डिवाइस केवल माउस घटनाओं का अनुकरण करते हैं
  • आधुनिक आईई टच डिवाइस इसके बजाय पॉइंटर इवेंट एपीआई को कार्यान्वित करते हैं: इसके लिए समर्थन का पता लगाने के लिए Modernizr.pointerevents का उपयोग करें
  • जब कोई टचस्क्रीन कनेक्ट नहीं होती है तो कुछ ब्राउज़र और ओएस सेटअप टच एपीआई सक्षम कर सकते हैं
  • भविष्य के ब्राउज़र स्पर्श घटनाओं के लिए अन्य घटना मॉडल लागू कर सकते हैं

यह आलेख देखें: आप एक टचस्क्रीन का पता नहीं लगा सकते हैं

माउस और टच / पॉइंटर ईवेंट दोनों को एक साथ बांधने की अनुशंसा की जाती है - यह HTML5 रॉक्स ट्यूटोरियल देखें

फ़ायरफ़ॉक्स 4 मल्टीटाउच समर्थन के लिए यह परीक्षण भी true होगा।

टाइप किए गए सरणी typedarrays

जावास्क्रिप्ट में टाइप किए गए Arrays के माध्यम से मूल बाइनरी डेटा मैनिपुलेशन के लिए समर्थन का पता लगाता है।

DataView समर्थन की जांच नहीं करता है; उस के लिए Modernizr.dataview उपयोग करें।

यूनिकोड रेंज unicoderange
यूनिकोड वर्ण यूनिकोड

पता चलता है कि वर्तमान दस्तावेज़ में यूनिकोड वर्ण समर्थित हैं या नहीं।

आईई उपयोगकर्ता डेटा एपीआई उपयोगकर्ता का आधार - सामग्री

स्थायी डेटा के लिए आईई उपयोगकर्ता डेटा के लिए समर्थन का पता लगाता है, एक स्थानीय एपीआई के समान एपीआई लेकिन आईई 5 के बाद से समर्थित है।

कंपन एपीआई कांपना

एपीआई के लिए समर्थन का पता लगाता है जो स्पर्श प्रतिक्रिया प्रदान करने के लिए होस्टिंग डिवाइस के कंपन तंत्र तक पहुंच प्रदान करता है।

एचटीएमएल 5 वीडियो वीडियो

वीडियो तत्व के लिए समर्थन का पता लगाता है, साथ ही परीक्षण करता है कि यह किस प्रकार की सामग्री का समर्थन करता है।

ogg , h264 और webm प्रारूपों के समर्थन का वर्णन करने के लिए उपप्रोपर्टी प्रदान की जाती है, उदाहरण के लिए:

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

वीएमएल के लिए समर्थन का पता लगाता है।

वेब इरादों WebIntents

सेवा खोज और अंतर-अनुप्रयोग संचार के लिए वेब इराद एपीआई के लिए देशी समर्थन का पता लगाता है।

क्रोम ने v19 में इसके लिए समर्थन जोड़ा, लेकिन इसे "24 में एपीआई और विशिष्ट उपयोगकर्ता अनुभव दोनों में विकास के लिए कई क्षेत्रों" के कारण v24 में फिर से हटा दिया । वर्तमान में कोई अन्य ब्राउज़र इसका समर्थन नहीं करता है, हालांकि एक जावास्क्रिप्ट शिम उपलब्ध है।

वेब एनीमेशन एपीआई एनीमेशन

वेब एनीमेशन एपीआई के लिए समर्थन का पता लगाता है, जेएस में सीएसएस एनिमेशन बनाने का एक तरीका

WebGL WebGL
वेबसाकेट समर्थन WebSockets
XDomainRequest xdomainrequest

IE9 और IE8 में XDomainRequest के लिए समर्थन का पता लगाता है

एक [डाउनलोड] विशेषता adownload

जब <a> पर उपयोग किया जाता है, तो यह विशेषता दर्शाती है कि जिस संसाधन को इंगित करता है उसे ब्राउजर द्वारा इसे नेविगेट करने के बजाए डाउनलोड किया जाना चाहिए।

ऑडियो लूप विशेषता audioloop

यह पता चला है कि एक ऑडियो तत्व स्वचालित रूप से फिर से शुरू हो सकता है, एक बार यह समाप्त हो जाने पर

ऑडियो प्रीलोड audiopreload

<audio> तत्व में खेलना शुरू होने से पहले पृष्ठभूमि में ऑडियो डाउनलोड किया जा सकता है या नहीं

वेब ऑडियो एपीआई WebAudio

पुराने गैर मानक वेबौडियो एपीआई का पता लगाता है, (मानक आधारित ऑडियोकॉन्टेक्स्ट एपीआई के विपरीत)

कम बैटरी स्तर बैटरी कम है

बैटरी कम होने पर सीपीयू गहन सीएसएस / जेएस को हटाने के लिए डेवलपर को सक्षम करें

कैनवास मिश्रण समर्थन canvasblending

यह पता लगाता है कि फ़ोटोशॉप शैली मिश्रण मोड कैनवास में उपलब्ध हैं या नहीं।

canvas.toDataURL प्रकार का समर्थन todataurljpeg, todataurlpng, todataurlwebp
कैनवास घुमावदार समर्थन canvaswinding

यह निर्धारित करता है कि क्या घुमावदार नियम हैं, जो नियंत्रित करते हैं कि कोई पथ घड़ी की दिशा में या विपरीत दिशा में जा सकता है

getRandomValues getrandomvalues

क्रिप्टोग्राफ़िक रूप से सुरक्षित यादृच्छिक संख्या उत्पन्न करने के लिए window.crypto.getRandomValues ​​के लिए समर्थन का पता लगाता है

cssall cssall

all सीएसएस संपत्ति के लिए समर्थन का पता लगाता है, जो सभी सीएसएस गुणों (दिशा और यूनिकोड-बिडी को छोड़कर) को उनके मूल मूल्य पर रीसेट करने के लिए एक शॉर्टेंड है

सीएसएस एनिमेशन cssanimations

यह पता लगाता है कि सीएसएस का उपयोग करके तत्व एनिमेटेड किए जा सकते हैं या नहीं

दिखावट दिखावट

appearance सीएसएस संपत्ति के लिए समर्थन का पता लगाता है, जिसका उपयोग तत्व को मानक उपयोगकर्ता इंटरफ़ेस तत्व की शैली का उत्तराधिकारी बनाने के लिए किया जाता है। इसका उपयोग किसी तत्व की डिफ़ॉल्ट शैलियों को हटाने के लिए भी किया जा सकता है, जैसे इनपुट और बटन।

बैकड्रॉप फ़िल्टर backdropfilter

सीएसएस बैकड्रॉप फ़िल्टर के लिए समर्थन का पता लगाता है, जो आईओएस 7 में पेश किए गए पृष्ठभूमि ब्लर इफेक्ट्स की इजाजत देता है। इसके लिए समर्थन आईओएस 9 में आईओएस सफारी / वेबकिट में जोड़ा गया था।

सीएसएस पृष्ठभूमि मिश्रण मोड backgroundblendmode

फ़ोटोशॉप या इलस्ट्रेटर में पाए गए ब्लेंडिंग मोड का उपयोग करके ब्राउजर को पृष्ठभूमि को समग्र करने की क्षमता का पता लगाता है।

सीएसएस पृष्ठभूमि क्लिप पाठ backgroundcliptext

यह नियंत्रित करने की क्षमता का पता लगाता है कि किसी तत्व की पृष्ठभूमि सीएसएस में इसकी सीमा से परे फैली हुई है या नहीं

पृष्ठभूमि की स्थिति शॉर्टेंड bgpositionshorthand

यह पता लगाता है कि क्या आप एक तत्व की पृष्ठभूमि-स्थिति के कई हिस्सों को एक साथ परिभाषित करने के लिए शॉर्टंड विधि का उपयोग कर सकते हैं।

उदाहरण के लिए background-position: right 10px bottom 10px

पृष्ठभूमि की स्थिति XY bgpositionxy

सीएसएस का उपयोग कर किसी तत्व की पृष्ठभूमि स्थिति को नियंत्रित करने की क्षमता का पता लगाता है

पृष्ठभूमि दोहराएँ bgrepeatspace, bgrepeatround

पृष्ठभूमि-दोहराव के गुणों के रूप में गोल और स्थान का उपयोग करने की क्षमता का पता लगाता है

पृष्ठभूमि का आकार backgroundsize
पृष्ठभूमि आकार कवर bgsizecover
सीमा छवि borderimage
सीमा त्रिज्या borderradius
डब्बे की छाया डब्बे की छाया
बॉक्स आकार boxsizing
सीएसएस कैल्क csscalc

लंबाई इकाइयों के लिए गणना मूल्यों की अनुमति देने का तरीका। उदाहरण के लिए:

//lem {
  width: calc(100% - 3em);
}
सीएसएस: छद्म चयनकर्ता की जांच की जाँच
सीएसएस फ़ॉन्ट सी इकाइयों csschunit
सीएसएस कॉलम csscolumns
सीएसएस ग्रिड (पुराना और नया) cssgrid, cssgridlegacy
सीएसएस क्यूबिक बेजियर रेंज cubicbezierrange
सीएसएस प्रदर्शन रन-इन प्रदर्शन-runin
सीएसएस प्रदर्शन तालिका displaytable

display: table और table-cell परीक्षण। (दोनों को एक नाम table-cell तहत परीक्षण किया जाता है)

सीएसएस पाठ-ओवरफ्लो इलिप्सिस अंडाकार
CSS.escape () cssescape

CSS.escape() समर्थन के लिए टेस्ट।

सीएसएस फ़ॉन्ट पूर्व इकाइयों cssexunit
सीएसएस फ़िल्टर cssfilters
flexbox flexbox

फ्लेक्सिबल बॉक्स लेआउट मॉडल, उर्फ ​​फ्लेक्सबॉक्स के लिए समर्थन का पता लगाता है, जो लेआउट ऑर्डर के आसान हेरफेर और कंटेनर के आकार में इजाजत देता है।

फ्लेक्सबॉक्स (विरासत) flexboxlegacy
फ्लेक्सबॉक्स (ट्वीनर) flexboxtweener
फ्लेक्स लाइन लपेटना flexwrap

फ्लेक्सबॉक्स के flex-wrap सीएसएस प्रॉपर्टी के लिए समर्थन का पता लगाता है, जो सभी फ्लेक्सबॉक्स कार्यान्वयन (विशेष रूप से फ़ायरफ़ॉक्स) में मौजूद नहीं है।

यह 'ट्वीनर' वाक्यविन्यास (आईई 10 द्वारा कार्यान्वित) और 'आधुनिक' वाक्यविन्यास (दूसरों द्वारा लागू) दोनों में दिखाया गया है। यह पहचान इन कार्यान्वयनों में से किसी एक के लिए true हो जाएगी, जब तक 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 लक्ष्य

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 प्लेसहोल्डर

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.

原文