VSCode snippet for IE11-only CSS and SCSS

Im 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, thats 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 thats done, hit tab to enter the curly braces to start adding your styles.

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

If you want to test out the override itself,Ive set up a codepen.

What does this mean?

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-backdropseems to work specifically for IE11. If you need to support even older versions of IE,Stackoverflowis haunted by the ghosts of devs past, all desperate to target whatever the latest version of Internet Explorer was at the time.

Its worth noting that usually when I see examples using*::-ms-backdrop, they are wrapped in a media query likemedia all and (-ms-high-contrast:none). In my experience, that hasnt 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 myactualsnippet 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 usedisplay: gridin modern browsers butdisplay: flexin 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