How to Target IE 11 Specifically Using CSS Hacks

Targeting Internet Explorer 11 specifically with CSS can be achieved through a combination of Microsoft-specific rules. By leveraging these rules, it is possible to create hacks that apply styles only to IE 11 while ignoring other browsers.

One approach involves using the @media all and (-ms-high-contrast: none) rule. This rule targets all browsers that have high contrast mode disabled. Since this is a Microsoft-specific feature, it will only match IE 10 and IE 11.

Within this media query, you can apply styles specifically to IE 11 by using the *::-ms-backdrop selector. This selector targets the backdrop element that is created by certain focus states in IE 11.

For example, the following CSS code can be used to target IE 11 and change the color of an element with the class "foo":

@media all and (-ms-high-contrast:none)
{
  .foo { color: green } /* IE10 */
  *::-ms-backdrop, .foo { color: red } /* IE11 */
}

This approach works because the use of an invalid CSS selector, such as *::-ms-backdrop, causes IE 11 to ignore the entire selector block. By combining this invalid selector with a valid one, you can effectively target IE 11 without affecting other browsers.