दिलचस्प पोस्ट
जब रूट एल कैपिटन (रूटलेस अक्षम) पर ऑपरेशन की अनुमति नहीं है क्या गोटो अभी भी हानिकारक माना जाता है? नाम के लिए रेगेक्स मैं एफएफ 34.x में एफएफ 33.x फ्लेक्सबॉक्स व्यवहार कैसे प्राप्त करूं? एन्जलर जेएस निर्देशों का उपयोग करते हुए उच्चचर्च प्रदान करना अजगर – अगर शब्द स्ट्रिंग में है तो जांचें पायथन यूनिट। टेस्ट सीज़ निष्पादन आदेश Android संपर्क सूची को कैसे कॉल करें? WebWorkers को एक सुरक्षित वातावरण बनाना मैटलप्लिब्ब: विभिन्न तराजू के साथ ओवरले भूखंड? कैसे Xcode में आईओएस क्षुधा को iPhone 5 बड़े स्क्रीन समर्थन जोड़ने के लिए? पायथन में स्विच स्टेटमेंट के लिए प्रतिस्थापन? मैं PHP को कैसे निष्पादित कर सकता हूं जिसे MySQL डाटाबेस में संग्रहीत किया जाता है? AngularJS – $ नष्ट घटना श्रोताओं को नष्ट करता है? ListBoxFor में मूल्यों को चुनने के साथ चुनौतियां

IE11 का पता लगाने सीएसएस क्षमता / फ़ीचर जांच का उपयोग करना

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

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

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

अधिक जानकारी

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

भी मैं पहले से ही Modernizr उपयोग कर रहा हूँ, लेकिन यह यहाँ मदद नहीं करता है मुझे स्पष्ट रूप से पूछे जाने वाले प्रश्न के समाधान के लिए कृपया सहायता की आवश्यकता है।

वेब के समाधान से एकत्रित समाधान "IE11 का पता लगाने सीएसएस क्षमता / फ़ीचर जांच का उपयोग करना"

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

IE 6

 * html .ie6 {property:value;} 

या

 .ie6 { _property:value;} 

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

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

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

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

आईई 11 (और ऊपर ..)

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

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

Modernizr

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

पाद लेख

अगर संभव हो तो, हैक्स के बिना किसी भी मुद्दे (स्कॉल्स) को पहचानना और ठीक करना। प्रगतिशील वृद्धि और सुंदर गिरावट का समर्थन करें हालांकि, यह एक 'आदर्श विश्व' परिदृश्य है, जो हमेशा उपलब्ध नहीं होता है, जैसे- ऊपर के कुछ अच्छे विकल्प प्रदान करने में सहायता करना चाहिए।


एट्रिब्यूशन / आवश्यक पढ़ना

  • जेफ क्लेटन | Browserhacks.com
  • किथ क्लार्क
  • पॉल आयरिश
  • वेब डेवाउट
  • स्पैनर

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

माइक्रोसॉफ्ट प्रलेखन के माध्यम से खोज करने के बाद मैंने नया IE11 केवल शैली msTextCombineHorizontal खोजने में कामयाब रहा

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

कोड उदाहरण: सीएसएस क्षमता परीक्षण (जेएसएफडेल) द्वारा 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> 
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { } 

अपनी सभी कक्षाएं या सीएसएस गुण जोड़ना

यह काम करने लगता है:

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

http://www.limecanvas.com/css-hacks-targeting-ie-10/

यह मेरे लिए काम किया

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

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

 body.ie11 #some-other-div 

यह ब्राउज़र कब मरने के लिए तैयार है?

इस आलेख को देखें: सीएसएस: उपयोगकर्ता एजेंट चयनकर्ता

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

 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':''); 

अब आप किसी भी ब्राउज़र / संस्करण को लक्षित करने के लिए सीएसएस का उपयोग कर सकते हैं।

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

बेला

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

आपको मॉडर्नर्जर का इस्तेमाल करना चाहिए, यह शरीर टैग को एक क्लास जोड़ देगा।

भी:

 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.xx के लिए परीक्षण कर सकते हैं,

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

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

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

यदि आप Modernizr का उपयोग कर रहे हैं – तो आप आसानी से IE10 और IE11 के बीच differntiate कर सकते हैं

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

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

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

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

  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/

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

  • !! window.MSInputMethodContext
  • !! document.msFullscreenEnabled

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

इसे इस्तेमाल करे:

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

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

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

आप यह कोशिश कर सकते हैं:

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

यहां 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 वास्तव में समर्थन का समर्थन नहीं करता है, और अन्य सभी प्रासंगिक ब्राउज़र / संस्करण संयोजन करते हैं

यह भी संभावना है कि -ms-foo समर्थित कुछ -ms-foo मालिकाना संपत्ति लेकिन> -ms-foo समर्थित नहीं है, इस स्थिति में आप @supports (--what: evr) { } अकेले बजाय सीधे @supports (--what: evr) { } को लक्षित करने के लिए @supports (--what: evr) { } का उपयोग कर सकते हैं। उपरोक्त ओवरराइड