Mendeteksi IE11 menggunakan CSS Capability / Feature Detection

IE10 + tidak lagi mendukung tag deteksi browser untuk mengidentifikasi browser.

Untuk mendeteksi IE10 saya menggunakan JavaScript dan teknik pengujian kemampuan untuk mendeteksi msgaya prefiks tertentu yang didefinisikan seperti msTouchActiondan msWrapFlow.

Saya ingin melakukan hal yang sama untuk IE11, tetapi saya berasumsi bahwa semua gaya IE10 akan didukung di IE11 juga. Adakah yang bisa membantu saya mengidentifikasi hanya gaya atau kemampuan IE11 yang dapat saya gunakan untuk membedakan keduanya?

Informasi tambahan

• Saya tidak ingin menggunakan deteksi jenis Agen Pengguna karena sangat tidak rapi, dan dapat diubah, serta saya rasa saya telah membaca bahwa IE11 sengaja mencoba menyembunyikan fakta bahwa itu adalah Internet Explorer.
• Untuk contoh bagaimana pengujian kemampuan IE10 bekerja, saya menggunakan JsFiddle ini (bukan milik saya) sebagai dasar pengujian saya.
• Juga saya mengharapkan banyak jawaban dari "Ini adalah ide yang buruk ...". Salah satu kebutuhan saya untuk ini adalah bahwa IE10 mengklaim mendukung sesuatu, tetapi penerapannya sangat buruk, dan saya ingin dapat membedakan antara IE10 dan IE11 + sehingga saya dapat melanjutkan dengan metode deteksi berbasis kemampuan di masa mendatang.
• Tes ini digabungkan dengan tes Modernizr yang hanya akan membuat beberapa fungsi "mundur" ke perilaku yang kurang glamor. Kami tidak berbicara tentang fungsionalitas kritis.

JUGA saya sudah menggunakan Modernizr, tetapi tidak membantu di sini. Saya butuh bantuan untuk solusi atas pertanyaan saya yang diajukan dengan jelas.

Mengingat utas yang berkembang, saya telah memperbarui di bawah ini:

YAITU 6

* html .ie6 {property:value;}

atau

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

atau

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

IE 6 dan 7

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

atau

.ie67 { *property:value;}

atau

.ie67 { #property:value;}

IE 6, 7 dan 8

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

IE 8

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

atau

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

Hanya Mode Standar IE 8

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

IE 8,9 dan 10

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

IE 9 saja

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

IE 9 ke atas

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

IE 9 dan 10

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

IE 10 saja

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

IE 10 ke atas

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

atau

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

Penggunaan -ms-high-contrastsarana yang MS Edge tidak akan ditargetkan, karena Edge tidak mendukung-ms-high-contrast .

IE 11

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

Alternatif Javascript

Modernizr

Modernizr berjalan cepat saat pemuatan halaman untuk mendeteksi fitur; itu kemudian membuat objek JavaScript dengan hasilnya, dan menambahkan kelas ke elemen html

Pemilihan agen pengguna

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

Menambahkan (misalnya) di bawah ini ke htmlelemen:

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'

Mengizinkan pemilih CSS yang sangat ditargetkan, misalnya:

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

Catatan kaki

Jika memungkinkan, identifikasi dan perbaiki masalah apa pun tanpa peretasan. Mendukung peningkatan progresif dan degradasi anggun . Namun, ini adalah skenario 'dunia ideal' yang tidak selalu dapat diperoleh, karena itu - hal di atas akan membantu memberikan beberapa opsi yang baik.

Atribusi / Bacaan Penting

• Jeff Clayton | Browserhacks.com
• Keith Clarke
• Paul Irish
• Web Devout
• The Spanner

Untuk menargetkan IE10 dan IE11 saja (dan bukan Edge):

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

Jadi saya menemukan solusi saya sendiri untuk masalah ini pada akhirnya.

Setelah mencari melalui dokumentasi Microsoft, saya berhasil menemukan gaya hanya IE11msTextCombineHorizontal

Dalam pengujian saya, saya memeriksa gaya IE10 dan jika semuanya cocok, maka saya memeriksa gaya IE11 saja. Jika saya menemukannya, maka itu IE11 +, jika tidak, maka IE10.

Contoh Kode: Deteksi IE10 dan IE11 dengan 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>

Saya akan memperbarui contoh kode dengan lebih banyak gaya ketika saya menemukannya.

CATATAN: Ini hampir pasti akan mengidentifikasi IE12 dan IE13 sebagai "IE11", karena gaya tersebut mungkin akan terus berlanjut. Saya akan menambahkan tes lebih lanjut saat versi baru diluncurkan, dan semoga dapat mengandalkan lagi pada Modernizr.

Saya menggunakan tes ini untuk perilaku fallback. Perilaku fallback hanyalah gaya yang kurang glamor, tidak mengurangi fungsinya.

Ini sepertinya berhasil:

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

Anda dapat menulis kode IE11 Anda seperti biasa lalu menggunakan @supportsdan memeriksa properti yang tidak didukung di IE11, misalnyagrid-area: auto .

Anda kemudian dapat menulis gaya browser modern Anda di dalamnya. IE tidak mendukung @supportsaturan tersebut dan akan menggunakan gaya asli, sedangkan ini akan diganti di browser modern yang mendukung @supports.

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

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

Berikut adalah jawaban untuk tahun 2017, di mana Anda mungkin hanya peduli tentang membedakan <= IE11 dari> IE11 ("Edge"):

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

Contoh yang lebih demonstratif:

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

Ini berfungsi karena IE11 sebenarnya tidak mendukung @supports, dan semua kombinasi browser / versi relevan lainnya mendukungnya .

Ini berhasil untuk saya

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

Dan kemudian di file css hal-hal yang diawali dengan

body.ie11 #some-other-div

Kapan browser ini siap mati?

Coba ini:

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

Lihat artikel ini: CSS: Pemilih Agen Pengguna

Pada dasarnya, saat Anda menggunakan skrip ini:

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

Anda sekarang dapat menggunakan CSS untuk menargetkan browser / versi apa pun.

Jadi untuk IE11 kita bisa melakukan ini:

BIOLA

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

Gunakan properti berikut:

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

Anda harus menggunakan Modernizr, ini akan menambahkan kelas ke tag body.

juga:

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

Perhatikan bahwa IE11 masih dalam pratinjau, dan agen pengguna dapat berubah sebelum rilis.

String agen-pengguna untuk IE 11 saat ini adalah yang ini:

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

Yang berarti Anda cukup menguji, untuk versi 11.xx,

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

Mungkin Layout Engine v0.7.0 adalah solusi yang baik untuk situasi Anda. Ia menggunakan deteksi fitur browser dan dapat mendeteksi tidak hanya IE11 dan IE10, tetapi juga IE9, IE8, dan IE7. Itu juga mendeteksi browser populer lainnya, termasuk beberapa browser seluler. Itu menambahkan kelas ke tag html, mudah digunakan, dan itu dilakukan dengan baik di bawah beberapa pengujian yang cukup dalam.

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

Jika Anda menggunakan Modernizr - maka Anda dapat dengan mudah membedakan antara IE10 dan IE11.

IE10 tidak mendukung pointer-eventsproperti. IE11 tidak. ( caniuse )

Sekarang, berdasarkan kelas yang disisipkan Modernizr, Anda dapat memiliki CSS berikut:

.class
{ 
   /* for IE11 */
}

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

Anda dapat menggunakan js dan menambahkan kelas di html untuk mempertahankan standar komentar bersyarat :

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

Atau gunakan lib seperti bowser:

https://github.com/ded/bowser

Atau modernizr untuk deteksi fitur:

http://modernizr.com/

Mendeteksi IE dan versinya sebenarnya sangat mudah, setidaknya sangat intuitif:

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

.

Dengan cara ini, Anda juga menangkap versi IE tinggi dalam Mode Kompatibilitas / Tampilan. Selanjutnya, masalah menetapkan kelas bersyarat:

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

Anda dapat mencoba ini:

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

Saya mengalami masalah yang sama dengan Gravity Form (WordPress) di IE11. Gaya kolom formulir "display: inline-grid" merusak tata letak; menerapkan jawaban di atas menyelesaikan perbedaan!

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

Langkah mundur: mengapa Anda mencoba mendeteksi "internet explorer" daripada "situs web saya perlu melakukan X, apakah browser ini mendukung fitur itu? Jika demikian, browser yang bagus. Jika tidak, saya harus memperingatkan pengguna".

Anda harus menekan http://modernizr.com/ daripada melanjutkan apa yang Anda lakukan.