VSCode snippet for IE11-only CSS and SCSS

I’m very grateful that my current employer has chosen to put Internet Explorer 11 out to pasture, but I have not always been so lucky. Even as Microsoft prepares to end support this June, so long as a significant number of users refuse to upgrade, some devs will be forced to support it. A few years ago, I added a snippet for SCSS for projects that still needed the support, and have now adapted it for CSS to make it a little more flexible.

To use this snippet, add the following to your CSS snippets (on Mac, that’s Code -> Preferences -> User Snippets).

{
  "IE11": {
    "prefix": "IE11",
    "body": [
      " /* rule only parsed by IE11 (╯°□°)╯︵ ┻━┻*/",
      "*::-ms-backdrop, $1 {",
      "$0",
      "}"
    ],
    "description": "IE11 override styles"
  }
}

Now if you start typing “ie” in a css file, you should be prompted to choose “IE11” from your snippets, resulting in the following code:

/* rule only parsed by IE11 (╯°□°)╯︵ ┻━┻*/
*::-ms-backdrop,  {

}

When authoring, your cursor will first appear after the *::-ms-backdrop, ready to add the selector you want to style (for example, *::-ms-backdrop, .container). When that’s done, hit tab to enter the curly braces to start adding your styles.

(If you haven’t authored VS Code snippets before, the $1 and $0 in the snippet denote the tab stops for authoring. $1 is first and $0 is last. See the VSCode docs for more)

If you want to test out the override itself, I’ve set up a codepen.

Why do this?

Back when we thought IE6 was as bad as it could get, Microsoft supported conditional comments where we could print special messages (“upgrade your browser, you maniac”) or even link browser-specific stylesheets like so:

<!--[if IE 6]>
<link rel="stylesheet" href="i6sux.css">
<![endif]-->

However, these were dropped with newer versions of the browser, leaving developers to instead look for pseudo-classes that only exist in Internet Explorer. This is inherently fragile, and not every solution works for every version. In my example, *::-ms-backdrop seems to work specifically for IE11. If you need to support even older versions of IE, Stackoverflow is haunted by the ghosts of devs past, all desperate to target whatever the latest version of Internet Explorer was at the time.

It’s worth noting that usually when I see examples using *::-ms-backdrop, they are wrapped in a media query like media all and (-ms-high-contrast:none). In my experience, that hasn’t been necessary. I think it would also omit users that have high-contrast settings enabled from seeing your fixes, though I have not tested that myself.

What about SCSS?

I primarily used my snippet in SCSS files, so my actual snippet looks more like this:

{
  "IE11": {
    "prefix": "IE11",
    "body": ["   //rule only parsed by IE11 (╯°□°)╯︵ ┻━┻", "*::-ms-backdrop, & {", "$1", "}"],
    "description": "IE11 override styles"
  }
}

With this being a possible use case:

.container {
    display: grid;

     //rule only parsed by IE11 (╯°□°)╯︵ ┻━┻
    *::-ms-backdrop, & {
        display: flex;
    }
}

If you are unfamiliar with SCSS, the & represents a repeat of the parent selector, .container. This makes it a bit more modular and easier to re-use than just plain CSS. In the example above, it will use display: grid in modern browsers but display: flex in Internet Explorer 11, because grid is annoying in IE11.

Final Thoughts

If you take nothing from this post, at least take the table-throwing emoticon:

(╯°□°)╯︵ ┻━┻

this post was cross-posted from my site