CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser

These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

Update: These are tested in Windows 10’s release version.

The Production Version of Windows 10 has just been released which includes the new Edge (Formerly the Spartan Project) web browser. The CSS rendering engine has differences. In 2010 there was a push for Microsoft to add -webkit- prefixes to the CSS settings but that was thrown out after a little time in the sun.

Windows phones supporting Windows 8.1 Mobile (using Internet Explorer 11) and now also Windows 10 have decided to bring back that idea and alias multiple webkit prefixes to match the standard CSS features. What this means is that many of the CSS hacks for Chrome or Safari that are in the wild are also be picked up by Microsoft’s Edge Browser.

The final CSS for Windows 10 and the new Edge Browser is complete at this time, and I have made the updates here since the preview versions which combined MSIE 11 and Edge capabilities in many cases. For convenience-of-number-order, the Microsoft Edge browser starts numerically at version 12.

So for the Windows 10’s Microsoft Edge Browser here are some that target JUST that browser: (newer one)

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

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

This one is now targeted to versions 12-13 in spring/summer 2016, the preview ’14’ does not use it so unless they do not actually remove support in the release version of 14, the final stats on this one are as follows. I use it later to target version 13 only.

/* Microsoft Edge Browser 12-13 - @supports method */

@supports (-ms-accelerator:true) {
  .selector { property:value; } 

And for those who like one-liners as well:

/* Microsoft Edge Browser 12+ (All) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

Additional numbered versions follow:

/* Microsoft Edge Browser 13+ - one-liner method */

_:-ms-lang(x), _::-webkit-meter-bar, .selector { property:value; }
/* Microsoft Edge Browser 13+ - @supports method */

@supports (-ms-ime-align:auto) and (color:unset) {
  .selector { property:value; } 
/* Microsoft Edge Browser 13 - @supports method */

@supports (-ms-accelerator:true) and (color:unset) {
  .selector { property:value; } 
/* Microsoft Edge Browser 12 */

@supports (-ms-accelerator:true) and (not (color:unset)) {
  .selector { property:value; } 

If you had been following my postings during the Windows 10 Technical Preview (back when they were calling the ‘Edge’ browser ‘Project Spartan’, you may recall I had a third one I developed and was working on (a media query.) The end result is how these things work – during the preview process it worked, and several worked for both Internet Explorer 11 AND Microsoft Edge. When the final version of Windows 10 was released, these two still were effective but the third one only worked on the preview version. I am not concerned with ‘preview-only’ hacks, but only with ones that affect the browser world as a whole – so I removed it and only the two final working versions of my CSS hacks for the MS Edge Browser are here.

It has been pointed out in the comments below that it can be handy to have Internet Explorer and Microsoft Edge combined into one hack. Thanks got to Mrunal for the suggestion. This one works for that purpose:

/* Internet Explorer 10+, Microsoft Edge Browser */

_:-ms-lang(x), .selector { property:value; } 

I was looking at MS Documentation for Internet Explorer 11 and found an interesting remark about having fixed an error in Internet Explorer 10 and below where it had been failing to load external style sheets if there is a malformed @charset line included, such as with angle brackets. The _:-ms-lang(x) hack I created can be placed in an external stylesheet to create MSIE 11+ AND Edge styles like so:

/* Internet Explorer 11+, Microsoft Edge Browser */
/* Put this code in external stylesheet: ie11up.css */

@charset "<Any Modern Browser but MSIE 10- or FF 18- >";

_:-ms-lang(x), .selector { property:value; } 

The external style sheet also loads using Firefox 19 and newer or the ms-lang hack would not be required. For further notes, I have yet to test it in extremely old versions of Safari at this time. Chrome 1+ (all), Firefox 19+, Internet Explorer 11+, and Microsoft Edge 12+ and modern versions of Safari load the sheet.

The above combination above works as planned only for Internet Explorer 11+ and Microsoft Edge 12+ (all versions of Edge).

For other specific Internet Explorer Hacks, those can be found on my Internet Explorer CSS Hacks page.

Like the majority of my testing, they can be viewed live here on my live CSS Hacks testing page:


IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for BrowserHacks.com for the purpose of repairing web sites. PS-- CSS hacks are fun, but please attempt good CSS first unless in a bind.

Tagged with: , , , , , , , , , , , , , ,
Posted in Computers, Cool Code, CSS, CSS Hacks, Edge, Edge-All, Hacks, Internet Explorer, Microsoft, Software, Spartan, Spartan-All, Tech, Web, Web Browser, Web Browsers, Windows, Windows 10
20 comments on “CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser
  1. Jeff Clayton says:

    Windows 10 is now finally available – here are CSS hacks that target the new Edge Browser!


  2. […] was being combined and edited to break away from Internet Explorer 11. The result of those is in my CSS hacks for MS Edge page. Looking at these there us a simple fix (a non-edge wrapper) we can use. Here is a nested […]


  3. Martin says:

    Hi Jeff,

    Excellent site, wish I had found it sooner.

    I’m looking for a way to exclude Edge from ‘@media screen and (-webkit-min-device-pixel-ratio:0) {‘ ,.but without shutting out Safari 8 and before?

    Apart from reversing all my webkit specific CSS inside a subsequent ‘@supports (not (-ms-accelerator:true))’ , the only other option I can think of is to use some sort of :not(edge) selector on each line within the webkit media query.

    Is there anyway to use ‘_:-ms-lang(x)’ in a not context?

    As a matter of interest:
    – what does the hyphen colon (-:) do?
    – any idea of the likely longevity for -ms-accelerator?



  4. Jeff Clayton says:

    I can answer these in several messages. The underscore or hyphen at the beginning is recognized by browsers to mean that there is a proprietary CSS call (-o- for opera, -ms- for microsoft.. etc…) – and any future companies, so it works and has to be allowed for CSS rules. Often a * can be used instead (meaning: any tag for any browser) — the : or :: are for pseudo-classes and pseudo-elements. They aren’t part of the hyphen/underscore even though it may appear that way.

    -ms-accelerator is new, for hacks to work always assume that things may not last — CSS hacks should be considered a temporary fix by that token, like duct tape on a pipe. It works.. for now, until you replace with a better pipe.


    • Jeff Clayton says:

      As far as the not() context, some things work and some things do not. The hacks tend to work based on ‘if there is even support’ for a tag or element, which is different than if the element or tag is present on the page or not. The ‘underscore’ hacks I write are really like a fledgeling version of the @supports feature. If the browser recognizes the command, it will issue the CSS. If it does not exist in the browser’s programming, then it will not. There is more to the way the hack works than that, and I chose (x) where I could have chosen (c) or (en) or anything else for that matter.

      Summary: all it does is say ‘if the browser has support for languages’ for that one to work. It does not care which. I will give you a hint that the following comma is what allows the ‘anything goes’ aspect to work properly.


    • Martin says:

      Thanks for such prompt replies.

      It’s the underscore before the colon I that meant to ask about. Presumably :-ms-lang(x), .selector { property:value; } would be valid CSS in IE/Edge i.e. without the underscore.?

      Looks like I’m going to have to repeat a lot of code in order to keep Safari in.


      • Jeff Clayton says:

        I figured you didn’t understand, the underscore before the colon is what I was referring to is the code for ‘a proprietary moniker is coming’ such as -o- or -ms- or -webkit-. Try replacing it with nothing, with *:-ms-lang(x), or body:-ms-lang(x), or html:-ms-lang(x), etc… html and body have different meanings even than :root:-ms-lang(x). Subtile differences in each. Just test them. Often you are very right and they do the same job. If like lang(x), -ms-lang(x) worked for things before ie9, then :root:-ms-lang(x) would rule that out for example.


  5. Martin says:

    Okay, thanks for your time. Apologies for not grasping that the first time.


  6. Mrunal M says:

    Hi Jeff,

    Thanks for these css hacks.
    It possible to combine multiple css hacks in one line. Means to apply same css only in IE11 and Edge, then currently I have to write it twice. So just want to know.



  7. Jeff Clayton says:

    I have yet to find one that works for IE11+ and Edge while ruling out other browsers, however one of my hacks does work for IE10+ and Edge. _:-ms-lang(x), .selector { property:value; } Thanks for the suggestion, I am adding it above. At this time, if you need to separate out IE10 and IE11 in your code, you can still put my IE11(only) hack after it to override such as this one _:-ms-fullscreen, :root .selector { property:value; }


    • Jeff Clayton says:

      Still using raw CSS, it turns out that is possible to load an external stylesheet that targets IE 11+ and MS Edge, include the -ms-lang(x) hack in the sheet and you have a combination that does just that. For those who are not averse to loading external style sheets, the code is added above.


  8. Hi Jeff,

    Thanks, that just saved me from an Edge related headache.



  9. John Bradley says:

    Thanks Jeff. That saved me heaps of time


  10. Sanjaykumar K Sharma says:

    Thanks, this was really helpful post


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: