CSS機能/機能検出を使用したIE11の検出
IE10 +は、ブラウザーを識別するためのブラウザー検出タグをサポートしなくなりました。
IE10を検出するために、JavaScriptと機能テスト手法を使用して、msやmsTouchActionなどの特定のmsWrapFlowプレフィックス付きスタイルを検出しています。
IE11でも同じことをしたいのですが、IE10のすべてのスタイルがIE11でもサポートされると想定しています。誰でも私がIE11のみのスタイルまたは機能を識別するのを助けて、2つを区別するのに使用できますか？
追加情報
- IE 11がInternet Explorerであるという事実を意図的に隠そうとしていることを読んだと思うだけでなく、ユーザーエージェントタイプの検出を使用したくありません。
- IE10の機能テストがどのように機能するかの例として、これを JsFiddle （私のものではない）をテストの基礎として使用しました。
- また、「これは悪い考えです...」の多くの答えを期待しています。これに対する私のニーズの1つは、IE10が何かをサポートしていると主張することですが、それは非常に実装が不十分であり、IE10とIE11 +を区別できるようにしたいので、将来的に機能ベースの検出方法に進むことができます。
- このテストは、より魅力的な動作に機能を「フォールバック」するModernizrテストと組み合わされます。重要な機能については話していません。
また、Modernizrを既に使用していますが、ここでは役に立ちません。私の明確に尋ねられた質問に対する解決策の助けが必要です。
だから私は最終的にこの問題に対する私自身の解決策を見つけました。
Microsoftドキュメント を検索した後、新しいIE11のみのスタイルmsTextCombineHorizontalを見つけることができました。
私のテストでは、IE10スタイルをチェックし、それらが正の一致である場合、IE11のみのスタイルをチェックします。見つかった場合はIE11 +、見つからない場合はIE10です。
コード例：CSS Capability Testing（JSFiddle）によるIE10およびIE11の検出
/**
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>私はそれらを発見したときに、より多くのスタイルでコード例を更新します。
注：これらのスタイルはおそらく引き継がれるので、これはほとんど確実にIE12とIE13を「IE11」として識別します。新しいバージョンのリリースに合わせてさらにテストを追加し、Modernizrに再び依存できることを願っています。
フォールバック動作にこのテストを使用しています。フォールバック動作は、魅力的なスタイリングではなく、機能が低下していません。
進化するスレッドに照らして、以下を更新しました。
IE 6
* html .ie6 {property:value;}
または
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
または
*:first-child+html .ie7 {property:value;}
IE 6および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;}
}
IE 8標準モードのみ
.ie8 { property /*\**/: value\9 }
IE 8,9および10
@media screen\0 {
.ie8910 {property:value;}
}
IE 9のみ
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
IE 9以降
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 9および10
@media screen and (min-width:0) {
.ie910{property:value;}
}
IE 10のみ
_:-ms-lang(x), .ie10 { property:value\9; }
IE 10以降
_:-ms-lang(x), .ie10up { property:value; }
または
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
-ms-high-contrastの使用は、MS Edgeがターゲットにならないことを意味します Edgeは-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;
}
脚注
可能であれば、ハッキングせずに問題を特定して修正します。サポート プログレッシブエンハンスメント および グレースフルデグラデーション 。ただし、これは「理想的な世界」シナリオであり、常に入手できるとは限らないため、上記はいくつかの優れたオプションを提供するのに役立つはずです。
帰属/必読
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}
すべてのクラスまたはCSSプロパティを追加します。
これはうまくいくようです：
@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/
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;
}
}
以下は2017年の回答です。おそらく、<= IE11と> IE11（「エッジ」）を区別することだけが重要です。
@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を実際にサポートしておらず、 他のすべての関連するブラウザー/バージョンの組み合わせ をサポートしているためです。
これを試して：
/*------Specific style for IE11---------*/
_:-ms-fullscreen, :root
.legend
{
line-height: 1.5em;
position: relative;
top: -1.1em;
}
これは私のために働いた
if(navigator.userAgent.match(/Trident.*rv:11\./)) {
$('body').addClass('ie11');
}
そして、cssファイルでは、接頭辞が付いたもの
body.ie11 #some-other-div
このブラウザはいつ死ぬ準備ができていますか？
この記事をご覧ください： CSS：User Agent Selectors
基本的に、このスクリプトを使用する場合：
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;
}
これを試すことができます：
if(document.documentMode) {
document.documentElement.className+=' ie'+document.documentMode;
}
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";
}
または、bowserのようなlibを使用します。
または、機能検出のためのmodernizr：
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-';
IE11の重力フォーム（WordPress）で同じ問題に遭遇しました。フォームの列スタイル「display：inline-grid」はレイアウトを壊しました。上記の回答を適用することで、矛盾を解決しました！
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, .gfmc-column { display: inline-block;} /* IE11 */
}
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\./)
次のプロパティを使用します。
- !! window.MSInputMethodContext
- !! document.msFullscreenEnabled
おそらく、レイアウトエンジンv0.7.0はあなたの状況に適したソリューションです。ブラウザ機能の検出を使用し、IE11およびIE10だけでなく、IE9、IE8、およびIE7も検出できます。また、一部のモバイルブラウザなど、他の一般的なブラウザも検出します。 htmlタグにクラスを追加し、使いやすく、かなり深いテストの下で十分に機能します。
ステップバック：「私のウェブサイトはXを実行する必要がありますが、このブラウザーはその機能をサポートしますか？そうであれば、良いブラウザー。そうでない場合は、ユーザーに警告する」ではなく、「インターネットエクスプローラー」を検出しようとするのはなぜですか？.
あなたがやっていることを続けるのではなく、 http://modernizr.com/ を見つけてください。