web-dev-qa-db-ja.com

CSSを介してMicrosoft Edgeブラウザーを識別する方法

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

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
cssbrowsermicrosoft-edge
72
Sameera Liyanage

これは動作するはずです：

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

詳細については、 Browser Strangeness

148
KittMedia
/* Microsoft Edge Browser 12+ (All) - 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/

12
CodeGust

Edge（最新のIE 15を含めない）のより正確な値は次のとおりです。

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

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

6
mature

特徴検出、特徴検出、特徴検出。誰かがUAを探知する必要があるか、CSSで検出する必要があるかについて、まだ良いユースケースを見つけていない。ユースケースについて少し詳しく説明していただけますか？

CSS

Jeff Claytonからのこの投稿 を見つけました。これは、CSS経由でEdgeを見つける方法を示していますが、ChromeおよびSafariも検出します。

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

しかし、スニッフィングする必要がある場合：

Microsoft Edge UA文字列：

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

このブログ投稿で詳細を説明します

Neowinは最近、MicrosoftのWindows 10用の新しいブラウザSpartanが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″。これは意図的に行われます。

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

これは、MicrosoftがIE 11で行ったことからの再出発ではないことを指摘する必要があります。Windows8では、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文字列：

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

Microsoft Edge UA文字列：

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

UserAgentプロパティは、W3Cの議論の中でパトリックH.ラウケによって「嘘の拡大し続けるパック」として適切に説明されています。 （または、むしろ、古いUAスニッフィングコードがすぐに倒れることなく、実際に有用で正確な情報を少しでも伝えようとする十分なレガシーキーワードを追加するバランスのとれた行為です。）

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

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

結論

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

3
Dave Voyles - MSFT