Phát hiện IE11 bằng cách sử dụng CSS Capability / Feature Detection

Question 1

IE10 + không còn hỗ trợ thẻ phát hiện trình duyệt để xác định trình duyệt.

Để phát hiện IE10, tôi đang sử dụng JavaScript và kỹ thuật kiểm tra khả năng để phát hiện một số mskiểu có tiền tố nhất định được định nghĩa như msTouchActionvà msWrapFlow.

Tôi cũng muốn làm điều tương tự cho IE11, nhưng tôi giả định rằng tất cả các kiểu IE10 cũng sẽ được hỗ trợ trong IE11. Bất cứ ai có thể giúp tôi xác định phong cách hoặc khả năng chỉ IE11 mà tôi có thể sử dụng để phân biệt hai loại này không?

Thông tin thêm

Tôi không muốn sử dụng tính năng phát hiện kiểu Tác nhân Người dùng vì nó quá lắt léo và có thể bị thay đổi, cũng như tôi nghĩ rằng tôi đã đọc được rằng IE11 đang cố tình che giấu sự thật đó là Internet Explorer.
Để có ví dụ về cách hoạt động của kiểm tra khả năng IE10, tôi đã sử dụng JsFiddle này (không phải của tôi) làm cơ sở cho kiểm tra của mình.
Ngoài ra tôi đang mong đợi rất nhiều câu trả lời của "Đây là một ý tưởng tồi ...". Một trong những nhu cầu của tôi cho việc này là IE10 tuyên bố nó hỗ trợ một thứ gì đó, nhưng nó được triển khai rất tệ và tôi muốn có thể phân biệt giữa IE10 và IE11 + để có thể tiếp tục với phương pháp phát hiện dựa trên khả năng trong tương lai.
Thử nghiệm này được kết hợp với thử nghiệm Modernizr sẽ chỉ đơn giản là làm cho một số chức năng "dự phòng" cho hành vi kém hấp dẫn hơn. Chúng tôi không nói về chức năng quan trọng.

CŨNG tôi đang sử dụng Modernizr, nhưng nó không giúp được gì ở đây. Tôi cần trợ giúp để có giải pháp cho câu hỏi đã hỏi rõ ràng của tôi.

Question 2

Dưới ánh sáng của chuỗi đang phát triển, tôi đã cập nhật thông tin bên dưới:

IE 6

* html .ie6 {property:value;}

hoặc là

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

hoặc là

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

IE 6 và 7

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

hoặc là

.ie67 { *property:value;}

hoặc là

.ie67 { #property:value;}

IE 6, 7 và 8

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

IE 8

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

hoặc là

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

Chỉ chế độ tiêu chuẩn IE 8

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

IE 8,9 và 10

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

Chỉ IE 9

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

IE 9 trở lên

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

IE 9 và 10

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

Chỉ IE 10

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

IE 10 trở lên

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

hoặc là

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

Việc sử dụng -ms-high-contrastcó nghĩa là MS Edge sẽ không được nhắm mục tiêu, vì Edge không hỗ trợ-ms-high-contrast .

IE 11

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

Các lựa chọn thay thế Javascript

Modernizr

Modernizr chạy nhanh khi tải trang để phát hiện các tính năng; sau đó nó tạo một đối tượng JavaScript với kết quả và thêm các lớp vào phần tử html

Lựa chọn tác nhân người dùng

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

Thêm (ví dụ) phần dưới đây vào htmlphần tử:

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'

Cho phép các bộ chọn CSS được nhắm mục tiêu, ví dụ:

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

Chú thích

Nếu có thể, hãy xác định và khắc phục (các) vấn đề mà không có hack. Hỗ trợ nâng cao tiến độ và suy thoái duyên dáng . Tuy nhiên, đây là một kịch bản 'thế giới lý tưởng' không phải lúc nào cũng có thể đạt được, như vậy - những điều trên sẽ giúp cung cấp một số lựa chọn tốt.

Ghi công / Đọc cần thiết

Question 3

Để chỉ nhắm mục tiêu IE10 và IE11 (chứ không phải Edge):

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

Question 4

Vì vậy, cuối cùng tôi đã tìm ra giải pháp của riêng mình cho vấn đề này.

Sau khi tìm kiếm qua tài liệu của Microsoft, tôi đã cố gắng tìm thấy một kiểu chỉ IE11 mớimsTextCombineHorizontal

Trong thử nghiệm của tôi, tôi kiểm tra các kiểu IE10 và nếu chúng là một kết quả phù hợp, thì tôi chỉ kiểm tra kiểu IE11. Nếu tôi tìm thấy nó, thì đó là IE11 +, nếu tôi không, thì đó là IE10.

Ví dụ về mã: Phát hiện IE10 và IE11 bằng Kiểm tra khả năng CSS (JSFiddle)

Hiển thị đoạn mã

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

Mở rộng đoạn mã

Tôi sẽ cập nhật ví dụ mã với nhiều kiểu hơn khi tôi phát hiện ra chúng.

LƯU Ý: Điều này gần như chắc chắn sẽ xác định IE12 và IE13 là "IE11", vì những kiểu đó có thể sẽ tiếp tục. Tôi sẽ thêm các thử nghiệm khác khi các phiên bản mới ra mắt và hy vọng có thể dựa vào Modernizr một lần nữa.

Tôi đang sử dụng bài kiểm tra này cho hành vi dự phòng. Hành vi dự phòng chỉ là kiểu dáng kém quyến rũ hơn, nó không bị giảm chức năng.

Question 5

Điều này dường như hoạt động:

@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

Bạn có thể viết mã IE11 của mình như bình thường, sau đó sử dụng @supportsvà kiểm tra một thuộc tính không được hỗ trợ trong IE11 grid-area: auto.

Sau đó, bạn có thể viết các kiểu trình duyệt hiện đại của mình trong này. IE không hỗ trợ @supportsquy tắc này và sẽ sử dụng các kiểu gốc, trong khi những kiểu này sẽ bị ghi đè trong các trình duyệt hiện đại hỗ trợ @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

Đây là câu trả lời cho năm 2017, nơi bạn có thể chỉ quan tâm đến việc phân biệt <= IE11 với> IE11 ("Edge"):

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

Ví dụ minh họa khác:

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

Điều này hoạt động vì IE11 thậm chí còn không hỗ trợ @supportsvà tất cả các kết hợp trình duyệt / phiên bản có liên quan khác đều có .

Question 8

Điều này đã làm việc cho tôi

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

Và sau đó trong tệp css, mọi thứ có tiền tố

body.ie11 #some-other-div

Khi nào thì trình duyệt này sẵn sàng chết?

Question 9

Thử đi:

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

Question 10

Hãy xem bài viết này: CSS: Bộ chọn tác nhân người dùng

Về cơ bản, khi bạn sử dụng tập lệnh này:

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

Bây giờ bạn có thể sử dụng CSS để nhắm mục tiêu bất kỳ trình duyệt / phiên bản nào.

Vì vậy, đối với IE11, chúng tôi có thể làm điều này:

VĨ CẦM

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

Question 11

Sử dụng các thuộc tính sau:

!! window.MSInputMethodContext
!! document.msFullscreenEnabled

Question 12

Bạn nên sử dụng Modernizr, nó sẽ thêm một lớp vào thẻ body.

cũng thế:

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

Lưu ý rằng IE11 vẫn đang ở chế độ xem trước và tác nhân người dùng có thể thay đổi trước khi phát hành.

Chuỗi tác nhân người dùng cho IE 11 hiện là chuỗi này:

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

Có nghĩa là bạn có thể đơn giản kiểm tra, đối với phiên bản 11.xx,

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

Question 13

Có lẽ Layout Engine v0.7.0 là một giải pháp tốt cho tình huống của bạn. Nó sử dụng tính năng phát hiện trình duyệt và có thể phát hiện không chỉ IE11 và IE10 mà còn cả IE9, IE8 và IE7. Nó cũng phát hiện các trình duyệt phổ biến khác, bao gồm một số trình duyệt di động. Nó thêm một lớp vào thẻ html, dễ sử dụng và hoạt động tốt trong một số thử nghiệm khá sâu.

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

Question 14

Nếu bạn đang sử dụng Modernizr - thì bạn có thể dễ dàng phân biệt giữa IE10 và IE11.

IE10 không hỗ trợ thuộc pointer-eventstính này. IE11 thì có. ( caniuse )

Bây giờ, dựa trên lớp mà Modernizr chèn vào, bạn có thể có CSS sau:

.class
{ 
   /* for IE11 */
}

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

Question 15

Bạn có thể sử dụng js và thêm một lớp trong html để duy trì tiêu chuẩn của các nhận xét có điều kiện :

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

Hoặc sử dụng lib như bowser:

https://github.com/ded/bowser

Hoặc modernizr để phát hiện tính năng:

http://modernizr.com/

Question 16

Việc phát hiện IE và các phiên bản của nó thực sự cực kỳ dễ dàng, ít nhất là cực kỳ trực quan:

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

.

Bằng cách này, bạn cũng đang bắt các phiên bản IE cao trong Chế độ tương thích / Chế độ xem. Tiếp theo, vấn đề là gán các lớp có điều kiện:

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

Question 17

Bạn có thể thử điều này:

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

Question 18

Tôi đã gặp phải vấn đề tương tự với Gravity Form (WordPress) trong IE11. Kiểu cột của biểu mẫu "display: inline-grid" đã phá vỡ bố cục; áp dụng các câu trả lời ở trên đã giải quyết được sự khác biệt!

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

Question 19

Lùi lại: tại sao bạn thậm chí đang cố gắng phát hiện "trình khám phá internet" chứ không phải "trang web của tôi cần thực hiện X, trình duyệt này có hỗ trợ tính năng đó không? Nếu vậy, trình duyệt tốt. Nếu không, thì tôi nên cảnh báo người dùng".

Bạn nên đánh lên http://modernizr.com/ thay vì tiếp tục những gì bạn đang làm.