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


92

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

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

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

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


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/


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);
         }
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.