Як визначити браузер Microsoft Edge за допомогою CSS?

92

Я розробляю веб-додаток, і мені потрібно визначити браузер Microsoft Edge окремо від інших, щоб застосувати унікальний стиль. Чи є спосіб ідентифікувати Edge за допомогою CSS? Так як,

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

css browser microsoft-edge

— Лієнаж Самеери
джерело

3

Чому ти хочеш це зробити?

2

вам майже напевно не потрібно цього робити. Чому ви намагаєтесь це зробити?

— Патрік

37

Це, безсумнівно, може знадобитися вам. На момент написання статті Edge все ще сповнений хитрощів, які суттєво зіпсують дійсний CSS, який працює у всіх інших браузерах, включаючи IE.

— Lawyerson

Примітка: Умовні коментарі, використані у прикладі, працюють лише для IE9 і нижче, тому [якщо IE 11] насправді не працюватиме.

— Шон Макміллан,

193

/ * Microsoft Edge Browser 12-18 (усі версії до Chromium) * /

Це має працювати:

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

Детальніше див .: Дивовижність браузера

— KittMedia
джерело

8

Microsoft намагається видалити якомога більше префіксних властивостей -ms у MS Edge, щоб бути сумісними з іншими браузерами. Таким чином, це далеко не гарантовано працюватиме в майбутньому. Як зазначалося в інших відповідях, виявлення особливостей є набагато кращим.

— Чарльз Морріс - MSFT

1

Просто протестуйте ще раз, і це точно працює. Демо: jsfiddle.net/pd142446

— KittMedia

@ CharlesMorris-MSFT Я згоден з вами, але бувають випадки, коли нам просто потрібно це зробити. Наприклад, покажчик-події: немає; чудово працює на IE 11 та всіх інших браузерах, але перестає працювати на Edge. Сподіваюсь, до того часу, коли вони усунуть префікс -ms, вони також виправлять проблеми, які змусили нас використовувати різні CSS. У цьому випадку виявлення функцій насправді не допоможе, оскільки всі функції є, проте Edge зламав деякі речі, які IE 11 нарешті виправив. KittMedia приємна відповідь, дякую.

— Еміль Борконі

8

Цей хак більше не працює, однак цей робить @supports (-ms-ime-align: auto) {.selector {властивість: значення; }}

— Рофферс

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 і тому застосовується до нього. Іншими словами, якщо код CSS потрібно застосувати до елемента html лише у браузері Edge, поставте це спеціальне правило безпосередньо перед класом / ідентифікатором вашого елемента.

— CodeGust

отже, браузер не буде просто ігнорувати їх і націлювати на селектор, оскільки всі вони розділені комою? зазвичай ,окремі селектори в css. тому це бентежить. я все ще не розумію, чому інші браузери ігнорують це, і лише ms-edge застосовує css до селектора після коми

— r3wt

1

@ r3wt, якщо один селектор недійсний, вся група правил ігнорується. Ілюстровано тут css-tricks.com/…

— CodeGust

@ r3wt дякую! :) Ви закликали мене написати подробиці, які мали б бути частиною відповіді спочатку

— CodeGust

@AlexandrKazakov можливо, це тому, що остання версія Edge заснована на двигуні Chromium (?), Яку версію ви маєте?

— CodeGust

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

— Прия Найак
джерело