Home >Web Front-end >CSS Tutorial >How Can I Use CSS Hacks to Target Only Internet Explorer 11?

How Can I Use CSS Hacks to Target Only Internet Explorer 11?

Linda HamiltonOriginal: 2024-11-28 14:46:14678browse

Writing CSS Hacks Specifically for IE 11

To target IE 11 with CSS hacks, you can utilize Microsoft-specific CSS rules. The following combination filters for IE11:

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

This filter works because user agents that cannot parse the selector (i.e., it's not valid CSS 2.1) will ignore the selector and the following declaration block as well.

Example:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

The above is the detailed content of How Can I Use CSS Hacks to Target Only Internet Explorer 11?. For more information, please follow other related articles on the PHP Chinese website!

css for Filter this microsoft

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Can CSS Grid Layout Properties Be Animated?Next article：Can CSS Grid Layout Properties Be Animated?

See more

How Can I Use CSS Hacks to Target Only Internet Explorer 11?

Related articles