সিএসএস সক্ষমতা / বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করে IE11 সনাক্ত করা

Question 1

IE10 + কোনও ব্রাউজার সনাক্ত করতে ব্রাউজার সনাক্তকরণ ট্যাগগুলিকে আর সমর্থন করে না।

IE10 সনাক্ত করার জন্য আমি জাভাস্ক্রিপ্ট ব্যবহার করছি এবং নির্দিষ্ট msউপসর্গযুক্ত শৈলীর সনাক্তকরণের জন্য একটি ক্ষমতা-পরীক্ষার কৌশলটি যেমন msTouchActionএবং হিসাবে সংজ্ঞায়িত করা হয়েছে msWrapFlow।

আমি আইই ১১-তেও একই কাজ করতে চাই, তবে আমি ধরে নিচ্ছি যে আইই ১১-তেও সমস্ত আই 1010 স্টাইল সমর্থন করা হবে। আইআই 11 কেবলমাত্র শৈলী বা দক্ষতাগুলি সনাক্ত করতে যে আমি দুজনকে আলাদা করতে ব্যবহার করতে পারি তা কি কেউ আমাকে সাহায্য করতে পারে?

অতিরিক্ত তথ্য

আমি ব্যবহারকারীর এজেন্টের ধরণ সনাক্তকরণটি ব্যবহার করতে চাই না কারণ এটি এতটাই স্পষ্ট, এবং পরিবর্তিত হতে পারে, পাশাপাশি আমি মনে করি আমি পড়েছি যে আইই ১১ ইচ্ছাকৃতভাবে এটি ইন্টারনেট এক্সপ্লোরারকে গোপন করার চেষ্টা করছে।
কীভাবে IE10 সক্ষমতা পরীক্ষার কাজ করে তার উদাহরণ হিসাবে আমি এই পরীক্ষার ভিত্তি হিসাবে এই জেএসফিডেল (আমার নয়) ব্যবহার করেছি used
এছাড়াও আমি "এটি একটি খারাপ ধারণা ..." এর প্রচুর উত্তর আশা করছি। এর জন্য আমার প্রয়োজনগুলির একটি হ'ল আইই 10 দাবি করে যে এটি কিছু সমর্থন করে তবে এটি খুব খারাপভাবে প্রয়োগ করা হয়েছে এবং আমি আইই 10 এবং আই 1111 + এর মধ্যে পার্থক্য করতে সক্ষম হতে চাই যাতে ভবিষ্যতে আমি একটি ক্ষমতা-ভিত্তিক সনাক্তকরণ পদ্ধতিটি নিয়ে এগিয়ে যেতে পারি।
এই পরীক্ষাটি মডার্নিজার পরীক্ষার সাথে মিলিত হয়েছে যা কিছু চটকদার আচরণের জন্য কিছু কার্যকারিতা "ফ্যালব্যাক" তৈরি করে। আমরা সমালোচনামূলক কার্যকারিতা নিয়ে কথা বলছি না।

এছাড়াও আমি ইতিমধ্যে মডার্নিজার ব্যবহার করছি তবে এটি এখানে সহায়তা করে না। আমার পরিষ্কারভাবে জিজ্ঞাসা করা প্রশ্নের সমাধানের জন্য আমার সাহায্য দরকার please

Question 2

বিকশিত থ্রেডের আলোকে, আমি নীচে আপডেট করেছি:

আইই 6

* html .ie6 {property:value;}

বা

.ie6 { _property:value;}

আইই 7

*+html .ie7 {property:value;}

বা

*:first-child+html .ie7 {property:value;}

আইই 6 এবং 7

@media screen\9 {
    .ie67 {property:value;}
}

বা

.ie67 { *property:value;}

বা

.ie67 { #property:value;}

আইই 6, 7 এবং 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

আইই 8

html>/**/body .ie8 {property:value;}

বা

@media \0screen {
    .ie8 {property:value;}
}

আইই 8 স্ট্যান্ডার্ড মোড কেবল

.ie8 { property /*\**/: value\9 }

IE 8,9 এবং 10

@media screen\0 {
    .ie8910 {property:value;}
}

শুধুমাত্র 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

আইই 9 এবং উপরে

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

আইই 9 এবং 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

কেবলমাত্র 10

_:-ms-lang(x), .ie10 { property:value\9; }

আইই 10 এবং উপরে

_:-ms-lang(x), .ie10up { property:value; }

বা

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

এজ সমর্থন করে না-ms-high-contrast যে এমএস এজ টার্গেট করা হবে না এর অর্থ ব্যবহার ।-ms-high-contrast

আইই 11

_:-ms-fullscreen, :root .ie11up { property:value; }

জাভাস্ক্রিপ্ট বিকল্প

মডার্নজার

মডার্নিজার বৈশিষ্ট্যগুলি সনাক্ত করতে পৃষ্ঠা লোডে দ্রুত চলে; এটি ফলাফলের সাথে একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করে এবং এইচটিএমএল উপাদানগুলিতে ক্লাস যুক্ত করে

ব্যবহারকারী এজেন্ট নির্বাচন

জাভাস্ক্রিপ্ট:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

নীচে htmlউপাদানকে যুক্ত করে (উদাঃ) :

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

খুব লক্ষ্যবস্তু সিএসএস নির্বাচকদের অনুমতি দেওয়া, যেমন:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

পাদটীকা

যদি সম্ভব হয় তবে হ্যাক ছাড়াই যেকোন সমস্যা (গুলি) চিহ্নিত করুন এবং ঠিক করুন। প্রগতিশীল বর্ধন এবং প্রশংসনীয় অবক্ষয়কে সমর্থন করুন । যাইহোক, এটি একটি 'আদর্শ বিশ্বের' পরিস্থিতিটি সর্বদা প্রাপ্তযোগ্য নয়, যেমন- উপরের কিছু ভাল বিকল্প সরবরাহ করতে সহায়তা করা উচিত।

অ্যাট্রিবিউশন / এসেনশিয়াল রিডিং

Question 3

আইই 10 এবং আইই 11 কেবলমাত্র লক্ষ্য নয় (এবং এজ নয়):

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* add your IE10-IE11 css here */   
}

Question 4

সুতরাং আমি এই সমস্যার নিজের সমাধানটি শেষ পর্যন্ত পেয়েছি found

মাইক্রোসফ্ট ডকুমেন্টেশনগুলির মাধ্যমে অনুসন্ধানের পরে আমি কেবলমাত্র একটি নতুন আইই 1111 শৈলীটি সন্ধান করতে পেরেছিmsTextCombineHorizontal

আমার পরীক্ষায় আমি আই 1010 শৈলীর জন্য যাচাই করি এবং সেগুলি যদি ইতিবাচক মিল হয় তবে আমি কেবল আই 1111 শৈলীর জন্য যাচাই করি। যদি আমি এটি সন্ধান করি তবে এটি IE11 +, যদি আমি না পাই তবে এটি আই 10।

কোড উদাহরণ: সিএসএস ক্যাপাসিটি টেস্টিং (জেএসফিডাল) দ্বারা আইই 10 এবং আই 1111 সনাক্ত করুন

কোড স্নিপেট দেখান

 /**
  Target IE 10 with JavaScript and CSS property detection.
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
 **/

 // IE 10 only CSS properties
 var ie10Styles = [
     'msTouchAction',
     'msWrapFlow',
     'msWrapMargin',
     'msWrapThrough',
     'msOverflowStyle',
     'msScrollChaining',
     'msScrollLimit',
     'msScrollLimitXMin',
     'msScrollLimitYMin',
     'msScrollLimitXMax',
     'msScrollLimitYMax',
     'msScrollRails',
     'msScrollSnapPointsX',
     'msScrollSnapPointsY',
     'msScrollSnapType',
     'msScrollSnapX',
     'msScrollSnapY',
     'msScrollTranslation',
     'msFlexbox',
     'msFlex',
     'msFlexOrder'];

 var ie11Styles = [
     'msTextCombineHorizontal'];

 /*
  * Test all IE only CSS properties
  */
 var d = document;
 var b = d.body;
 var s = b.style;
 var ieVersion = null;
 var property;

 // Test IE10 properties
 for (var i = 0; i < ie10Styles.length; i++) {
     property = ie10Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie10";
         createEl("IE10 style found: " + property);
     }
 }

 // Test IE11 properties
 for (var i = 0; i < ie11Styles.length; i++) {
     property = ie11Styles[i];

     if (s[property] != undefined) {
         ieVersion = "ie11";
         createEl("IE11 style found: " + property);
     }
 }

 if (ieVersion) {
     b.className = ieVersion;
     $('#versionId').html('Version: ' + ieVersion);
 } else {
     createEl('Not IE10 or 11.');
 }

 /*
  * Just a little helper to create a DOM element
  */
 function createEl(content) {
     el = d.createElement('div');
     el.innerHTML = content;
     b.appendChild(el);
 }

 /*
  * List of IE CSS stuff:
  * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx
  */

body {
    font: 1.25em sans-serif;
}
div {
    background: red;
    color:#fff;
    padding: 1em;
}
.ie10 div {
    background: green;
    margin-bottom:.5em;
}
.ie11 div {
    background: purple;
    margin-bottom:.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Detect IE10 and IE11 by CSS Capability Testing</h1>


<h2 id="versionId"></h2>

স্নিপেট প্রসারিত করুন

আমি কোডের উদাহরণটি আরও শৈলীর সাথে আবিষ্কার করব যখন সেগুলি আবিষ্কার করব।

দ্রষ্টব্য: এটি প্রায় অবশ্যই IE12 এবং IE13 কে "আইই 11" হিসাবে চিহ্নিত করবে, কারণ এই শৈলীগুলি সম্ভবত এগিয়ে চলেবে। নতুন সংস্করণগুলি রোল আউট হওয়ার সাথে সাথে আমি আরও পরীক্ষাগুলি যুক্ত করব এবং আশা করি মডার্নিজরের উপর আবার নির্ভর করতে সক্ষম হব।

আমি এই পরীক্ষাটি ফ্যালব্যাক আচরণের জন্য ব্যবহার করছি। ফলব্যাক আচরণটি কেবল কম গ্ল্যামারাস স্টাইলিং, এতে কার্যকারিতা হ্রাস পায় না।

Question 5

এটি কাজ করে বলে মনে হচ্ছে:

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

https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/

Question 6

আপনি আপনার আইই ১১ কোডটি স্বাভাবিক হিসাবে লিখতে পারেন এবং তারপরে @supportsআইই ১১-তে সমর্থিত নয় এমন একটি সম্পত্তি ব্যবহার ও পরীক্ষা করতে পারেন examplegrid-area: auto ।

তারপরে আপনি এর মধ্যে আপনার আধুনিক ব্রাউজার শৈলীগুলি লিখতে পারেন। আইআই এই @supportsনিয়মটিকে সমর্থন করে না এবং আসল শৈলীগুলি ব্যবহার করবে, যদিও এটি আধুনিক ব্রাউজারগুলিতে সমর্থন করে যা সমর্থন করে @supports।

.my-class {
// IE the background will be red
background: red;

   // Modern browsers the background will be blue
    @supports (grid-area: auto) {
      background: blue;
    }
}

Question 7

এখানে 2017 এর একটি উত্তর দেওয়া আছে, যেখানে আপনি সম্ভবত কেবলমাত্র <= আই 11>> আইই 11 ("এজ") থেকে আলাদা করতে চান:

@supports not (old: ie) { /* code for not old IE here */ }

আরও উদাহরণমূলক উদাহরণ:

body:before { content: 'old ie'; }
/**/@supports not (old: ie) {
body:before { content: 'not old ie'; }
/**/}

এটি কাজ করে কারণ IE11 আসলে সমর্থন করে না @supports, এবং অন্যান্য সমস্ত প্রাসঙ্গিক ব্রাউজার / সংস্করণ সংমিশ্রণগুলি করে।

Question 8

এটি আমার পক্ষে কাজ করেছে

if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
}

এবং তারপরে CSS ফাইলগুলিতে উপসর্গযুক্ত

body.ie11 #some-other-div

এই ব্রাউজারটি কখন মারা যেতে প্রস্তুত?

Question 9

এটা চেষ্টা কর:

/*------Specific style for IE11---------*/
 _:-ms-fullscreen, :root 
 .legend 
{ 
  line-height: 1.5em;
  position: relative;
  top: -1.1em;   
}

Question 10

এই নিবন্ধটি একবার দেখুন: সিএসএস: ব্যবহারকারী এজেন্ট নির্বাচনকারী

মূলত, আপনি যখন এই স্ক্রিপ্টটি ব্যবহার করবেন:

var b = document.documentElement;
b.setAttribute('data-useragent',  navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

আপনি এখন যে কোনও ব্রাউজার / সংস্করণ লক্ষ্য করতে CSS ব্যবহার করতে পারেন।

আই ই 11 এর জন্য আমরা এটি করতে পারলাম:

ছোট ছোট

html[data-useragent*='rv:11.0']
{
    color: green;
}

Question 11

নিম্নলিখিত বৈশিষ্ট্য ব্যবহার করুন:

!! উইন্ডো.এমএসআইপুট মেথডকন্টেক্সট
!! ডকুমেন্ট.এমএস ফুলস্ক্রিন সক্ষম

Question 12

আপনার মডারিনিজার ব্যবহার করা উচিত, এটি বডি ট্যাগের সাথে একটি শ্রেণি যুক্ত করবে।

এছাড়াও:

function getIeVersion()
{
  var rv = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  else if (navigator.appName == 'Netscape')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

মনে রাখবেন যে আইই 11 এখনও পূর্বরূপে রয়েছে এবং ব্যবহারকারী এজেন্ট প্রকাশের আগেই পরিবর্তন করতে পারে।

আইই ১১ এর জন্য ব্যবহারকারী-এজেন্ট স্ট্রিংটি বর্তমানে এটির জন্য রয়েছে:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko

যার অর্থ হল আপনার কেবলমাত্র ১১.০.০ সংস্করণে পরীক্ষা করতে পারবেন,

var isIE11 = !!navigator.userAgent.match(/Trident.*rv 11\./)

Question 13

সম্ভবত লেআউট ইঞ্জিন v0.7.0 আপনার পরিস্থিতির জন্য একটি ভাল সমাধান। এটি ব্রাউজারের বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করে এবং কেবল আইই 11 এবং আই 10 নয়, আই 9, আইই 8 এবং আই 7 সনাক্ত করতে পারে। এটি কয়েকটি মোবাইল ব্রাউজার সহ অন্যান্য জনপ্রিয় ব্রাউজারগুলি সনাক্ত করে। এটি এইচটিএমএল ট্যাগে একটি শ্রেণি যুক্ত করেছে, এটি ব্যবহার করা সহজ, এবং এটি কিছুটা গভীর পরীক্ষার অধীনে ভাল সম্পাদন করা হয়েছে।

http://mattstow.com/layout-engine.html

Question 14

আপনি যদি মডার্নজার ব্যবহার করছেন - তবে আপনি সহজেই আই 10 এবং আই 11 এর মধ্যে পার্থক্য করতে পারেন।

IE10 pointer-eventsসম্পত্তি সমর্থন করে না । আইই 11 করেন। ( ক্যানিউজ )

এখন, আধুনিকীকরণ সন্নিবেশ করায় এমন ক্লাসের ভিত্তিতে আপনার নিম্নলিখিত সিএসএস থাকতে পারে:

.class
{ 
   /* for IE11 */
}

.no-pointerevents .class
{ 
   /* for IE10 */
}

Question 15

শর্তাধীন মন্তব্যের মান বজায় রাখতে আপনি জেএসএস ব্যবহার করতে এবং এইচটিএমএল এ একটি ক্লাস যুক্ত করতে পারেন :

  var ua = navigator.userAgent,
      doc = document.documentElement;

  if ((ua.match(/MSIE 10.0/i))) {
    doc.className = doc.className + " ie10";

  } else if((ua.match(/rv:11.0/i))){
    doc.className = doc.className + " ie11";
  }

বা বোসারের মতো একটি ব্যবহার করুন:

https://github.com ///serser

বা বৈশিষ্ট্য সনাক্তকরণের জন্য আধুনিকীকরণকারী:

http://modernizr.com/

Question 16

আইই এবং এর সংস্করণগুলি সনাক্ত করা আসলে অত্যন্ত সহজ, কমপক্ষে অত্যন্ত স্বজ্ঞাত:

var uA = navigator.userAgent;
var browser = null;
var ieVersion = null;

if (uA.indexOf('MSIE 6') >= 0) {
    browser = 'IE';
    ieVersion = 6;
}
if (uA.indexOf('MSIE 7') >= 0) {
    browser = 'IE';
    ieVersion = 7;
}
if (document.documentMode) { // as of IE8
    browser = 'IE';
    ieVersion = document.documentMode;
}

।

এইভাবে, ওওআউটটি সামঞ্জস্যতা মোড / ভিউতে উচ্চ আইই সংস্করণও ধরছে। এর পরে, এটি শর্তযুক্ত ক্লাস নির্ধারণের বিষয়:

var htmlTag = document.documentElement;
if (browser == 'IE' && ieVersion <= 11)
    htmlTag.className += ' ie11-';

Question 17

আপনি এটি চেষ্টা করতে পারেন:

if(document.documentMode) {
  document.documentElement.className+=' ie'+document.documentMode;
}

Question 18

আইই ১১-তে গ্র্যাভিটি ফর্ম (ওয়ার্ডপ্রেস) নিয়ে আমি একই সমস্যায় পড়েছি। ফর্মটির কলামের স্টাইল "প্রদর্শন: ইনলাইন-গ্রিড" লেআউটটি ভেঙেছে; উপরের উত্তর প্রয়োগ করে বৈষম্যের সমাধান হয়েছে!

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}

Question 19

পিছনে ফিরে যান: আপনি এমনকি "ইন্টারনেট এক্সপ্লোরার" সনাক্ত করার চেষ্টা করছেন কেন "আমার ওয়েবসাইটের এক্স করা দরকার, এই ব্রাউজারটি কি সেই বৈশিষ্ট্যটি সমর্থন করে? যদি তাই হয় তবে ভাল ব্রাউজার। যদি তা না হয় তবে আমার ব্যবহারকারীকে সতর্ক করা উচিত"।

আপনি যা করছেন তা চালিয়ে যাওয়ার পরিবর্তে আপনার http://modernizr.com/ আপ আপ করা উচিত ।