Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to detect IE and Edge browsers in CSS?

Is there an standard way to detect IE and Edge browsers in css? I saw responses for detecting in javascript file but I am looking for one in css

like image 577
AlreadyLost Avatar asked Apr 20 '17 20:04

AlreadyLost


People also ask

Can I have both IE and Edge?

Yes, both Edge and IE11 come built-in to Windows 10 for PCs.

Is IE and Edge browser same?

The Edge icon, a blue letter "e," is similar to the Internet Explorer icon, but they are separate applications. To open Internet Explorer, open the Windows menu in the lower left corner of your screen and begin typing "Internet Explorer." IE will pop up in a search menu. Simply click on it to open.

Is IE 11 and Edge the same?

Microsoft Edge is the faster, more secure browser recommended browser by Microsoft. Support for Internet Explorer 11 has ended on June 15, 2022. If any site you visit needs Internet Explorer 11, you can reload it with Internet Explorer mode in Microsoft Edge.


2 Answers

For IE 9 and lower, load a conditional stylesheet:

<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IE 10 and up doesn't support this, so you have to use media queries:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS */
}

For Edge 12-15:

@supports (-ms-accelerator:true) {
   /* Edge 12+ CSS */ 
}

EDIT

For Edge 16+

@supports (-ms-ime-align:auto) {
    /* Edge 16+ CSS */ 
}
like image 62
Claire Avatar answered Oct 19 '22 04:10

Claire


The accepted answer for Edge isn't working in Edge 16.

This alternative works:

@supports (-ms-ime-align:auto) {
    /* IE Edge 16+ CSS */ 
}

Via https://stackoverflow.com/a/32202953

(Adding new answer as I don't have comment privileges.)

like image 11
Jarrod Drysdale Avatar answered Oct 19 '22 06:10

Jarrod Drysdale