Как определить браузер Microsoft Edge через CSS?

Question

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

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

Answer 1

Это один должен работать:

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

подробнее см: обнаружение Browser Strangeness

Answer 2

Feature, функцию обнаружения, функцию обнаружения. До сих пор не найти подходящего варианта, почему кто-то должен будет обманывать или обнаруживать с помощью CSS. Не могли бы вы объяснить несколько деталей, прецедент?

CSS

Я нашел this post from Jeff Clayton, который показывает, как найти Грань с помощью CSS, но он также обнаруживает Chrome и Safari.

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

Но если вы MUST UA сопение:

Microsoft Гурт UA строка:

Mozilla/5.0 (Windows NT 10,0) AppleWebKit/537,36 (KHTML, как Gecko) Chrome/42,0 .2311.135 Safari/537,36 Край/12,10136

I detail why in this blog post.

Недавно Neowin сообщил, что новый браузер Microsoft для Windows 10, Spartan, использует строку UAU, «Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, как и Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 ".Это делается специально.

Вы также заметите, что вся строка заканчивается на «Edge/12.0», которой нет в Chrome.

Следует отметить, что это не краткий отход от того, что сделал Microsoft с IE 11, который в Windows 8 читает: Mozilla/5.0 (Windows NT 6.3, Trident/7.0; rv: 11.0), как Gecko, как объясняется в этом сообщении.

Что такое обманщик пользователя?

Часто веб-разработчики часто читают UA для обнаружения браузера. Mozilla хорошо объясняет это в своем блоге:

Обслуживание различных веб-страниц или сервисов для разных браузеров - это, как правило, плохая идея. Интернет предназначен для всех, независимо от того, какой браузер или устройство они используют. Существуют способы разработки вашего веб-сайта, чтобы постепенно улучшать себя на основе доступности функций, а не ориентироваться на определенные браузеры.

Here’s a great article explaining the history of the User Agent.

Часто, ленивые разработчики просто перехватывает для строки UA и отключить контент на своем веб-сайте на основе того, какой браузер они считают, что зритель использует.Internet Explorer 8 - это общая точка разочарования для разработчиков, поэтому они часто проверяют, использует ли пользователь ЛЮБОЙ вариант IE и отключает функции.

The Edge team details this even deeper on their blog.

Все агенты строка пользователь содержит больше информации о других браузерах, чем фактический браузер, который вы используете - не только лексемы, но и «значимый» номер версии.

Internet Explorer 11 в UA строка:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; с.в.: 11,0), как Gecko

Microsoft Гурт 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. («Или, скорее, балансирующий акт добавления достаточного количества устаревших ключевых слов, которые не будут сразу же иметь старый код UA-sniffing, все еще пытаясь передать немного полезной и точной информации».)

Мы рекомендуем что веб-разработчики избегают UA нюхать как можно больше; современные функции веб-платформы почти все можно обнаружить легко. За прошедший год мы увидели некоторые сайты U-sniffing, которые были обновлены для обнаружения Microsoft Edge ... только для того, чтобы предоставить ему устаревший код кода IE11. Это не лучший подход, поскольку Microsoft Edge соответствует поведению «WebKit», а не поведениям IE11 (любые различия Edge-WebKit - это ошибки, которые мы заинтересованы в исправлении).

По нашему опыту Microsoft Edge работает лучше всего на кодах путей WebKit на этих сайтах. Кроме того, с доступом в Интернет на более широком спектре устройств, пожалуйста, предположите, что неизвестные браузеры хороши - пожалуйста, не ограничивайте свой сайт работой только на небольшом наборе существующих известных браузеров. Если вы это сделаете, ваш сайт почти наверняка сломается в будущем.

Заключение

Представляя строку Chrome UA, мы можем работать вокруг писак эти разработчики используют, чтобы представить лучший опыт для пользователей.

Answer 3

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