Run CSS specific to Internet Explorer - Browser Hack

Referencing to the following blog post, we are going to make CSS targeting exclusively to IE browser, to make it work first we should know what are media queries.
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
For Ex:

<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

So below we will wrap the IE specific CSS rules in @media blocks and trick IE into rendering @media blocks that use media queries.

Targeting only IE browsers

Style rules defined in the following blocks will only be applied in IE, other browsers will ignore them.

IE 6 and 7
 @media screen\9 {
    body { background: red; }
}



IE 6, 7 and 8
@media \0screen\,screen\9 {
    body { background: green; }
}


IE 8
 @media \0screen {
    body { background: blue; }
}


IE 8, 9 and 10
@media screen\0 {
    body { background: orange; }
}



IE 9 and 10
@media screen and (min-width:0{{ content }}) {
    body { background: yellow; }
}


Generalizing it in a tabular format:


Where yes and no are styles support.

Rule	IE 6	IE 7	IE 8	IE 9	IE 10
@media screen\0 {…}	No	No	Yes	Yes	Yes
@media screen\9 {…}	Yes	Yes	No	No	No
@media \0screen {…}	No	No	Yes	No	No
@media \0screen\,screen\9 {…}	Yes	Yes	Yes	No	No
@media screen and (min-width:0\0) {…}	No	No	No	Yes	Yes

IE 11 and Edge support most of the recent styles and css3, so it rarely face any prob with the css styling and styling looks almost similar as of chrome or firefox so the case of those are not updated here.