IE का पता लगाने के लिए मॉर्डनिज़्र का उपयोग करने का सही तरीका?

Question 1

मैं कुछ ब्राउज़र गुणों का पता लगाने के लिए माडर्निज़्रर जेएस लाइब्रेरी का उपयोग करना चाहता था ताकि यह निर्धारित किया जा सके कि क्या दिखाना या दिखाना नहीं है।

मेरे पास Pano2VR नाम का एक ऐप है जो HTML5 और SWF दोनों को आउटपुट करता है। मुझे iOS डिवाइस उपयोगकर्ताओं के लिए HTML5 की आवश्यकता है।

हालांकि, IE इस "एचटीएमएल 5" आउटपुट को बिल्कुल भी प्रस्तुत नहीं करता है। ऐसा लगता है कि उनका आउटपुट CSS3 3 डी ट्रांसफ़ॉर्म और WebGL का उपयोग करता है, IE9 में एक या अधिक स्पष्ट रूप से असमर्थित।

तो, उन उपयोगकर्ताओं के लिए मुझे फ़्लैश संस्करण प्रदर्शित करने की आवश्यकता है। मैं एक IFRAME का उपयोग करने की योजना बना रहा था और या तो एक Modernizr स्क्रिप्ट या डॉक्यूमेंट के माध्यम से SRC पास कर सकता हूं। ब्राउज़र के आधार पर सही IFRAME कोड को लिखिए।

जो सभी की ओर जाता है कि मैं मॉडर्निज़्र का उपयोग केवल IE या आईई का पता लगाने के लिए कैसे करूं? या सीएसएस 3 डी परिवर्तनों के लिए पता लगाएं?

या ऐसा करने का एक और तरीका है?

Question 2

मैं मानता हूं कि हमें क्षमताओं के लिए परीक्षण करना चाहिए, लेकिन "आधुनिक ब्राउज़रों 'द्वारा नहीं बल्कि' पुराने ब्राउज़रों 'द्वारा समर्थित क्षमताओं का एक सरल उत्तर ढूंढना कठिन है?"

इसलिए मैंने ब्राउज़रों का एक समूह तैयार किया और सीधे मॉर्डनाइज़र का निरीक्षण किया। मैंने कुछ क्षमताओं को जोड़ा, जिनकी मुझे निश्चित रूप से आवश्यकता है, और फिर मैंने "inputtypes.color" जोड़ा, क्योंकि मुझे लगता है कि सभी प्रमुख ब्राउज़रों को कवर करने के लिए लगता है: क्रोम, फ़ायरफ़ॉक्स, ओपेरा, एज ... और आईई 11 नहीं। अब मैं धीरे से सुझाव दे सकता हूं कि उपयोगकर्ता क्रोम / ओपेरा / फ़ायरफ़ॉक्स / एज के साथ बेहतर होगा।

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

/**
 * Check browser capabilities.
 */
public CheckBrowser(): boolean
{
    let tests = ["csstransforms3d", "canvas", "flexbox", "webgl", "inputtypes.color"];

    // Lets see what each browser can do and compare...
    //console.log("Modernizr", Modernizr);

    for (let i = 0; i < tests.length; i++)
    {
        // if you don't test for nested properties then you can just use
        // "if (!Modernizr[tests[i]])" instead
        if (!ObjectUtils.GetProperty(Modernizr, tests[i]))
        {
            console.error("Browser Capability missing: " + tests[i]);
            return false;
        }
    }

    return true;
}

और यहाँ है कि GetProperty विधि जो "inputtypes.color" के लिए आवश्यक है।

/**
 * Get a property value from the target object specified by name.
 * 
 * The property name may be a nested property, e.g. "Contact.Address.Code".
 * 
 * Returns undefined if a property is undefined (an existing property could be null).
 * If the property exists and has the value undefined then good luck with that.
 */
public static GetProperty(target: any, propertyName: string): any
{
    if (!(target && propertyName))
    {
        return undefined;
    }

    var o = target;

    propertyName = propertyName.replace(/\[(\w+)\]/g, ".$1");
    propertyName = propertyName.replace(/^\./, "");

    var a = propertyName.split(".");

    while (a.length)
    {
        var n = a.shift();

        if (n in o)
        {
            o = o[n];

            if (o == null)
            {
                return undefined;
            }
        }
        else
        {
            return undefined;
        }
    }

    return o;
}

Question 3

Modernizr ब्राउज़रों का पता नहीं लगाता है, यह पता लगाता है कि कौन सी सुविधा और क्षमता मौजूद है और यह क्या करने की कोशिश कर रहा है, इसका पूरा जिस्ट है।

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

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

स्निपेट का विस्तार करें

आप इसके लिए बस जाँच कर सकते हैं:

BrowserDetect.browser == 'Explorer';
BrowserDetect.version <= 9;

Question 4

आप SVG SMIL एनीमेशन सपोर्ट की जाँच करके, केवल IE या नहीं IE का पता लगाने के लिए Modernizr का उपयोग कर सकते हैं ।

यदि आपने अपने Modernizr सेटअप में SMIL सुविधा का पता लगाने को शामिल किया है , तो आप एक सरल CSS दृष्टिकोण का उपयोग कर सकते हैं, और .no-smil वर्ग को लक्षित कर सकते हैं, जो Modernizr html तत्व पर लागू होता है :

html.no-smil {
  /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}

वैकल्पिक रूप से, आप एक सरल जावास्क्रिप्ट दृष्टिकोण के साथ माडर्निज़्र का उपयोग कर सकते हैं, जैसे:

if ( Modernizr.smil ) {
  /* set HTML5 content */
} else {
  /* set IE/Edge/Flash content */
}

ध्यान में रखते हुए, IE / Edge किसी दिन SMIL का समर्थन कर सकते हैं, लेकिन वर्तमान में ऐसा करने की कोई योजना नहीं है।

संदर्भ के लिए, यहाँ caniuse.com पर SMIL संगतता चार्ट का लिंक दिया गया है ।

Question 5

सीएसएस 3 डी परिवर्तनों का पता लगाना

Modernizr CSS 3D ट्रांसफ़ॉर्म का पता लगा सकता है , हाँ। Modernizr.csstransforms3dयदि ब्राउज़र उनका समर्थन करता है, तो सच्चाई आपको बताएगी।

उपरोक्त लिंक से आप चुन सकते हैं कि मॉडर्निज़्र बिल्ड में कौन से परीक्षण शामिल हैं, और जो विकल्प आप खोज रहे हैं वह वहाँ उपलब्ध है।

विशेष रूप से IE का पता लगाना

वैकल्पिक रूप से , जैसा कि user356990 ने उत्तर दिया है, आप सशर्त टिप्पणियों का उपयोग कर सकते हैं यदि आप IE और IE अकेले खोज रहे हैं। एक वैश्विक चर बनाने के बजाय, आप HTML5 बॉयलरप्लेट की <html>सशर्त टिप्पणियों की चाल का उपयोग करके एक वर्ग निर्दिष्ट कर सकते हैं :

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

यदि आपके पास पहले से ही jQuery है, तो आप अभी देख सकते हैं $('html').hasClass('lt-ie9')। यदि आपको यह जांचने की आवश्यकता है कि आप किस IE संस्करण में हैं, तो आप सशर्त रूप से या तो jQuery 1.x या 2.x लोड कर सकते हैं, आप कुछ इस तरह कर सकते हैं:

myChecks.ltIE9 = (function(){
    var htmlElemClasses = document.querySelector('html').className.split(' ');
    if (!htmlElemClasses){return false;}
    for (var i = 0; i < htmlElemClasses.length; i += 1 ){
      var klass = htmlElemClasses[i];
      if (klass === 'lt-ie9'){
        return true;
      }
    }
    return false;
}());

NB IE सशर्त टिप्पणियाँ केवल IE9 समावेशी तक समर्थित हैं। IE10 के बाद से, Microsoft ब्राउज़र का पता लगाने के बजाय फीचर डिटेक्शन का उपयोग करने के लिए प्रोत्साहित करता है।

आप जो भी विधि चुनते हैं, आप उसके साथ परीक्षण करेंगे

if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
    // iframe or flash fallback
}

||सचमुच कि मत लो ।

Question 6

यदि आप एक जेएस संस्करण (फीचर डिटेक्शन और यूए स्निफिंग के संयोजन का उपयोग करके) के लिए देख रहे हैं, तो html5 बॉयलरप्लेट क्या करता है:

var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}

Question 7

खैर, इस विषय पर अधिक शोध करने के बाद मैंने IE 10+ को लक्षित करने के लिए निम्नलिखित समाधान का उपयोग किया। जैसा कि IE10 और 11 एकमात्र ब्राउजर हैं जो स्वयं-हाई-कंट्रास्ट मीडिया क्वेरी का समर्थन करते हैं, जो कि किसी भी JS के बिना एक अच्छा विकल्प है:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

अच्छी तरह से काम।

Question 8

आईई 11 को लक्षित करने के लिए सीएसएस ट्रिक्स का एक अच्छा समाधान है:

http://css-tricks.com/ie-10-specific-styles/

.NET और ट्राइडेंट / 7.0 IE के लिए अद्वितीय हैं इसलिए IE संस्करण 11 का पता लगाने के लिए इस्तेमाल किया जा सकता है।

कोड तब HTML एजेंट को विशेषता 'डेटा-उपयोगकर्ता-योग्य' के साथ उपयोगकर्ता टैग में जोड़ता है, इसलिए IE 11 को विशेष रूप से लक्षित किया जा सकता है ...

Question 9

मुझे आईई बनाम अधिकांश सब कुछ का पता लगाने की आवश्यकता थी और मैं यूए स्ट्रिंग पर निर्भर नहीं होना चाहता था। मैंने पाया कि उपयोग करनाes6number माडर्निज़्र के साथ करना बिल्कुल वैसा ही था जैसा मैं चाहता था। मुझे इस बदलाव से कोई सरोकार नहीं है क्योंकि मुझे उम्मीद नहीं है कि IE कभी भी ES6 नंबर को सपोर्ट करेगा। तो अब मुझे आईई बनाम एज / क्रोम / फ़ायरफ़ॉक्स / ओपेरा / सफारी के किसी भी संस्करण के बीच अंतर पता है।

अधिक जानकारी यहाँ: http://caniuse.com/#feat=es6-number

ध्यान दें कि मैं वास्तव में ओपेरा मिनी झूठी नकारात्मक के बारे में चिंतित नहीं हूं। हो सकता है आप।

Question 10

आप < !-- [if IE] > वैश्विक जेएस चर सेट करने के लिए हैक का उपयोग कर सकते हैं जो तब आपके सामान्य जेएस कोड में परीक्षण किया जाता है। थोड़ा बदसूरत लेकिन मेरे लिए अच्छा काम किया है।