จะระบุเบราว์เซอร์ Microsoft Edge ผ่าน CSS ได้อย่างไร

92

ฉันกำลังพัฒนาเว็บแอปพลิเคชันและฉันจำเป็นต้องระบุเบราว์เซอร์ของ Microsoft Edge แยกจากตัวอื่นเพื่อใช้สไตล์ที่เป็นเอกลักษณ์ มีวิธีระบุ Edge โดยใช้ CSS หรือไม่? เหมือนกับ,

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

css browser microsoft-edge

— Sameera Liyanage
แหล่งที่มา

3

ทำไมคุณถึงต้องการทำเช่นนั้น?

2

คุณแทบไม่จำเป็นต้องทำเช่นนั้น ทำไมคุณถึงพยายามทำ

— Patrick

37

นี่คือสิ่งที่คุณอาจต้องการอย่างแน่นอนที่สุด ในขณะที่เขียน Edge ยังคงเต็มไปด้วยความแปลกประหลาดที่จะทำให้ CSS ที่ถูกต้องซึ่งใช้งานได้กับทุกเบราว์เซอร์อื่น ๆ รวมถึง IE

— Lawyerson

หมายเหตุ: ข้อคิดเห็นแบบมีเงื่อนไขที่ใช้ในตัวอย่างใช้ได้เฉพาะกับ IE9 และต่ำกว่าดังนั้น [ถ้า IE 11] จะใช้งานไม่ได้จริง

— Sean McMillan

193

/ * Microsoft Edge Browser 12-18 (ทุกเวอร์ชันก่อน Chromium) * /

อันนี้ควรใช้งานได้:

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

สำหรับข้อมูลเพิ่มเติมโปรดดู: Browser Strangeness

— KittMedia
แหล่งที่มา

8

Microsoft กำลังดำเนินการลบคุณสมบัติที่มีคำนำหน้า -ms ให้มากที่สุดเท่าที่จะเป็นไปได้ใน MS Edge เพื่อให้สามารถทำงานร่วมกับเบราว์เซอร์อื่นได้ ดังนั้นจึงไม่สามารถรับประกันได้ว่าจะทำงานในอนาคต ดังที่ได้กล่าวไว้ในคำตอบอื่น ๆ การตรวจจับคุณลักษณะเป็นที่ต้องการมากกว่า

— Charles Morris - MSFT

1

เพิ่งทดสอบอีกครั้งและได้ผลแน่นอน Demo: 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; }}

— รอบ

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 เท่านั้นให้วางกฎพิเศษนั้นไว้หน้าคลาส / id ขององค์ประกอบของคุณ

— CodeGust

ดังนั้นเบราว์เซอร์จะไม่เพิกเฉยต่อสิ่งเหล่านั้นและกำหนดเป้าหมายตัวเลือกเนื่องจากทั้งหมดถูกคั่นด้วยลูกน้ำ? โดยทั่วไปจะ,แยกตัวเลือกใน css นั่นเป็นสาเหตุที่ทำให้เกิดความสับสน ฉันยังไม่เข้าใจว่าทำไมเบราว์เซอร์อื่นถึงไม่สนใจสิ่งนี้และมีเพียง ms-edge เท่านั้นที่จะใช้ css กับตัวเลือกหลังเครื่องหมายจุลภาค

— r3wt

1

@ r3wt หากตัวเลือกหนึ่งไม่ถูกต้องกลุ่มกฎทั้งหมดจะถูกละเว้น ภาพประกอบที่นี่css-tricks.com/…

— CodeGust

@ r3wt ขอบคุณ! :) คุณสนับสนุนให้ฉันเขียนรายละเอียดที่ควรเป็นส่วนหนึ่งของคำตอบในตอนแรก

— CodeGust

@AlexandrKazakov อาจเป็นเพราะ Edge ล่าสุดใช้ Chromium engine (?) รุ่นไหนที่คุณมี?

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

— ปริยานาก
แหล่งที่มา