Bagaimana cara mengidentifikasi browser Microsoft Edge melalui CSS?

92

Saya sedang mengembangkan aplikasi web dan saya perlu mengidentifikasi browser Microsoft Edge secara terpisah dari yang lain, untuk menerapkan gaya yang unik. Apakah ada cara untuk mengidentifikasi Edge dengan menggunakan CSS? Seperti,

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->
css browser microsoft-edge Sameera Liyanage
sumber
3
Mengapa Anda ingin melakukan itu?
2
Anda hampir pasti tidak perlu melakukan itu. Mengapa Anda mencoba melakukannya?
Patrick
37
Ini pasti sesuatu yang mungkin Anda butuhkan. Pada saat penulisan, Edge masih penuh dengan quircks yang akan sangat mengacaukan CSS valid yang berfungsi di setiap browser lain, termasuk IE.
Pengacara
Catatan: Komentar bersyarat yang digunakan dalam contoh hanya berfungsi untuk IE9 dan di bawahnya, jadi [jika IE 11] tidak akan benar-benar berfungsi.
Sean McMillan

Jawaban:

193

/ * Microsoft Edge Browser 12-18 (Semua versi sebelum Chromium) * /

Yang ini harus bekerja:

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

Untuk lebih lanjut, lihat: Keanehan Browser

KittMedia
sumber
8
Microsoft pindah untuk menghapus sebanyak mungkin properti dengan awalan -ms di MS Edge agar dapat dioperasikan dengan browser lain. Dengan demikian, ini jauh dari jaminan akan berhasil di masa depan. Seperti yang disebutkan dalam jawaban lain, deteksi fitur jauh lebih disukai.
Charles Morris - MSFT
1
Baru saja mengujinya lagi dan itu pasti berhasil. Demo: jsfiddle.net/pd142446
KittMedia
@ CharlesMorris-MSFT Saya setuju dengan Anda, tetapi ada beberapa kasus ketika kita hanya perlu melakukan itu. Misalnya, pointer-events: none; berfungsi dengan baik di IE 11 dan semua browser lainnya, tetapi berhenti berfungsi di Edge. Saya berharap pada saat mereka menghilangkan awalan -ms mereka juga akan memperbaiki masalah yang memaksa kita untuk menggunakan CSS yang berbeda di tempat pertama. Dalam kasus ini, deteksi fitur tidak akan terlalu membantu, karena semua fitur ada di sana, namun Edge telah merusak beberapa hal yang akhirnya diperbaiki IE 11. KittMedia jawaban yang bagus, terima kasih.
Emil Borconi
8
Peretasan ini tidak lagi berfungsi, namun yang ini berfungsi pada @supports (-ms-ime-align: auto) {.selector {property: value; }}
Roffers
1
@KittMedia telah dihapus di 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; }

Bagus sekali!

// 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
sumber
1
@ r3wt _:-ms-lang(x), _:-webkit-full-screen,- hanya MS Edge yang "memahami" aturan itu, browser lain mengabaikannya. Aturan ini diikuti dengan kelas atau nama id dari elemen html dan diterapkan padanya. Dengan kata lain, jika kode css perlu diterapkan ke elemen html di browser Edge saja, letakkan aturan khusus itu tepat sebelum class / id elemen Anda.
CodeGust
jadi browser tidak akan mengabaikannya dan menargetkan pemilih, karena semuanya dipisahkan oleh koma? biasanya ,selektor terpisah di css. itulah mengapa ini membingungkan. saya masih tidak mengerti mengapa browser lain mengabaikan ini dan hanya ms-edge yang akan menerapkan css ke pemilih setelah koma
r3wt
1
@ r3wt jika satu pemilih tidak valid, seluruh grup aturan akan diabaikan. Diilustrasikan di
CodeGust
@ r3wt terima kasih! :) Anda mendorong saya untuk menulis detail yang seharusnya menjadi bagian dari jawaban pada awalnya
CodeGust
@AlexandrKazakov mungkin, itu karena Edge terbaru didasarkan pada mesin Chromium (?) Versi mana yang Anda miliki?
CodeGust
14

Lebih akurat untuk Edge (tidak termasuk IE 15 terbaru) adalah:

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

@supports (-ms-ime-align:auto) { ... } berfungsi untuk semua versi Edge (saat ini hingga IE15).

dewasa
sumber
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
sumber