[CSS] IE Style Target

Posted 2021-06-08 Answer1215

Ref: http://blogs.quovantis.com/browser-specific-hacks-for-frontend-developers/

Internet Explorer

Css hacks

:root .selector {

Property: Value\\9; color: red\\9;

}

Conditional Comments

<!–[if IE 9]> Internet Explorer 9 <![endif]–>

<!–[if lte IE 9]> Internet Explorer 9 or less <![endif]–>

<!–[if gte IE 9]> Internet Explorer 9 or greater <![endif]—>

For example:

<!–[if IE 9]>

<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />

<![endif]–>

IE 10 and above

_:-ms-lang(x), .selector { property:value; }

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {   

.ie10up {property: value;}

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {    

.ie10up {property: value;}

}

IE 11 and above

_:-ms-fullscreen, :root .ie11up { property:value; }//Works for IE 11 and above

*::-ms-backdrop, :root .selector { property:value; }//Works for IE 11

IE 11+, Microsoft Edge Browser

/* Put this code in external stylesheet: ie11up.css */

@charset “&lt;Any Modern Browser but MSIE 10- or FF 18- &gt;”;  _:-ms-lang(x), .selector { property:value; }

javascript hacks

var isIE = ‘behavior’ in document.documentElement.style && ‘- ms-user-select’ in document.documentElement.style;

var isIE = window.navigator.msPointerEnabled;

var isIE = document.body.style.msTouchAction !== undefined;