आईई 11 का पता लगाने सीएसएस क्षमता / सुविधा का उपयोग कर

Question 1

IE10 + अब ब्राउज़र की पहचान करने के लिए ब्राउज़र डिटेक्शन टैग का समर्थन नहीं करता है।

IE10 का पता लगाने के लिए मैं जावास्क्रिप्ट का उपयोग कर रहा हूं और कुछ msउपसर्ग शैलियों का पता लगाने के लिए क्षमता-परीक्षण तकनीक का उपयोग किया जाता है जैसे कि msTouchActionऔर msWrapFlow।

मैं IE11 के लिए भी ऐसा ही करना चाहता हूं, लेकिन मैं यह मान रहा हूं कि IE11 में सभी IE10 शैलियों का समर्थन किया जाएगा। क्या कोई मुझे आईई 11 को केवल उन शैलियों या क्षमताओं की पहचान करने में मदद कर सकता है जिनका उपयोग मैं दो को अलग-अलग करने के लिए कर सकता हूं?

अधिक जानकारी

मैं उपयोगकर्ता एजेंट प्रकार का पता लगाने का उपयोग नहीं करना चाहता क्योंकि यह बहुत धब्बेदार है, और इसे बदला जा सकता है, साथ ही मुझे लगता है कि मैंने पढ़ा है कि IE11 जानबूझकर इस तथ्य को छिपाने की कोशिश कर रहा है कि यह इंटरनेट एक्सप्लोरर है।
IE10 क्षमता परीक्षण कैसे काम करता है, इसके एक उदाहरण के लिए, मैंने अपने परीक्षण के लिए आधार के रूप में इस JsFiddle (मेरा नहीं) का उपयोग किया ।
इसके अलावा मैं "यह एक बुरा विचार है ..." के बहुत सारे जवाबों की उम्मीद कर रहा हूँ। इसके लिए मेरी एक जरूरत यह है कि IE10 का दावा है कि यह कुछ का समर्थन करता है, लेकिन यह बहुत बुरी तरह से लागू है, और मैं IE10 और IE11 + के बीच अंतर करने में सक्षम होना चाहता हूं, इसलिए मैं भविष्य में क्षमता-आधारित पहचान पद्धति के साथ आगे बढ़ सकता हूं।
यह परीक्षण एक माडर्निज़्र परीक्षण के साथ युग्मित है जो कम ग्लैमरस व्यवहार के लिए कुछ कार्यक्षमता "कमबैक" करेगा। हम महत्वपूर्ण कार्यक्षमता के बारे में बात नहीं कर रहे हैं।

मैं भी पहले से ही मॉर्डनिज़्र का उपयोग कर रहा हूं, लेकिन यह यहां मदद नहीं करता है। मुझे अपने स्पष्ट रूप से पूछे जाने वाले प्रश्न के समाधान के लिए मदद चाहिए।

Question 2

विकसित धागे के प्रकाश में, मैंने नीचे अद्यतन किया है:

IE 6

* html .ie6 {property:value;}

या

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

या

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

IE 6 और 7

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

या

.ie67 { *property:value;}

या

.ie67 { #property:value;}

IE 6, 7 और 8

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

IE 8

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

या

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

IE 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;}
}

IE 9 और इसके बाद के संस्करण

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

IE 9 और 10

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

आईई 10 केवल

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

IE 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 ।

IE 11

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

जावास्क्रिप्ट विकल्प

Modernizr

आधुनिकीकरण सुविधाओं का पता लगाने के लिए पेज लोड पर जल्दी से चलता है; यह तब परिणामों के साथ एक जावास्क्रिप्ट ऑब्जेक्ट बनाता है, और html तत्व में कक्षाएं जोड़ता है

उपयोगकर्ता एजेंट चयन

जावास्क्रिप्ट:

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

केवल IE10 और IE11 को लक्षित करने के लिए (और एज नहीं):

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

Question 4

इसलिए मैंने अंत में इस समस्या का अपना समाधान पाया।

Microsoft प्रलेखन के माध्यम से खोज करने के बाद मैं एक नई IE11 केवल शैली खोजने में कामयाब रहाmsTextCombineHorizontal

अपने परीक्षण में, मैं IE10 शैलियों की जांच करता हूं और यदि वे एक सकारात्मक मैच हैं, तो मैं IE11 शैली के लिए जांच करता हूं। अगर मुझे यह मिल गया, तो यह IE11 + है, अगर मैं नहीं करता, तो यह IE10 है।

कोड उदाहरण: CSS क्षमता परीक्षण (JSFiddle) द्वारा IE10 और IE11 का पता लगाएं

कोड स्निपेट दिखाएं

 /**
  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 की पहचान "IE11" के रूप में करेगा, क्योंकि ये शैली संभवतः आगे ले जाएंगी। मैं आगे के परीक्षणों को जोड़ूंगा क्योंकि नए संस्करण रोल आउट होंगे, और उम्मीद है कि वे फिर से मॉडर्निज़र पर भरोसा कर पाएंगे।

मैं फॉलबैक व्यवहार के लिए इस परीक्षण का उपयोग कर रहा हूं। फॉलबैक व्यवहार सिर्फ कम ग्लैमरस स्टाइल है, इसमें कार्यक्षमता कम नहीं है।

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

आप अपने IE11 कोड को सामान्य रूप से लिख सकते हैं और फिर @supportsउदाहरण के लिए IE11 में समर्थित नहीं होने वाली प्रॉपर्टी के लिए उपयोग और जांच कर सकते हैंgrid-area: auto ।

आप इसके बाद अपनी आधुनिक ब्राउज़र शैलियों को लिख सकते हैं। IE @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 के लिए एक उत्तर दिया गया है, जहां आप शायद केवल <= IE11 से> IE11 ("एज") में अंतर करने के बारे में परवाह करते हैं:

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

और फिर सीएसएस फ़ाइल में उपसर्ग के साथ फाइल की गई चीजें

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

इस लेख पर नज़र डालें: CSS: उपयोगकर्ता एजेंट चयनकर्ता

मूल रूप से, जब आप इस स्क्रिप्ट का उपयोग करते हैं:

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 का उपयोग कर सकते हैं।

तो IE11 के लिए हम यह कर सकते हैं:

बेला

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

Question 11

निम्नलिखित गुणों का उपयोग करें:

!! window.MSInputMethodContext
!! document.msFullscreenEnabled

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;
}

ध्यान दें कि IE11 अभी भी पूर्वावलोकन में है, और उपयोगकर्ता एजेंट रिलीज़ होने से पहले बदल सकता है।

IE 11 के लिए यूजर-एजेंट स्ट्रिंग वर्तमान में यह एक है:

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

जिसका अर्थ है कि आपका केवल 11.11 संस्करण के लिए परीक्षण कर सकते हैं,

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

Question 13

शायद लेआउट इंजन v0.7.0 आपकी स्थिति के लिए एक अच्छा समाधान है। यह ब्राउज़र फ़ीचर डिटेक्शन का उपयोग करता है और न केवल IE11 और IE10, बल्कि IE9, IE8 और IE7 का भी पता लगा सकता है। यह कुछ मोबाइल ब्राउज़रों सहित अन्य लोकप्रिय ब्राउज़रों का भी पता लगाता है। यह html टैग में एक वर्ग जोड़ता है, इसका उपयोग करना आसान है, और यह कुछ काफी गहरे परीक्षण के तहत अच्छा प्रदर्शन करता है।

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

Question 14

यदि आप मॉडर्निज़्र का उपयोग कर रहे हैं - तो आप IE10 और IE11 के बीच आसानी से अंतर कर सकते हैं।

IE10 pointer-eventsसंपत्ति का समर्थन नहीं करता है। IE11 करता है। ( कैनीयूज़ )

अब, क्लास के आधार पर, जो कि मॉर्डनिजर सम्मिलित करता है, आपके पास निम्नलिखित सीएसएस हो सकते हैं:

.class
{ 
   /* for IE11 */
}

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

Question 15

सशर्त टिप्पणियों के मानक को बनाए रखने के लिए आप js का उपयोग कर सकते हैं और html में एक वर्ग जोड़ सकते हैं :

  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/ded/bowser

या सुविधा का पता लगाने के लिए आधुनिकीकरण:

http://modernizr.com/

Question 16

IE और इसके संस्करणों का पता लगाना वास्तव में बेहद आसान है, कम से कम अत्यंत सहज है:

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;
}

।

इस तरह, आप संगतता मोड / दृश्य में उच्च IE संस्करण भी पकड़ रहे हैं। इसके बाद, सशर्त वर्गों को असाइन करने की बात:

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

मैं IE11 में ग्रेविटी फॉर्म (वर्डप्रेस) के साथ एक ही समस्या में भाग गया। प्रपत्र की कॉलम शैली "प्रदर्शन: इनलाइन-ग्रिड" ने लेआउट को तोड़ दिया; ऊपर दिए गए उत्तरों को लागू करने से विसंगति दूर हो गई!

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

Question 19

वापस कदम: क्यों आप भी "मेरी वेबसाइट एक्स करने की जरूरत है" के बजाय "इंटरनेट एक्सप्लोरर" का पता लगाने की कोशिश कर रहे हैं, क्या यह उस सुविधा का समर्थन करता है? यदि ऐसा है, तो अच्छा ब्राउज़र। यदि नहीं, तो मुझे उपयोगकर्ता को चेतावनी देनी चाहिए।

आपको http://modernizr.com/ को हिट करने की बजाय जारी रखना चाहिए कि आप क्या कर रहे हैं।