আইআই সনাক্ত করার জন্য মডার্নজার ব্যবহার করার সঠিক উপায়?

Question 1

কোন সামগ্রীটি প্রদর্শন করা উচিত বা না প্রদর্শিত হবে তা নির্ধারণ করতে আমি ব্রাউজারের কয়েকটি বৈশিষ্ট্য সনাক্ত করতে মডার্নজার জেএস লাইব্রেরিটি ব্যবহার করতে চেয়েছিলাম।

আমার Pano2VR নামে একটি অ্যাপ রয়েছে যা HTML5 এবং SWF উভয়ই আউটপুট করে। আইওএস ডিভাইস ব্যবহারকারীদের জন্য আমার এইচটিএমএল 5 দরকার।

তবে, IE এই "HTML5" আউটপুটটি মোটেও রেন্ডার করে না। দেখে মনে হচ্ছে তাদের আউটপুটটি সিএসএস 3 ডি ট্রান্সফর্ম এবং ওয়েবজিএল ব্যবহার করে, এক বা একাধিক স্পষ্টতই আইই 9 তে অসমর্থিত।

সুতরাং, সেই ব্যবহারকারীদের জন্য আমার ফ্ল্যাশ সংস্করণ প্রদর্শন করা দরকার। আমি একটি আইএফআরএম ব্যবহার করার পরিকল্পনা করছিলাম এবং হয় হয় মডারিনিজার স্ক্রিপ্ট বা ডকুমেন্টের মাধ্যমে এসআরসি পাস করব browser ব্রাউজারের উপর নির্ভর করে সঠিক আইএফআরএম কোডটি লিখুন।

এর সবগুলিতে বাড়ে কীভাবে আমি কীভাবে আইডি না আইআই সনাক্ত করতে আধুনিকীকরণ ব্যবহার করব? অথবা সিএসএস 3 ডি রূপান্তরগুলি সনাক্ত করুন?

অথবা এটি করার অন্য কোনও উপায় আছে?

Question 2

আমি সম্মত হই যে আমাদের ক্ষমতার জন্য পরীক্ষা করা উচিত, তবে "আধুনিক ব্রাউজারগুলি" তবে 'পুরানো ব্রাউজারগুলি' নয়, তবে কী ক্ষমতাগুলি সমর্থন করে? "এর একটি সহজ উত্তর পাওয়া শক্ত?"

তাই আমি ব্রাউজারগুলির একটি গুচ্ছ গুলি চালিয়েছি এবং সরাসরি মডার্নাইজারকে পরীক্ষা করেছি। আমি অবশ্যই আমার প্রয়োজনীয় কয়েকটি ক্ষমতা যুক্ত করেছি, এবং তারপরে আমি "ইনপুট টাইপস কোডার" যুক্ত করেছি কারণ এটি মনে করে যে সমস্ত প্রধান ব্রাউজারগুলি আমার যত্ন করে: এটি ক্রোম, ফায়ারফক্স, অপেরা, এজ ... এবং আইই 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 পদ্ধতি যা "ইনপুট টাইপস রঙ" এর জন্য প্রয়োজন।

/**
 * 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

মডার্নিজার ব্রাউজারগুলি সনাক্ত করে না, এটি কোন বৈশিষ্ট্য এবং সক্ষমতা উপস্থিত রয়েছে তা সনাক্ত করে এবং এটি যা করার চেষ্টা করছে তার সম্পূর্ণ বিবরণ।

আপনি এটির মতো সাধারণ সনাক্তকরণ স্ক্রিপ্টটিতে হুক করার চেষ্টা করতে পারেন এবং তারপরে এটি আপনার পছন্দটি করতে ব্যবহার করতে পারেন। আমি প্রয়োজন হিসাবে সংস্করণ সনাক্তকরণও অন্তর্ভুক্ত করেছি। আপনি যদি কেবল আইই এর যে কোনও সংস্করণ পরীক্ষা করতে চান তবে আপনি কেবল "এমএসআইই" এর মানযুক্ত নেভিগেটর.ইউসার এজেন্টের সন্ধান করতে পারেন।

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

আপনি এসভিজি এসএমআইএল অ্যানিমেশন সহায়তার জন্য যাচাই করে কেবল আইই বা নয় তা সনাক্ত করতে মডার্নজার ব্যবহার করতে পারেন ।

আপনি যদি আপনার মডার্নিজার সেটআপে এসএমআইএল বৈশিষ্ট্য সনাক্তকরণকে অন্তর্ভুক্ত করেন তবে আপনি একটি সাধারণ সিএসএস পদ্ধতির ব্যবহার করতে পারেন এবং আধুনিকীকরণটি এইচটিএমএল উপাদানটির জন্য প্রযোজ্য .না-স্মাইল শ্রেণিকে লক্ষ্য করতে পারেন :

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 */
}

মনে রাখবেন, আইই / এজ কোনও দিন এসএমআইএলকে সমর্থন করতে পারে , তবে বর্তমানে এটি করার কোনও পরিকল্পনা নেই।

রেফারেন্সের জন্য, এখানে caniuse.com এ এসএমআইএল সামঞ্জস্যতা চার্টের একটি লিঙ্ক রয়েছে ।

Question 5

সিএসএস 3 ডি রূপান্তরগুলি সনাক্ত করা

মডার্নিজার হ্যাঁ, সিএসএস 3 ডি রূপান্তরগুলি সনাক্ত করতে পারে । Modernizr.csstransforms3dব্রাউজার তাদের সমর্থন করে কিনা এর সত্যতা আপনাকে জানাবে।

উপরের লিঙ্কটি আপনাকে আধুনিকীকরণ বিল্ডে কোন পরীক্ষাগুলি অন্তর্ভুক্ত করতে হবে তা নির্বাচন করতে দেয় এবং আপনি যে বিকল্পটি সন্ধান করছেন তা সেখানে উপলব্ধ।

বিশেষত IE সনাক্ত করা

বিকল্প হিসাবে, ব্যবহারকারী 356990 হিসাবে উত্তর হিসাবে, আপনি একা আইই এবং আইই অনুসন্ধান করছেন আপনি শর্তযুক্ত মন্তব্য ব্যবহার করতে পারেন। গ্লোবাল ভেরিয়েবল তৈরি করার পরিবর্তে, আপনি <html>কোনও শ্রেণি বরাদ্দ করতে HTML5 বয়লারপ্লেটের শর্তসাপেক্ষ মন্তব্যগুলির কৌশল ব্যবহার করতে পারেন :

<!--[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')। আপনি যদি কোন আইই সংস্করণটি যাচাই করে দেখতে চান তাই আপনি শর্তাধীন 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;
}());

এনবি আইই শর্তসাপেক্ষ মন্তব্যগুলি কেবল আইই 9 সহ অন্তর্ভুক্ত supported আইই 10 থেকে মাইক্রোসফ্ট ব্রাউজার সনাক্তকরণের চেয়ে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করে উত্সাহ দেয়।

আপনি যে কোনও পদ্ধতি চয়ন করুন, আপনি তারপরে পরীক্ষা করে দেখবেন

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

||আক্ষরিকভাবে অবশ্যই এটি গ্রহণ করবেন না ।

Question 6

আপনি যদি এইচটিএমএল 5 বয়লারপ্লেটটি ব্যবহার করতেন তার জেএস সংস্করণ (বৈশিষ্ট্য সনাক্তকরণ এবং ইউএ স্নিফিংয়ের সংমিশ্রণ ব্যবহার করে) সন্ধান করছেন:

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+ টার্গেট করার জন্য নিম্নলিখিত সমাধানটি ব্যবহার করে শেষ করেছি। আইই 10 এবং 11 হ'ল একমাত্র ব্রাউজার যা -এস-উচ্চ-বিপরীতে মিডিয়া ক্যোয়ারিকে সমর্থন করে, এটি কোনও জেএস ছাড়াই একটি ভাল বিকল্প:

@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 আইইয়ের জন্য স্বতন্ত্র তাই আইই সংস্করণ 11 সনাক্ত করতে ব্যবহার করা যেতে পারে।

এরপরে কোডটি এইচটিএমএল ট্যাগটিতে 'ডেটা-ইউজারেজেন্ট' বৈশিষ্ট্য যুক্ত করে ইউজার এজেন্ট স্ট্রিং যুক্ত করে, তাই আইই 11 বিশেষভাবে লক্ষ্যবস্তু হতে পারে ...

Question 9

আমার কাছে IE বনাম সর্বাধিক সবকিছু সনাক্ত করা দরকার এবং আমি ইউএ স্ট্রিংয়ের উপর নির্ভর করতে চাই না। আমি দেখতে পেয়েছি যে es6numberমডার্নিজারের সাহায্যে আমি যা চেয়েছিলাম ঠিক তেমনটি করে । আমি এই পরিবর্তনটি নিয়ে তেমন উদ্বেগ প্রকাশ করি না কারণ আমি আশা করি না যে কখনই ইএস 6 নম্বর সমর্থন করবে। তাই এখন আমি IE বনাম এজ / ক্রোম / ফায়ারফক্স / অপেরা / সাফারি কোনও সংস্করণের মধ্যে পার্থক্য জানি।

আরও বিশদ এখানে: http://caniuse.com/#feat=es6- সংখ্যা

নোট করুন যে আমি অপেরা মিনি মিথ্যা নেতিবাচক সম্পর্কে সত্যই উদ্বিগ্ন নই। আপনি হতে পারে।

Question 10

আপনি < !-- [if IE] > হ্যাকটি একটি গ্লোবাল জেএস ভেরিয়েবল সেট করতে ব্যবহার করতে পারেন যা আপনার সাধারণ জেএস কোডে পরীক্ষিত হয়। কিছুটা কুরুচিপূর্ণ তবে আমার পক্ষে ভাল কাজ করেছে।