CSS機能/機能検出を使用したIE11の検出


90

IE10 +は、ブラウザーを識別するためのブラウザー検出タグをサポートしなくなりました。

IE10を検出するために、JavaScriptを使用しており、およびmsなどの特定のプレフィックス付きスタイルを検出するための機能テスト手法が定義されmsTouchActionていmsWrapFlowます。

IE11でも同じことをしたいのですが、IE11でもすべてのIE10スタイルがサポートされると思います。誰かが私が2つを区別するために使用できるIE11のみのスタイルまたは機能を識別するのを手伝ってもらえますか?

追加情報

  • ユーザーエージェントタイプの検出は非常にむらがあり、変更できるため、使用したくありません。また、IE11が意図的にInternetExplorerであるという事実を隠そうとしていることを読んだと思います。
  • IE10の機能テストがどのように機能するかの例として、私はこのJsFiddle(私のものではない)をテストの基礎として使用しました。
  • また、「これは悪い考えです...」という回答もたくさん期待しています。これに対する私のニーズの1つは、IE10が何かをサポートしていると主張していることですが、実装が非常に悪いため、将来的に機能ベースの検出方法に進むことができるように、IE10とIE11 +を区別できるようにしたいと考えています。
  • このテストは、一部の機能を魅力の少ない動作に「フォールバック」させるModernizrテストと組み合わされています。重要な機能については話していません。

また、私はすでにModernizrを使用していますが、ここでは役に立ちません。はっきりと尋ねられた質問の解決策について助けが必要です。


3
ユーザーが使用しているブラウザを知る必要があるのはなぜですか?機能検出/ cssプレフィックス/ css条件付きでは不十分ですか?
David-SkyMesh 2013

4
ブラウザを検出する必要がある理由があり、機能テストでは役に立たないことを忘れました。私たちの問題の1つは、IE10が何かをサポートしていると言っているのに、うまく機能していないことです。
dano

2
@ David-SkyMesh-いいえ。残念ながら、それだけでは十分ではありません。したいのですが、そうではありません。
dano

1
@Evildonaldなぜあなたが知る必要があるのか​​、具体的には答えませんでした。これはXYの問題である可能性があります。(つまり、Xを支援するために使用を求めています-IE11を検出します-別の質問に答えることができるときY-タスクZ用のIE11を含むより多くのブラウザーと互換性を持たせる方法)
David-SkyMesh 2013

1
ブラウザのバージョンを検出する.jsがあり、ie11はFirefoxであると表示されていました。何が起こっているのか、つまり開発者!
Daniel Cheung 2014年

回答:


163

進化するスレッドに照らして、私は以下を更新しました:

IE 6

* html .ie6 {property:value;}

または

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

または

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

IE6および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;}
}

IE8標準モードのみ

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

IE 8、9および10

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

IE9のみ

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

IE9以降

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

IE9および10

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

IE10のみ

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

IE10以降

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

または

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

の使用は-ms-high-contrastEdgeがをサポートしていないため、MSEdge-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;
}

脚注

可能であれば、ハッキングせずに問題を特定して修正します。プログレッシブエンハンスメントグレースフルデグラデーションをサポートします。ただし、これは「理想的な世界」のシナリオであり、常に取得できるとは限りません。そのため、上記はいくつかの優れたオプションを提供するのに役立つはずです。


帰属/必読


3
これは本当に答えになるはずです。素晴らしいディテール!
egr103 2015年

IE10は私のためだけに動作しません。バックスラッシュ-9はIE11を削除しません。私はそれはまだIE 11 ...上に示しています... IE 10のためではなく、IE11のためのdivを表示しようとしています
傭兵

ああ変だ。これは、プロパティのほとんどで動作しますが、clip: auto\9;それでもとして解釈されるclip: auto;...どういうわけか、これは無視されていないIE 11に
傭兵

2
私にとって、2番目のIE10オプションはIE11で機能しました:mediacurrent.com/blog/で @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }見つけました
cedricdlb

1
これをすべて読んだ後は-ms-high-contrast: active、MSの仕様に従って、IE 10/11ルールを使用してEdgeの高コントラストのテーマユーザーを実際にターゲットにするため、避けるべきことがあると思います。この回答がリンクしているページでは-ms-high-contrast、実際には-ms-high-contrast: none値だけがサポートされなくなったと書かれています。ほとんどの人はハイコントラストモードを有効にしておらず、ほとんどの人はEdgeを使用していないため、これについては誰も言及していないと思います。しかし、それでも、その構成を持っているがいて、これはおそらく彼らにとってクールではありません。
dmatamales

40

IE10およびIE11のみ(Edgeではなく)をターゲットにするには:

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

1
そのようなものもサスミックスインかもしれません!
dano 2016年

2
それはIE11のみを対象としていますか、それともEdgeも対象としていますか?
マシューフェルゲート2017

2
IE10とIE11をターゲットにしますが、エッジはターゲットにしません。
ジェフ・クレイトン

23

だから私は結局、この問題に対する私自身の解決策を見つけました。

Microsoftのドキュメントを検索した後、新しいIE11のみのスタイルを見つけることができました。msTextCombineHorizontal

私のテストでは、IE10スタイルをチェックし、それらが正の一致である場合は、IE11のみのスタイルをチェックします。見つかった場合はIE11 +であり、見つからなかった場合はIE10です。

コード例: CSS機能テスト(JSFiddle)によるIE10とIE11の検出

発見したら、コード例をより多くのスタイルで更新します。

注:これらのスタイルはおそらく引き継がれるため、これにより、IE12およびIE13が「IE11」としてほぼ確実に識別されます。新しいバージョンが公開されたら、さらにテストを追加し、Modernizrに再び依存できるようになることを願っています。

このテストをフォールバック動作に使用しています。フォールバック動作は、魅力的なスタイリングではなく、機能が低下することはありません。


8
誰かがこの答えを-1にするつもりなら、少なくとも技術的な理由でそれを所有する良識を持ってください。あなたはそれに同意しないかもしれません..しかしそれは正しく、それは機能します。
dano 2013

7
このコードがIE12、IE13などで正しい結果を生成するかどうかをどうやって知るのですか?
Evgeny

6
なぜ代わりにこの方法を使用しているのif (document.documentMode === 11) { ... }ですか?もちろん、@supportsat-ruleでCSSプロパティを使用する場合を除きます(ちなみに、IEではまだサポートされていません)。
ロブW

1
bodyタグに既存のクラスがある場合、これによりそれらが上書きされます。非常にマイナーな修正は次のとおりです:jsfiddle.net/jmjpro/njvr1jq2/1
jbustamovej 2014年

1
また、cssを使用してieVersion要素を非表示にする必要があります。#ieVersion {display:none}
jbustamovej 2014年


9

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

2
これは機能し、良い解決策ですが、与えられた理由は正しくありません。IE11はまったくサポート@supportsしていないため、@supportsブロック内のすべてを無視します。したがって、@ supports条件付き(例@supports (display: block))に何でも入れることができ、IE11はそれをスキップします。
CodeBiker 2018年

1
これは私が「IE11は無視する」という意味ですが、あなたは正しいです、それは完全に明確ではありません。IEが@supportsをサポートしていないことをより明確にするために、回答を更新しました。
Antfish

9

これが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他のすべての関連するブラウザー/バージョンの組み合わせがサポートしているために機能します。


4

これは私のために働いた

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

そして、cssファイルで接頭辞が付いたもの

body.ie11 #some-other-div

このブラウザはいつ死ぬ準備ができていますか?


4

これを試して:

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

3

この記事を見てください:CSS:ユーザーエージェントセレクター

基本的に、このスクリプトを使用する場合:

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

1
これはFirefox11では機能しなくなります(現在はサポートされていませんが、重要です)。またrv:11.0、ユーザーエージェント文字列も含まれています。
phistucK 2014年


2

Modernizrを使用する必要があります。これにより、bodyタグにクラスが追加されます。

また:

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はまだプレビュー中であり、ユーザーエージェントはリリース前に変更される可能性があることに注意してください。

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\./)

Neoに感謝しますが、私はすでにbodyタグにクラスを追加し、Modernizrを使用しています。私は、信頼できないユーザーエージェントを使用せずにIE10とIE11を区別する方法を模索しています。
dano

RVにコロンがありません11. VAR isIE11 = !! navigator.userAgent.match(/Trident.*rv:11 \ ./)
T.CK

2

おそらく、レイアウトエンジンv0.7.0はあなたの状況に適したソリューションです。ブラウザの機能検出を使用し、IE11とIE10だけでなく、IE9、IE8、IE7も検出できます。また、一部のモバイルブラウザを含む他の一般的なブラウザも検出します。htmlタグにクラスを追加し、使いやすく、かなり深いテストの下でうまく機能します。

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


2

Modernizrを使用している場合は、IE10とIE11を簡単に区別できます。

IE10はこのpointer-eventsプロパティをサポートしていません。IE11はそうします。(caniuse

これで、Modernizrが挿入するクラスに基づいて、次のCSSを作成できます。

.class
{ 
   /* for IE11 */
}

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

2

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

または、クッパのようなライブラリを使用します。

https://github.com/ded/bowser

または機能検出用のmodernizr:

http://modernizr.com/


2

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


2

IE11のGravityForm(WordPress)で同じ問題が発生しました。フォームの列スタイル「display:inline-grid」がレイアウトを壊しました。上記の回答を適用すると、不一致が解決しました。

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

1

ステップバック:「私のウェブサイトはXを実行する必要がありますが、このブラウザはその機能をサポートしていますか?そうであれば、優れたブラウザです。そうでない場合は、ユーザーに警告する必要があります」ではなく、「InternetExplorer」を検出しようとしているのはなぜですか。

あなたがしていることを続けるのではなく、http://modernizr.com/にアクセスするべきです。


別の解決策をありがとうございますが、私はすでにModernizrを使用しており、IE10はその機能を誤って表現しています。
dano

4
私はあなたがどれを知っていると思います、そして彼らがその特定のブラウザのためにもっとModernizrsチェックを追加できるようにModernizrに問題を提出しましたか?(そうでない場合は、そうする必要があります。数十万の開発者に影響を与える何かを見つけた場合は、シムの責任者にそれを提出することが唯一の正しいことです)
Mike'Pomax 'Kamermans 2013

7
ユーザー向けのコードを書いている私たちにとって、サードパーティのライブラリに提出されたバグやそこにあるパッチではなく、今すぐ答えが必要になることがよくあります。つまり、Modernizrを改善してもらいたいのはいいことですが、ここでは適していません。
ディーンJ

1
実際のブラウザを検出すること自体が合理的な目標だと思います。
gwg 2013年

@DeanJ確かに、そしてそれらの質問に対して、他の誰かも答えを提供します。それは、あなたが何をしているかについて考えるようにあなたに告げるこれらのような応答を得ることはそれほど重要ではありません。また、リピーの時点では、投稿の編集はなく、「今すぐ動作する必要がある」という言及もなかったので、リアリティチェックを望まないと考える理由はありませんでした。
Mike'Pomax 'Kamermans 2013年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.