การตรวจจับ IE11 โดยใช้ CSS Capability / Feature Detection

IE10 + ไม่รองรับแท็กการตรวจจับเบราว์เซอร์เพื่อระบุเบราว์เซอร์อีกต่อไป

สำหรับการตรวจสอบ IE10 ฉันกำลังใช้ JavaScript และเทคนิคความสามารถในการทดสอบในการตรวจสอบบางmsรูปแบบที่นำหน้าจะมีการกำหนดเช่นและmsTouchActionmsWrapFlow

ฉันต้องการทำเช่นเดียวกันสำหรับ IE11 แต่ฉันสมมติว่ารูปแบบ IE10 ทั้งหมดจะได้รับการสนับสนุนใน IE11 ด้วย ใครช่วยฉันระบุสไตล์หรือความสามารถเฉพาะของ IE11 ที่ฉันสามารถใช้เพื่อแยกทั้งสองอย่างออกจากกันได้ไหม

ข้อมูลเพิ่มเติม

• ฉันไม่ต้องการใช้การตรวจจับประเภท User Agent เพราะมันขาด ๆ หาย ๆ และสามารถเปลี่ยนแปลงได้เช่นเดียวกับที่ฉันคิดว่าฉันได้อ่านว่า IE11 ตั้งใจจะซ่อนความจริงที่ว่ามันคือ Internet Explorer
• สำหรับตัวอย่างวิธีการทดสอบความสามารถของ IE10 ฉันใช้JsFiddle (ไม่ใช่ของฉัน) เป็นพื้นฐานสำหรับการทดสอบของฉัน
• นอกจากนี้ฉันคาดหวังคำตอบมากมายว่า "นี่เป็นความคิดที่ไม่ดี ... " ความต้องการอย่างหนึ่งของฉันสำหรับสิ่งนี้คือ IE10 อ้างว่ามันรองรับบางสิ่งบางอย่าง แต่มันใช้งานได้ไม่ดีมากและฉันต้องการที่จะแยกความแตกต่างระหว่าง IE10 และ IE11 + เพื่อที่ฉันจะได้ดำเนินการต่อด้วยวิธีการตรวจจับตามความสามารถในอนาคต
• การทดสอบนี้ควบคู่ไปกับการทดสอบ Modernizr ซึ่งจะทำให้ฟังก์ชันบางอย่างเป็น "ทางเลือก" ไปสู่พฤติกรรมที่น่าดึงดูดน้อยลง เราไม่ได้พูดถึงฟังก์ชันการทำงานที่สำคัญ

นอกจากนี้ฉันใช้ Modernizr อยู่แล้ว แต่ก็ไม่ได้ช่วยอะไรที่นี่ ฉันต้องการความช่วยเหลือสำหรับคำตอบสำหรับคำถามที่ถามชัดเจนของฉันโปรด

ในแง่ของเธรดที่กำลังพัฒนาฉันได้อัปเดตด้านล่าง:

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

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

การใช้-ms-high-contrastวิธีการที่ MS ขอบจะไม่ได้กำหนดเป้าหมายเป็นขอบไม่สนับสนุน-ms-high-contrast

IE 11

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

ทางเลือก Javascript

Modernizr

Modernizr ทำงานอย่างรวดเร็วในการโหลดหน้าเพื่อตรวจจับคุณสมบัติต่างๆ จากนั้นจะสร้างออบเจ็กต์ JavaScript พร้อมผลลัพธ์และเพิ่มคลาสให้กับองค์ประกอบ html

การเลือกตัวแทนผู้ใช้

Javascript:

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'

อนุญาตตัวเลือก CSS ที่กำหนดเป้าหมายมากเช่น:

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

เชิงอรรถ

หากเป็นไปได้ให้ระบุและแก้ไขปัญหาใด ๆ โดยไม่ต้องแฮ็ก สนับสนุนการเพิ่มประสิทธิภาพที่ก้าวหน้าและการย่อยสลายอย่างสง่างามการย่อยสลายที่สง่างามอย่างไรก็ตามนี่เป็นสถานการณ์ 'โลกในอุดมคติ' ซึ่งไม่สามารถหาได้เสมอไปเนื่องจากข้างต้นจะช่วยให้มีตัวเลือกที่ดี

การแสดงที่มา / การอ่านที่จำเป็น

• เจฟฟ์เคลย์ตัน | Browserhacks.com
• Keith Clarke
• พอลไอริช
• Web Devout
• Spanner

ในการกำหนดเป้าหมาย IE10 และ IE11 เท่านั้น (ไม่ใช่ Edge):

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

ฉันจึงพบวิธีแก้ปัญหาของตัวเองในที่สุด

หลังจากค้นหาผ่านเอกสารของ Microsoftฉันสามารถหารูปแบบ IE11 ใหม่ได้msTextCombineHorizontal

ในการทดสอบของฉันฉันตรวจสอบรูปแบบ IE10 และหากพวกเขาตรงกันฉันจะตรวจสอบสไตล์ IE11 เท่านั้น ถ้าเจอแสดงว่าเป็น IE11 + ถ้าไม่เจอก็คือ IE10

ตัวอย่างโค้ด: ตรวจหา IE10 และ IE11 โดย CSS Capability Testing (JSFiddle)

 /**
  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" ได้อย่างแน่นอนเนื่องจากรูปแบบเหล่านั้นอาจส่งผลต่อไป ฉันจะเพิ่มการทดสอบเพิ่มเติมเมื่อมีการเปิดตัวเวอร์ชันใหม่และหวังว่าจะสามารถพึ่งพา Modernizr ได้อีกครั้ง

ฉันกำลังใช้การทดสอบนี้สำหรับพฤติกรรมทางเลือก พฤติกรรมทางเลือกเป็นเพียงการจัดแต่งทรงผมที่มีเสน่ห์น้อยลง แต่ก็ไม่ได้ลดฟังก์ชันการทำงานลง

ดูเหมือนว่าจะได้ผล:

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

นี่คือคำตอบสำหรับปี 2017 ซึ่งคุณอาจสนใจเฉพาะการแยกแยะ <= IE11 จาก> IE11 ("Edge"):

@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และอื่น ๆ ทั้งหมดรวมกันเบราว์เซอร์ / รุ่นที่เกี่ยวข้องทำ

คุณสามารถเขียนโค้ด 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;
    }
}

สิ่งนี้ได้ผลสำหรับฉัน

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

จากนั้นในไฟล์ css สิ่งที่นำหน้าด้วย

body.ie11 #some-other-div

เบราว์เซอร์นี้พร้อมที่จะตายเมื่อใด

ลองสิ่งนี้:

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

ดูบทความนี้: CSS: User Agent Selectors

โดยทั่วไปเมื่อคุณใช้สคริปต์นี้:

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

ใช้คุณสมบัติต่อไปนี้:

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

คุณควรใช้ Modernizr มันจะเพิ่มคลาสให้กับแท็กเนื้อหา

ยัง:

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 ยังอยู่ในการแสดงตัวอย่างและตัวแทนผู้ใช้อาจเปลี่ยนแปลงก่อนวางจำหน่าย

สตริง User-agent สำหรับ 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\./)

บางที Layout Engine v0.7.0 อาจเป็นทางออกที่ดีสำหรับสถานการณ์ของคุณ ใช้การตรวจจับคุณลักษณะของเบราว์เซอร์และสามารถตรวจจับได้ไม่เพียง แต่ IE11 และ IE10 เท่านั้น แต่ยังรวมถึง IE9, IE8 และ IE7 ด้วย นอกจากนี้ยังตรวจพบเบราว์เซอร์ยอดนิยมอื่น ๆ รวมถึงเบราว์เซอร์มือถือบางตัว เพิ่มคลาสให้กับแท็ก html ใช้งานง่ายและทำงานได้ดีภายใต้การทดสอบที่ค่อนข้างลึก

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

หากคุณใช้Modernizr - คุณสามารถแยกความแตกต่างระหว่าง IE10 และ IE11 ได้อย่างง่ายดาย

IE10 ไม่รองรับpointer-eventsคุณสมบัตินี้ IE11 ทำ ( คานิอุส )

ตอนนี้ขึ้นอยู่กับคลาสที่ Modernizr แทรกคุณสามารถมี CSS ต่อไปนี้:

.class
{ 
   /* for IE11 */
}

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

คุณสามารถใช้ 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";
  }

หรือใช้ lib เช่น bowser:

https://github.com/ded/bowser

หรือ modernizr สำหรับการตรวจจับคุณสมบัติ:

http://modernizr.com/

การตรวจจับ 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-';

คุณสามารถลองสิ่งนี้:

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

ฉันพบปัญหาเดียวกันกับ Gravity Form (WordPress) ใน IE11 สไตล์คอลัมน์ของฟอร์ม "display: inline-grid" ทำให้เค้าโครงไม่สมบูรณ์ การใช้คำตอบข้างต้นช่วยแก้ปัญหาความคลาดเคลื่อนได้!

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

ย้อนกลับไป: ทำไมคุณถึงพยายามตรวจหา "internet explorer" แทนที่จะเป็น "เว็บไซต์ของฉันต้องทำ X เบราว์เซอร์นี้รองรับฟีเจอร์นั้นหรือไม่ถ้าเป็นเช่นนั้นเบราว์เซอร์ที่ดีถ้าไม่ฉันควรเตือนผู้ใช้"

คุณควรกดhttp://modernizr.com/แทนที่จะดำเนินการต่อในสิ่งที่คุณทำ