CSS Yeteneği / Özellik Algılama kullanarak IE11'i algılama

Question 1

IE10 + artık bir tarayıcıyı tanımlamak için tarayıcı algılama etiketlerini desteklemiyor.

Emin algılamak için JavaScript ve kabiliyet-test tekniği kullanıyorum IE10 algılamak için msönceden sabitlenmiş stilleri tanımlandığı gibi msTouchActionvemsWrapFlow .

IE11 için de aynısını yapmak istiyorum, ancak tüm IE10 stillerinin IE11'de de destekleneceğini varsayıyorum. İkisini birbirinden ayırmak için kullanabileceğim yalnızca IE11 stillerini veya yeteneklerini belirlememe yardımcı olan var mı?

Fazladan bilgi

Kullanıcı Aracısı türü algılamasını kullanmak istemiyorum çünkü çok sivilceli ve değiştirilebilir, ayrıca IE11'in kasıtlı olarak Internet Explorer olduğu gerçeğini gizlemeye çalıştığını okudum.
IE10 yetenek testinin nasıl çalıştığına dair bir örnek olarak, bu JsFiddle'ı (benim değil) testlerim için temel olarak kullandım.
Ayrıca "Bu kötü bir fikir ..." için birçok yanıt bekliyorum. Bunun için gereksinimlerimden biri, IE10'un bir şeyi desteklediğini iddia etmesidir, ancak çok kötü bir şekilde uygulanmıştır ve IE10 ile IE11 + arasında ayrım yapabilmek, böylece gelecekte yetenek tabanlı bir algılama yöntemine devam edebilmek istiyorum.
Bu test, daha az göz alıcı davranışa bazı işlevsellik "geri dönüşü" yapacak bir Modernizr testi ile birleştirilmiştir. Kritik işlevsellikten bahsetmiyoruz.

AYRICA Zaten Modernizr kullanıyorum, ancak burada yardımcı olmuyor. Açıkça sorulan soruma bir çözüm bulmak için yardıma ihtiyacım var lütfen.

Question 2

Gelişen iş parçacığı ışığında, aşağıdakileri güncelledim:

IE 6

* html .ie6 {property:value;}

veya

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

veya

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

IE 6 ve 7

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

veya

.ie67 { *property:value;}

veya

.ie67 { #property:value;}

IE 6, 7 ve 8

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

IE 8

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

veya

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

Yalnızca IE 8 Standartları Modu

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

IE 8,9 ve 10

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

Yalnızca IE 9

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

IE 9 ve üstü

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

IE 9 ve 10

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

Yalnızca IE 10

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

IE 10 ve üstü

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

veya

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

Kullanımı -ms-high-contrastvasıtası MS Kenar, hedeflenen olmayacak Kenar desteklemediği olarak-ms-high-contrast .

IE 11

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

Javascript alternatifleri

Modernizr

Modernizr, özellikleri algılamak için sayfa yüklemede hızlı çalışır; daha sonra sonuçlarla bir JavaScript nesnesi oluşturur ve html öğesine sınıflar ekler

Kullanıcı aracısı seçimi

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

Aşağıdakileri htmlöğeye ekler (örneğin) :

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'

Çok hedeflenmiş CSS seçicilere izin verme, örneğin:

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

Dipnot

Mümkünse, herhangi bir sorunu kırmadan tanımlayın ve düzeltin. Destek ilerici geliştirme ve zarif bozulması . Ancak, bu her zaman elde edilemeyen bir 'ideal dünya' senaryosudur - yukarıdakiler bazı iyi seçenekler sağlamaya yardımcı olacaktır.

Atıf / Temel Okuma

Question 3

Yalnızca IE10 ve IE11'i hedeflemek için (Edge'i değil):

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

Question 4

Böylece sonunda bu soruna kendi çözümümü buldum.

Microsoft belgelerinde arama yaptıktan sonra yeni bir yalnızca IE11 stili bulmayı başardımmsTextCombineHorizontal

Testimde IE10 stillerini kontrol ediyorum ve pozitif bir eşleşmelerse sadece IE11 stilini kontrol ediyorum. Bulursam, o zaman IE11 +, bulamazsam, o zaman IE10.

Kod Örneği: IE10 ve IE11'i CSS Yetenek Testi (JSFiddle) ile Algılama

Kod parçacığını göster

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

Snippet'i genişlet

Kod örneğini keşfettiğimde daha fazla stille güncelleyeceğim.

NOT: Bu, neredeyse kesinlikle IE12 ve IE13'ü "IE11" olarak tanımlayacaktır, çünkü bu tarzlar muhtemelen ilerleyecektir. Yeni sürümler çıktıkça daha fazla test ekleyeceğim ve umarım tekrar Modernizr'e güvenebilirim.

Bu testi geri dönüş davranışı için kullanıyorum. Geri dönüş davranışı daha az çekici bir stildir, azaltılmış işlevselliğe sahip değildir.

Question 5

Bu işe yarıyor gibi görünüyor:

@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

Muhtemelen yalnızca <= IE11'i> IE11'den ("Edge") ayırt etmeyi önemsediğiniz 2017 için bir cevap:

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

Daha açıklayıcı örnek:

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

Bu işe yarıyor çünkü IE11 aslında desteklemiyor @supportsve diğer tüm ilgili tarayıcı / sürüm kombinasyonları destekliyor .

Question 7

IE11 kodunuzu normal bir şekilde yazabilir ve ardından @supportsIE11'de desteklenmeyen bir özelliği kullanabilir ve kontrol edebilirsiniz, örneğingrid-area: auto .

Daha sonra modern tarayıcı stillerinizi bunun içine yazabilirsiniz. IE @supportskuralı desteklemez ve orijinal stilleri kullanır, oysa bunlar destekleyen modern tarayıcılarda geçersiz kılınır @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 8

Bu benim için çalıştı

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

Ve sonra css dosyasında her şeyin önüne

body.ie11 #some-other-div

Bu tarayıcı ne zaman ölmeye hazır?

Question 9

Bunu dene:

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

Question 10

Bu makaleye bir göz atın: CSS: Kullanıcı Aracısı Seçiciler

Temel olarak, bu komut dosyasını kullandığınızda:

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

Artık herhangi bir tarayıcıyı / sürümü hedeflemek için CSS kullanabilirsiniz.

Yani IE11 için şunu yapabiliriz:

VAKTİNİ BOŞA HARCAMAK

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

Question 11

Aşağıdaki özellikleri kullanın:

!! window.MSInputMethodContext
!! document.msFullscreenEnabled

Question 12

Modernizr kullanmalısınız, body etiketine bir sınıf ekleyecektir.

Ayrıca:

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'in hala önizlemede olduğunu ve kullanıcı aracısının yayınlanmadan önce değişebileceğini unutmayın.

IE 11 için Kullanıcı aracısı dizesi şu anda şudur:

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

Bu, 11.xx sürümleri için basitçe test edebileceğiniz anlamına gelir,

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

Question 13

Belki Layout Engine v0.7.0, durumunuz için iyi bir çözümdür. Tarayıcı özelliği algılamasını kullanır ve yalnızca IE11 ve IE10'u değil, aynı zamanda IE9, IE8 ve IE7'yi de algılayabilir. Ayrıca, bazı mobil tarayıcılar dahil diğer popüler tarayıcıları da algılar. Html etiketine bir sınıf ekler, kullanımı kolaydır ve oldukça derin testler altında iyi performans gösterir.

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

Question 14

Modernizr kullanıyorsanız - o zaman IE10 ve IE11 arasında kolayca ayrım yapabilirsiniz.

IE10 pointer-eventsözelliği desteklemiyor . IE11 yapar. ( caniuse )

Şimdi, Modernizr'in eklediği sınıfa göre aşağıdaki CSS'ye sahip olabilirsiniz:

.class
{ 
   /* for IE11 */
}

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

Question 15

Koşullu yorumların standardını korumak için js kullanabilir ve html'de bir sınıf ekleyebilirsiniz :

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

Veya bowser gibi bir kitaplık kullanın:

https://github.com/ded/bowser

Veya özellik algılama için modernizr:

http://modernizr.com/

Question 16

IE'yi ve sürümlerini tespit etmek aslında son derece kolaydır, en azından son derece sezgiseldir:

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

.

Bu şekilde, Uyumluluk Modu / Görünümünde de yüksek IE sürümlerini yakalıyorsunuz. Ardından, koşullu sınıflar atama meselesi:

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

Question 17

Bunu deneyebilirsiniz:

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

Question 18

IE11'de bir Yerçekimi Formu (WordPress) ile aynı problemle karşılaştım. Formun sütun stili "display: inline-grid" düzeni bozdu; yukarıdaki cevapları uygulamak tutarsızlığı çözdü!

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

Question 19

Geri adım atın: "Web sitemin X yapması gerekiyor, bu tarayıcı bu özelliği destekliyor mu? Öyleyse, iyi bir tarayıcı. Değilse, o zaman kullanıcıyı uyarmalıyım" yerine "internet explorer" ı tespit etmeye çalışıyorsunuz.

Yaptığınız şeye devam etmek yerine http://modernizr.com/ adresine gitmelisiniz.