Mendeteksi IE11 menggunakan CSS Capability / Feature Detection

90

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.

internet-explorer-11  sample  feature-detection 
— dano
sumber
3
Mengapa Anda perlu mengetahui browser apa yang dimiliki pengguna? Bukankah deteksi fitur / awalan css / css kondisional cukup?
— David-SkyMesh
4
Saya lupa menyebutkan bahwa kami memiliki alasan untuk perlu mendeteksi browser, bahwa pengujian kemampuan tidak membantu. Salah satu masalah kami adalah IE10 menyatakan mendukung sesuatu, tetapi tidak melakukannya dengan baik.
— dano
2
@ David-SkyMesh - Tidak. Sayangnya, itu tidak cukup. Saya ingin seperti itu, tetapi ternyata tidak.
— dano
1
@Evildonald Anda tidak menjawab mengapa Anda perlu tahu - khususnya. Bisa jadi ini adalah masalah XY. (yaitu: Anda meminta bantuan dengan X - mendeteksi IE11 - saat kami dapat menjawab pertanyaan lain Y - bagaimana agar kompatibel dengan lebih banyak browser termasuk IE11 untuk TASK Z)
— David-SkyMesh
1
Saya memiliki .js yang mendeteksi versi browser, dan dikatakan bahwa ie11 adalah firefox. apa yang terjadi, yaitu pengembang!
— Daniel Cheung

Jawaban:

163

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

— SW4
sumber
3
Ini harus menjadi jawabannya. Detail yang bagus!
— egr103
IE10 hanya tidak bekerja untuk saya. Garis miring terbalik-9 tidak menghapus IE11. Saya mencoba menampilkan div untuk IE 10 tetapi tidak untuk IE11 ... Ini masih muncul di IE 11 ...
— Merc
Ah aneh. Ia bekerja pada sebagian besar properti tetapi clip: auto\9;masih diinterpretasikan seperti clip: auto;di IE 11. Entah bagaimana ini tidak diabaikan ...
— Merc
2
Bagi saya, opsi IE10 kedua berfungsi untuk IE11: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }Saya menemukannya di mediacurrent.com/blog/…
— cedricdlb
1
Setelah membaca semua ini saya pikir -ms-high-contrast: activemungkin sesuatu yang harus dihindari karena menurut spesifikasi MS Anda sebenarnya akan menargetkan pengguna tema kontras tinggi di Edge dengan aturan IE 10/11 Anda. Di halaman jawaban ini tertaut ke tentang -ms-high-contrastitu sebenarnya mengatakan bahwa hanya -ms-high-contrast: nonenilainya tidak lagi didukung. Saya rasa tidak ada yang menyebutkan ini karena kebanyakan orang tidak mengaktifkan mode kontras tinggi dan kebanyakan orang tidak menggunakan Edge. Tapi tetap saja, ada seseorang di luar sana yang memiliki konfigurasi itu dan ini mungkin tidak bagus untuk mereka.
— dmatamales
40

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 */   
}
— Aplikasi Tawale
sumber
1
Sesuatu seperti itu bisa jadi campuran sass juga!
— dano
2
Apakah itu hanya menargetkan IE11 atau Edge juga?
— Matthew Felgate
2
Menargetkan IE10 dan IE11 tetapi bukan edge.
— Jeff Clayton
23

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)

Tampilkan cuplikan kode

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.

— dano
sumber
8
Jika ada yang akan -1 jawaban ini harap setidaknya memiliki kesopanan untuk mengakuinya dengan alasan teknis . Anda mungkin tidak setuju dengan itu .. tapi itu benar dan berhasil.
— dano
7
Bagaimana Anda tahu apakah kode ini akan memberikan hasil yang benar di IE12, IE13, dan seterusnya?
— Evgeny
6
Mengapa Anda menggunakan metode ini, bukan if (document.documentMode === 11) { ... }? Kecuali, tentu saja, Anda ingin menggunakan properti CSS di @supportsat-rule (yang belum didukung di IE).
— Rob W
1
Jika Anda sudah memiliki kelas di tag tubuh Anda, ini akan menimpanya. Berikut perbaikan yang sangat kecil: jsfiddle.net/jmjpro/njvr1jq2/1 .
— jbustamovej
1
Selain itu, Anda akan ingin menyembunyikan elemen ieVersion dengan css: #ieVersion {display: none}
— jbustamovej
9

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;
    }
}
— Antfish
sumber
2
Ini berfungsi dan merupakan solusi yang baik, tetapi alasan yang diberikan tidak benar. IE11 tidak mendukung @supportssama sekali, jadi IE11 mengabaikan apa pun yang ada di @supportsblok. Jadi, Anda dapat meletakkan apa saja di @supports bersyarat (misalnya @supports (display: block)) dan IE11 akan tetap melewatinya.
— CodeBiker
1
Inilah yang saya maksud dengan "IE 11 akan mengabaikan" tetapi Anda benar, itu tidak sepenuhnya jelas. Saya telah memperbarui jawaban agar lebih jelas bahwa IE tidak mendukung @supports.
— Antfish
9

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 .

— Jan Kyu Peblik
sumber
4

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?

— Bert Oost
sumber
4

Coba ini:

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

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;
}
— Danield
sumber
1
Itu akan rusak di Firefox 11 (meskipun sekarang tidak didukung, itu penting). Ia juga memiliki rv:11.0string agen penggunanya.
— PhistucK
3

Gunakan properti berikut:

  • !! window.MSInputMethodContext
  • !! document.msFullscreenEnabled
— Paul Sweatte
sumber
2

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\./)
— Neo
sumber
Terima kasih Neo, tapi saya sudah menambahkan kelas ke tag tubuh saya DAN menggunakan Modernizr. Saya mencari cara untuk membedakan IE10 dari IE11 tanpa menggunakan Agen Pengguna yang tidak dapat dipercaya.
— dano
Kehilangan titik dua di rv 11. var isIE11 = !! navigator.userAgent.match (/Trident.*rv:11 \ ./)
— T.CK
2

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

— Talkingrock
sumber
2

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 */
}
— Danield
sumber
2

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/

— Liko
sumber
2

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-';
— Frank Conijn
sumber
2

Anda dapat mencoba ini:

if(document.documentMode) {
  document.documentElement.className+=' ie'+document.documentMode;
}
— Adrian Miranda
sumber
2

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 */
}
— leonel.ai
sumber
1

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.

— Mike 'Pomax' Kamermans
sumber
Terima kasih untuk solusi alternatif, tetapi saya sudah menggunakan Modernizr, dan IE10 salah merepresentasikan kemampuannya.
— dano
4
Saya berasumsi Anda tahu yang mana, dan telah mengajukan masalah dengan Modernizr sehingga mereka dapat menambahkan lebih banyak cek Modernizrs untuk browser tertentu itu? (Jika tidak, Anda harus. Jika Anda menemukan sesuatu yang berdampak pada ratusan ribu developer, mengajukannya kepada orang yang bertanggung jawab atas shim adalah satu-satunya hal yang benar yang harus dilakukan)
— Mike 'Pomax' Kamermans
7
Bagi kita yang menulis kode yang menghadap pengguna, Anda sering membutuhkan jawaban sekarang , bukan bug yang diajukan di perpustakaan pihak ketiga dan tambalan di sana. Artinya, senang Anda ingin mereka meningkatkan Modernizr, tetapi tidak cocok di sini.
— Dean J
1
Saya pikir mendeteksi browser yang sebenarnya adalah tujuan yang masuk akal.
— gwg
@DeanJ pasti, dan untuk pertanyaan-pertanyaan itu orang lain akan memberikan jawaban juga. Itu tidak membuatnya menjadi kurang penting untuk mendapatkan tanggapan seperti ini yang memberitahu Anda untuk memikirkan tentang apa yang Anda lakukan. Selain itu, pada saat repy tidak ada pengeditan pada postingan, dan tidak ada penyebutan "Saya memerlukannya untuk berfungsi sekarang", jadi saya tidak punya alasan untuk menganggap mereka tidak menginginkan pemeriksaan realitas.
— Mike 'Pomax' Kamermans
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.