CSS를 통해 Microsoft Edge 브라우저를 식별하는 방법은 무엇입니까?

CSS를 통해 Microsoft Edge 브라우저를 식별하는 방법은 무엇입니까?

---

웹 응용 프로그램을 개발 중이며 고유 한 스타일을 적용하려면 Microsoft Edge의 브라우저를 다른 브라우저와 별도로 식별해야합니다. CSS를 사용하여 Edge를 식별하는 방법이 있습니까? 처럼,

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

---

이것은 작동합니다.

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

자세한 내용은 브라우저 이상을 참조하십시오.

---

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

---

Edge (최신 IE 15 포함 안 함)에 대한 더 정확한 것은 다음과 같습니다.

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

@supports (-ms-ime-align:auto) { ... } 모든 Edge 버전에서 작동합니다 (현재 IE15까지).

---

기능 감지, 기능 감지, 기능 감지. 누군가가 CSS로 스니핑하거나 탐지해야하는 이유에 대한 좋은 사용 사례를 아직 찾지 못했습니다. 사용 사례에 대해 조금 자세히 설명해 주시겠습니까?

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은 최근에 Microsoft의 Windows 10 용 새 브라우저 인 Spartan이 Chrome UA 문자열 인 “Mozilla / 5.0 (Windows NT 10.0; WOW64) AppleWebKit / 537.36 (Gecko와 같은 KHTML) Chrome / 39.0.2171.71 Safari / 537.36 Edge / 12.0을 사용한다고보고했습니다. ″. 그것은 의도적으로 수행됩니다.

또한 전체 문자열이 "Edge / 12.0"으로 끝나는 것을 알 수 있지만 Chrome은 그렇지 않습니다.

나는 이것이 마이크로 소프트가 윈도우 8에서 읽은 IE 11에서했던 것과는 다른 것이 아니라는 점을 지적해야한다 : Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv : 11.0) like Gecko, like this in this 우편.

사용자 에이전트 스니핑이란 무엇입니까?

종종 웹 개발자는 브라우저 감지를 위해 UA 스니핑을합니다. Mozilla는 블로그에서 잘 설명합니다.

다른 웹 페이지 나 서비스를 다른 브라우저에 제공하는 것은 일반적으로 나쁜 생각입니다. 웹은 사용하는 브라우저 나 장치에 관계없이 모든 사람이 액세스 할 수 있도록되어 있습니다. 특정 브라우저를 대상으로하는 것이 아니라 기능의 가용성을 기반으로 점진적으로 향상되도록 웹 사이트를 개발하는 방법이 있습니다.

다음은 사용자 에이전트의 역사를 설명하는 훌륭한 기사입니다.

종종 게으른 개발자는 UA 문자열을 스니핑하고 뷰어가 사용하고 있다고 생각하는 브라우저에 따라 웹 사이트의 콘텐츠를 비활성화합니다. 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

The userAgent property has been aptly described as “an ever-growing pack of lies” by Patrick H. Lauke in W3C discussions. (“or rather, a balancing act of adding enough legacy keywords that won’t immediately have old UA-sniffing code falling over, while still trying to convey a little bit of actually useful and accurate information.”)

We recommend that web developers avoid UA sniffing as much as possible; modern web platform features are nearly all detectable in easy ways. Over the past year, we’ve seen some UA-sniffing sites that have been updated to detect Microsoft Edge… only to provide it with a legacy IE11 code path. This is not the best approach, as Microsoft Edge matches ‘WebKit’ behaviors, not IE11 behaviors (any Edge-WebKit differences are bugs that we’re interested in fixing).

In our experience Microsoft Edge runs best on the ‘WebKit’ code paths in these sites. Also, with the internet becoming available on a wider variety of devices, please assume unknown browsers are good – please don’t limit your site to working only on a small set of current known browsers. If you do this, your site will almost certainly break in the future.

Conclusion

By presenting the Chrome UA string, we can work around the hacks these developers are using, to present the best experience to users.

참고URL : https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css