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

92

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

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

css browser microsoft-edge

— Sameera Liyanage
소스

3

왜 그렇게 하시겠습니까?

2

당신은 거의 확실하게 그렇게 할 필요가 없습니다. 왜 그렇게하려고합니까?

— Patrick

37

이것은 가장 확실하게 필요한 것입니다. 글을 쓰는 시점에서 Edge는 IE를 포함한 다른 모든 브라우저에서 작동하는 유효한 CSS를 심각하게 엉망으로 만드는 변덕으로 가득 차 있습니다.

— Lawyerson 2015

참고 : 예제에서 사용 된 조건부 주석은 IE9 이하에서만 작동하므로 [IE 11 인 경우] 실제로 작동하지 않습니다.

— Sean McMillan

193

/ * Microsoft Edge Browser 12-18 (Chromium 이전의 모든 버전) * /

이것은 작동합니다.

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

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

— KittMedia
소스

8

Microsoft는 다른 브라우저와 상호 운용 할 수 있도록 MS Edge에서 가능한 한 많은 -ms 접두사 속성을 제거하기 위해 이동하고 있습니다. 따라서 이것은 미래에 작동한다고 보장되지는 않습니다. 다른 답변에서 언급했듯이 기능 감지가 훨씬 더 바람직합니다.

— 찰스 모리스 - MSFT

1

다시 테스트했는데 확실히 작동합니다. 데모 : jsfiddle.net/pd142446

— KittMedia

@ CharlesMorris-MSFT 동의합니다.하지만 그렇게해야하는 경우가 있습니다. 예를 들어, 포인터 이벤트 : 없음; IE 11 및 다른 모든 브라우저에서는 제대로 작동하지만 Edge에서는 작동하지 않습니다. 나는 그들이 -ms 접두사를 제거 할 때 그들이 우리가 처음에 다른 CSS를 사용하도록 강요했던 문제를 해결하기를 바랍니다. 이 경우 기능 감지는 모든 기능이 있기 때문에 실제로 도움이되지 않지만 Edge는 IE 11이 마침내 수정 된 일부 문제를 해결했습니다. KittMedia 좋은 대답, 감사합니다.

— Emil Borconi

8

이 해킹은 더 이상 작동하지 않지만 @supports (-ms-ime-align : auto) {.selector {property : value; }}

— Roffers 2016-08-04

1

@KittMedia가 Edge 14에서 제거되었습니다

— LJ Wadowski

21

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

— CodeGust
소스

1

@ r3wt _:-ms-lang(x), _:-webkit-full-screen,-MS Edge 만 해당 규칙을 "이해"하고 다른 브라우저에서는이를 무시합니다. 규칙 뒤에는 html 요소의 클래스 또는 ID 이름이 나오므로 여기에 적용됩니다. 즉, CSS 코드를 Edge 브라우저의 html 요소에만 적용해야하는 경우 해당 특수 규칙을 요소의 클래스 / ID 바로 앞에 두십시오.

— CodeGust 2019

따라서 브라우저는 모두 쉼표로 구분되어 있으므로이를 무시하고 선택자를 대상으로하지 않습니까? 일반적으로 ,CSS에서 선택자를 분리합니다. 그것이 이것이 혼란스러운 이유입니다. 왜 다른 브라우저가 이것을 무시하는지 이해가 안되며 ms-edge 만 쉼표 다음에 css를 선택기에 적용합니다

— r3wt

1

하나의 선택기가 유효하지 않은 경우 @ r3wt 전체 규칙 그룹이 무시됩니다. 여기 그림 css-tricks.com/…

— CodeGust 2019

@ r3wt 감사합니다! :) 당신은 처음에 대답의 일부가되어 있어야 세부 사항을 작성하는 저를 격려

— CodeGust

@AlexandrKazakov는 아마도 최신 Edge가 Chromium 엔진 (?)을 기반으로하기 때문에 어떤 버전을 가지고 있습니까?

— CodeGust 19

14

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

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

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

— 성숙한
소스

4

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

— 프리 야 나약
소스