CSS hacks to target latest IE 11 and Edge versions.

Web browsers have come a long way over the years, and CSS browser compatibility has improved considerably on the latest versions. However, you will come across CSS issues that require browser specific targeting. Thankfully, these situations are getting less frequent, but some still might pop-up, especially with Internet Explorer.

A handy little tool which can help you determine whether a CSS property is supported or not by a browser is the “Can I Use” site.

No matter how far things improve, there would still be some minor issues that crop up. Personally, most of the issues I’ve come across had to do with IE, even the latest IE 11 and Edge. So, it’s always good to know a couple of tricks to target these specific browsers.

After some research, I’ve found some good CSS hacks to target The latest (IE)  Edge versions on Jeff Clayton’s blog, on a post titled: CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser. I’ve shown some examples from it below, but I recommend reading the full article to get a good understanding of this.

Almost all these hacks depend on the @supports CSS at-rule. The @supports rule makes it possible to identify specific CSS features supported by browsers and target specific styles for them.

The main properties used with the @supports rule to identify Edge browsers, depending on whether they are active or not, are -ms-ime-align:auto-ms-accelerator:true, and -webkit-text-stroke:initial.

-ms-ime-align property: Aligns the Input Method Editor (IME) candidate window box relative to the element on which the IME composition is active.

-ms-accelerator property: Sets or retrieves a string that indicates whether the object represents a keyboard shortcut.

-webkit-text-stroke: specifies the width and color of strokes for text characters.

Below are some samples taken from Jeff Clayton’s article.

/* Microsoft Edge Browser 12+ (All) - @supports method */

@supports (-ms-ime-align:auto) {
  .selector { property:value; }

/* Microsoft Edge Browser 15+ - @supports method */

@supports (-ms-ime-align:auto)
and (-webkit-text-stroke:initial) {
  .selector { property:value; }

Read the article to get the full list.

When it comes to IE 10 and 11, there is a good article on Philip Newcomer’s blog, titled How to Target Internet Explorer 10 and 11 in CSS.

If you want to stick with an CSS only option, you can use media queries with -ms-high-contrast to target IE 10 and IE 11. -ms-high-contrast media feature describes whether an application is being displayed in high contrast mode, and is only available for IE 10+.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */

I try to forget there were dark days that goes beyond IE 10, but there are still some rare stone age creatures who still use the older versions. So it is a possibility that you might need to cover those bases too. This is a handy list of IE hacks.

Hopefully, a day and age will come where we can get rid of browser targeting altogether.

Update – 30/11/2018

Recently came to my notice that using the below code doesn’t seem to work anymore to target IE11.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.selector { property:value; }

After some searching, turned out you should only use the following.

@media screen and (-ms-high-contrast: none) {
	.selector { property:value; }

Quick Links

2 thoughts on “CSS hacks to target latest IE 11 and Edge versions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s