For when you can't escape ie11 and Microsoft Edge

1/18/2020

Internet Explorer 11 and Microsoft Edge still persist... many people are stuck with them due to deals made long ago by their companies with Microsoft. If you are working on the frontend portion of a project with B2B users you will inevitably have to deal with these little monstrosities.

Not to worry! Here are a few CSS code snippets to target the Microsoft browsers starting with ie11:

_:-ms-fullscreen,
:root .className {
  width: 10px;
}

And in case you need to target Microsoft Edge:

/* MS edge only */
@supports (-ms-ime-align: auto) {
  .className {
    width: 10px;
  }
}

The latest versions of Microsoft Edge will be running the chromium engine which should make working with it considerably easier... as for ie11, we shall have to wait for it to disappear once the contracts expire...

Bonus! Targetting Safari 7+ only:

/* Safari 7.1+ */
_::-webkit-full-page-media,
_:future,
:root .className {
    width: 10px;
  }