CSS経由でMicrosoft Edgeブラウザーを識別する方法は？

Question 1

私はWebアプリケーションを開発しています。独自のスタイルを適用するには、Microsoft Edgeのブラウザーを他のブラウザーと区別する必要があります。CSSを使用してEdgeを識別する方法はありますか？と同じように、

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->

Question 2

/ * Microsoft Edge Browser 12-18（Chromiumより前のすべてのバージョン）* /

これはうまくいくはずです：

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

詳しくはこちらをご覧ください：ブラウザの奇妙さ

Question 3

/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

それはうまくいきます！

// for instance:
_:-ms-lang(x), _:-webkit-full-screen, .headerClass 
{ 
  border: 1px solid brown;
}

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

Question 4

Edgeの方が正確です（最新のIE 15は含まれません）。

@supports (display:-ms-grid) { ... }

@supports (-ms-ime-align:auto) { ... } すべてのEdgeバージョン（現在IE15まで）で動作します。

Question 5

For Internet Explorer 

@media all and (-ms-high-contrast: none) {
        .banner-wrapper{
            background: rgba(0, 0, 0, 0.16)
         }
}

For Edge
@supports (-ms-ime-align:auto) {
    .banner-wrapper{
            background: rgba(0, 0, 0, 0.16);
         }
}

Question 6

特徴検出、特徴検出、特徴検出。なぜ誰かがCSSでUAをスニッフィングまたは検出する必要があるのかについての良いユースケースをまだ見つけていません。ユースケースについて少し詳しく説明していただけますか？

CSS

CSSを介してEdgeを見つける方法を説明するJeff Claytonのこの投稿を見つけましたが、ChromeとSafariも検出されます。

/* Chrome, Safari, AND NOW ALSO the Windows 10 Edge Browser */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector { property:value; } 
}

しかし、UAを嗅ぐ必要がある場合：

Microsoft Edge UA文字列：

Mozilla / 5.0（Windows NT 10.0）AppleWebKit / 537.36（KHTML、like Gecko）Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

このブログ投稿で理由を詳しく説明します。

Neowinは最近、Windows 10、Spartan用のMicrosoftの新しいブラウザーがChrome UA文字列を使用することを報告しました、「Mozilla / 5.0（Windows NT 10.0; WOW64）AppleWebKit / 537.36（KHTML、like Gecko）Chrome / 39.0.2171.71 Safari / 537.36 Edge / 12.0 ″。 それは意図的に行われます。

また、文字列全体が「Edge / 12.0」で終わっていることにも気づくでしょう。Chromeではそうではありません。

これは、MicrosoftがIE 11で行ったことからのWindows 7でのレディカルな出発点ではないことを指摘しておきます。Mozilla/ 5.0（Windows NT 6.3; Trident / 7.0; rv：11.0）（Geckoのような）。役職。

ユーザーエージェントスニッフィングとは何ですか？

多くの場合、Web開発者はブラウザ検出のためにUAスニッフィングを行います。Mozillaはブログでそれをうまく説明しています：

異なるブラウザに異なるWebページまたはサービスを提供することは、通常、悪い考えです。Webは、使用しているブラウザーやデバイスに関係なく、誰でもアクセスできるようになっています。特定のブラウザーをターゲットにするのではなく、機能の可用性に基づいて段階的に機能を強化するWebサイトを開発する方法があります。

これは、ユーザーエージェントの履歴を説明するすばらしい記事です。

多くの場合、怠惰な開発者は、UA文字列をスニッフィングし、ビューアが使用していると信じているブラウザに基づいて、Webサイトのコンテンツを無効にします。Internet Explorer 8は開発者にとって共通のフラストレーションポイントであるため、開発者はユーザーがいずれかのバージョンのIEを使用しているかどうかを頻繁に確認し、機能を無効にします。

Edgeチームは、ブログでこれについてさらに詳しく説明しています。

すべてのユーザーエージェント文字列には、トークンだけでなく、「意味のある」バージョン番号など、実際に使用しているブラウザーよりも多くの情報が含まれています。

Internet Explorer 11のUA文字列：

GeckoのようなMozilla / 5.0（Windows NT 6.3; Trident / 7.0; rv：11.0）

Microsoft Edge UA文字列：

Mozilla / 5.0（Windows NT 10.0）AppleWebKit / 537.36（KHTML、like Gecko）Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

userAgentプロパティは、W3CディスカッションでPatrick H. Laukeによって「成長し続ける嘘のパック」として適切に説明されています。（「むしろ、実際に有用で正確な情報を少し伝えながら、古いUAスニッフィングコードがすぐに転用されない十分なレガシーキーワードを追加するバランシング行為。」）

Web開発者はUAスニッフィングをできるだけ回避することをお勧めします。最新のWebプラットフォーム機能は、ほとんどすべて簡単に検出できます。過去1年間に、Microsoft Edgeを検出するように更新されたUAスニッフィングサイトがいくつかありました。これは、レガシーIE11コードパスを提供するためだけです。Microsoft EdgeはIE11の動作ではなく「WebKit」の動作と一致するため、これは最良のアプローチではありません（Edge-WebKitの違いは、修正が必要なバグです）。

私たちの経験では、Microsoft Edgeはこれらのサイトの「WebKit」コードパスで最適に動作します。また、インターネットがさまざまなデバイスで利用できるようになったので、未知のブラウザが適切であると想定してください。サイトを現在知られている少数のブラウザのみで動作するように制限しないでください。これを行うと、サイトはほぼ確実に機能しなくなります。

結論

Chrome UA文字列を提示することで、これらの開発者が使用しているハックを回避して、ユーザーに最高のエクスペリエンスを提供できます。