Adding IE10 and IE11 Specific Styles

You may be aware that Internet Explorer 10 and newer no longer uses conditional comments. Why is this an issue?

In the past, due to the inability to display web pages in a normal way, it has always been necessary to create a stylesheet which applied to Internet Explorer only. The way this would be loaded is by a conditional comment. The comment would look like the following:

<!–[if IE]>
Special instructions for IE here, such as load an IE specific stylesheet

However, IE10 and IE11 no longer support this. Although they are a LOT better in rendering, you may still need to add some Internet Explorer specific styles.

We did a fair bit of research on this, and found the easiest way by far is the following. Simply add this in your CSS stylesheet:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
Add your IE10+ specific styles here

And it’s as simple as that!