Monday, December 19, 2016

Conditional comments HTML for internet explorer 10

One method for displaying a message to users running outdated versions of internet explorer is via the use of conditional comments. For example the following block would only show for version 9 and below of internet explorer:
<!--[if lte IE 9]>
<p> Download Chrome today!</p>
<![endif]-->
 The problem with wanting to target version 10 of internet explorer is that it does not follow conditional comments and instead treats them as a standard comment. Therefore a CSS media query needs to be used to target this browser version.
@media all and (-ms-high-contrast: none) {
    .myClass{ display:block; } /* IE10 */
    *::-ms-backdrop, .myClass{ display: none } /* IE11 */
}
The example above will display a block when the browser is internet explorer 10 and hide it when internet explorer 11. Of course this block would be hidden by default and shown if necessary.

No comments:

Post a Comment