एचटीएमएल 5 - मॉडर्निज़र

मॉडर्निज़र एक छोटा सा है JavaScript Library अगली पीढ़ी की वेब प्रौद्योगिकियों के लिए देशी कार्यान्वयन की उपलब्धता का पता लगाता है

कई नई सुविधाएँ हैं जो HTML5 और CSS3 के माध्यम से पेश की जा रही हैं, लेकिन एक ही समय में कई ब्राउज़र इन समाचार सुविधाओं का समर्थन नहीं करते हैं।

Modernizr किसी भी नई सुविधा का पता लगाने का एक आसान तरीका प्रदान करता है ताकि आप संबंधित कार्रवाई कर सकें। उदाहरण के लिए, यदि कोई ब्राउज़र वीडियो सुविधा का समर्थन नहीं करता है, तो आप एक साधारण पृष्ठ प्रदर्शित करना चाहेंगे।

आप फ़ीचर उपलब्धता के आधार पर CSS नियम बना सकते हैं और ये नियम वेबपेज पर स्वचालित रूप से लागू होंगे यदि ब्राउज़र किसी नई सुविधा का समर्थन नहीं करता है।

आप इस उपयोगिता का नवीनतम संस्करण Modernizr डाउनलोड से डाउनलोड कर सकते हैं ।

वाक्य - विन्यास

मॉर्डनिज़्र का उपयोग शुरू करने से पहले, आपको इसकी जावास्क्रिप्ट लाइब्रेरी को अपने एचटीएमएल पेज हेडर में निम्नानुसार शामिल करना होगा -

<script src="modernizr.min.js" type="text/javascript"></script>

जैसा कि ऊपर उल्लेख किया गया है, आप फीचर उपलब्धता के आधार पर सीएसएस नियम बना सकते हैं और ये नियम वेबपेज पर स्वचालित रूप से लागू होंगे यदि ब्राउज़र एक नए करतब का समर्थन नहीं करता है।

समर्थित और गैर-समर्थित सुविधाओं को संभालने के लिए सरल सिंटैक्स निम्नलिखित है -

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't show Audio options */
}
.audio #music button {
   /* Style the Play and Pause buttons nicely */
}

<!-- In your HTML: -->
<div id="music">
   
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

यहां यह उल्लेखनीय है कि आपको उस प्रत्येक सुविधा / संपत्ति के लिए "नहीं-" को उपसर्ग करने की आवश्यकता है जो आप उस ब्राउज़र के लिए संभालना चाहते हैं जो उनका समर्थन नहीं करता है।

जावास्क्रिप्ट के माध्यम से एक विशेष सुविधा का पता लगाने के लिए वाक्य रचना निम्नलिखित है -

if (Modernizr.audio) {
   /* properties for browsers that
   support audio */
}

else{
   /* properties for browsers that
   does not support audio */
}

मॉडर्निज़र द्वारा पता की गई विशेषताएं

निम्नलिखित उन विशेषताओं की सूची है, जिन्हें माडर्निज़्र द्वारा पता लगाया जा सकता है -

फ़ीचर	सीएसएस संपत्ति	जावास्क्रिप्ट की जाँच करें
@फॉन्ट फ़ेस	।फॉन्ट फ़ेस	Modernizr.fontface
कैनवास	.canvas	Modernizr.canvas
कैनवास पाठ	.canvastext	Modernizr.canvastext
HTML5 ऑडियो	.AUDIO	Modernizr.audio
HTML5 ऑडियो प्रारूप	ना	Modernizr.audio [प्रारूप]
एचटीएमएल 5 वीडियो	।वीडियो	Modernizr.video
एचटीएमएल 5 वीडियो प्रारूप	ना	Modernizr.video [प्रारूप]
RGBA ()	.rgba	Modernizr.rgba
HSLA ()	.hsla	Modernizr.hsla
सीमा की छवि	.borderimage	Modernizr.borderimage
बॉर्डर-त्रिज्या	.borderradius	Modernizr.borderradius
डब्बे की छाया	।डब्बे की छाया	Modernizr.boxshadow
एकाधिक पृष्ठभूमि	.multiplebgs	Modernizr.multiplebgs
अस्पष्टता	.opacity	Modernizr.opacity
सीएसएस एनिमेशन	.cssanimations	Modernizr.cssanimations
सीएसएस कॉलम	.csscolumns	Modernizr.csscolumns
सीएसएस स्नातक	.cssgradients	Modernizr.cssgradients
सीएसएस प्रतिबिंब	.cssreflections	Modernizr.cssreflections
सीएसएस 2 डी रूपांतरण	.csstransforms	Modernizr.csstransforms
सीएसएस 3 डी रूपांतरण	.csstransforms3d	Modernizr.csstransforms3d
सीएसएस संक्रमण	.csstransitions	Modernizr.csstransitions
जियोलोकेशन एपीआई	.geolocation	Modernizr.geolocation
इनपुट प्रकार	ना	Modernizr.inputtypes [प्रकार]
इनपुट विशेषताएँ	ना	Modernizr.input [विशेषता]
स्थानीय भंडार	।स्थानीय भंडार	Modernizr.localstorage
sessionStorage	.sessionstorage	Modernizr.sessionstorage
वेब वर्कर्स	.webworkers	Modernizr.webworkers
applicationCache	.applicationcache	Modernizr.applicationcache
एसवीजी	.svg	Modernizr.svg
एसवीजी क्लिप पथ	.svgclippaths	Modernizr.svgclippaths
स्मिल	.smil	Modernizr.smil
वेब एसक्यूएल डाटाबेस	.websqldatabase	Modernizr.websqldatabase
IndexedDB	.indexeddb	Modernizr.indexeddb
वेब सॉकेट्स	.websockets	Modernizr.websockets
हैशचेंज इवेंट	.hashchange	Modernizr.hashchange
इतिहास प्रबंधन	.historymanagement	Modernizr.historymanagement
खींचें और छोड़ें	।खींचें और छोड़ें	Modernizr.draganddrop
क्रॉस-विंडो मैसेजिंग	.crosswindowmessaging	Modernizr.crosswindowmessaging
addTest () प्लगइन एपीआई	ना	Modernizr.addTest (str, fn)