DEV Community

Stacey
Stacey

Posted on

2 2

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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,  {

}
Enter fullscreen mode Exit fullscreen mode

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]-->
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

With this being a possible use case:

.container {
    display: grid;

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

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay