Microsoft Edge tarayıcısı CSS ile nasıl belirlenir?

92

Web uygulaması geliştiriyorum ve benzersiz stil uygulamak için Microsoft Edge'in tarayıcısını diğerlerinden ayrı olarak tanımlamam gerekiyor. Edge'i CSS kullanarak tanımlamanın bir yolu var mı? Tıpkı,

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

css browser microsoft-edge

— Sameera Liyanage
kaynak

3

Neden bunu yapmak istiyorsun?

2

neredeyse kesinlikle bunu yapmanıza gerek yok. Neden yapmaya çalışıyorsun

— Patrick

37

Bu kesinlikle ihtiyacınız olabilecek bir şey. Yazma sırasında Edge, IE de dahil olmak üzere diğer tüm tarayıcılarda çalışan geçerli CSS'yi ciddi şekilde bozacak tuhaflıklar ile doludur.

— Lawyerson

Not: Örnekte kullanılan koşullu yorumlar yalnızca IE9 ve altı için çalışır, bu nedenle [IE 11 ise] gerçekten çalışmayacaktır.

— Sean McMillan

193

/ * Microsoft Edge Browser 12-18 (Chromium'dan önceki tüm sürümler) * /

Bu çalışmalı:

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

Daha fazla bilgi için: Browser Strangeness

— KittMedia
kaynak

8

Microsoft, diğer tarayıcılarla birlikte çalışabilmesi için MS Edge'de mümkün olduğunca çok sayıda -ms önekli özelliği kaldırmaya devam ediyor. Bu nedenle, bunun gelecekte işe yaraması garanti olmaktan uzaktır. Diğer cevaplarda da belirtildiği gibi, özellik tespiti çok daha fazla tercih edilir.

— Charles Morris - MSFT

1

Tekrar test ettim ve kesinlikle işe yarıyor. Demo: jsfiddle.net/pd142446

— KittMedia

@ CharlesMorris-MSFT Size katılıyorum, ancak bunu yapmamız gereken durumlar var. Örneğin, işaretçi olayları: yok; IE 11 ve diğer tüm tarayıcılarda iyi çalışıyor, ancak Edge'de çalışmayı durduruyor. Umarım -ms önekini kaldırdıklarında, bizi ilk etapta farklı CSS kullanmaya zorlayan sorunları da çözerler. Bu durumlarda, özellik algılama gerçekten yardımcı olmaz, çünkü tüm özellikler orada, ancak Edge, IE 11'in sonunda düzelttiği bazı şeyleri bozdu. KittMedia güzel cevap, teşekkürler.

— Emil Borconi

8

Bu hack artık çalışmıyor, ancak bu @supports (-ms-ime-align: auto) {.selector {özellik: değer; }}

— Roffers

1

@KittMedia, Edge 14'te kaldırıldı

— LJ Wadowski

21

/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

Bu harika çalışıyor!

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

1

@ r3wt _:-ms-lang(x), _:-webkit-full-screen,- yalnızca MS Edge bu kuralı "anlar", diğer tarayıcılar bunu görmezden gelir. Kuralın ardından bir html öğesinin sınıf veya kimlik adı gelir ve bu nedenle ona uygulanır. Başka bir deyişle, bir css kodunun yalnızca Edge tarayıcısında bir html öğesine uygulanması gerekiyorsa, bu özel kuralı öğenizin sınıfının / kimliğinin hemen önüne koyun.

— CodeGust

yani tarayıcı, virgülle ayrılmış olduğundan, bunları yok saymaz ve seçiciyi hedef almaz. tipik olarak ,css'deki seçicileri ayırır. bu yüzden kafa karıştırıcı. Diğer tarayıcıların neden bunu görmezden

— geldiğini

1

@ r3wt eğer bir seçici geçersizse, tüm kural grubu göz ardı edilir. Burada gösterilmiştir css-tricks.com/…

— CodeGust

@ r3wt teşekkür ederim! :) başlangıçta cevabın bir parçası olması gereken ayrıntıları

— yazmam

@AlexandrKazakov muhtemelen, çünkü en son Edge Chromium motoruna dayanıyor (?) Hangi sürüme sahipsiniz?

— CodeGust

14

Edge için daha doğru (en son IE 15'i dahil etmeyin):

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

@supports (-ms-ime-align:auto) { ... } tüm Edge sürümleri için çalışır (şu anda IE15'e kadar).

— olgun
kaynak

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

— Priya Nayak
kaynak