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 was released in 2015 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; } 
}

Version-Specific CSS Hacks Continue Here:

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

@supports (-ms-ime-align:auto)
and (-webkit-text-stroke:initial) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 14+ - @supports method */

@supports (-ms-ime-align:auto)
and (not (-ms-accelerator:true)) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 14 - @supports method */

@supports (-ms-ime-align:auto)
and (not (-ms-accelerator:true))
and (not (-webkit-text-stroke:initial)) {
  .selector { property:value; } 
}
/* Microsoft Edge Browser 14- - @supports method */

@supports (-ms-ime-align:auto)
and (not (-webkit-text-stroke:initial)) {
  .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 13- (12-13) - @supports method */

@supports (-ms-accelerator:true) {
  .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 "";

_:-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:

http://browserstrangeness.bitbucket.io/css_hacks.html or the mirror at http://browserstrangeness.github.io/css_hacks.html or the

Advertisements

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. See Test Pages: https://browserstrangeness.bitbucket.io and https://browserstrangeness.github.io

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
41 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!

    Like

  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 […]

    Like

  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?

    Martin

    Like

  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.

    Like

    • 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.

      Like

    • 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.

      Like

      • 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.

        Like

  5. Martin says:

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

    Like

  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.

    Thanks!

    Like

  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; }

    Like

    • 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.

      Like

  8. Hi Jeff,

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

    Cheers!

    Like

  9. John Bradley says:

    Thanks Jeff. That saved me heaps of time

    Like

  10. Sanjaykumar K Sharma says:

    Jeff,
    Thanks, this was really helpful post

    Like

  11. E Bates says:

    Thanks for the Edge 14 query. Was very helpful.

    Like

  12. fyahgal says:

    WOW this was totally what I needed!! THANK YOU!!! Worked like a charm and saved me many more hours of troubleshooting! Have a great weekend!

    Like

  13. […] CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser […]

    Liked by 1 person

  14. Prashanth says:

    Thank you 🙂 , Edge 14 query saved me. Really helpful post.

    Like

  15. […] CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser […]

    Like

  16. Chris says:

    Do any of these still for 15.15063? Not for me… 😦

    Like

  17. Jeff Clayton says:

    I just looked at all of them and the other ones listed are also working properly with the versions they match printed in 15.15063 on the test page. Be sure you have your doctype+html set properly and the css is in the proper order in your pages and that your css isn’t being re-written by a filter or compiler before being displayed on your site.

    Like

  18. May says:

    Good job Jeff, thanks a lot. The following works for me.

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

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

    Like

  19. Maxou says:

    Thank you my friend, this list is just pure Gold, saved also my ass many times, one of my favorite page (unfortunately !) I dream sometimes that IE never existed 🙂

    Like

  20. var isIE = ‘-ms-scroll-limit’ in document.documentElement.style && ‘-ms-ime-align’ in document.documentElement.style; didn’t work for me to get IE11 only on browserhacks.com, looked here to attempt to find one but no luck.

    Here’s what I needed to use for IE11 and not Edge
    var isIE = ‘-ms-scroll-limit’ in document.documentElement.style && ‘-ms-ime-align’ in document.documentElement.style && ‘maxTouchPoints’ in navigator && ‘msMaxTouchPoints’ in navigator;

    Like

  21. Hi. Thank you for trying to help so many people with your hacks.

    I have some kind of random problem with Microsoft Edge 41.16299.15.0. It looks as Edge randomly doesn’t understand how to render my Genesis Minimum Pro theme. I added this your your code at the bottom of my child theme’s style.css:

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

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

    and browsing my site it first looked if it cured the problem, but then closing and restarting Edge the problem returned. My site works fine in the latest versions of Chrome, Firefox, IE11, Opera and Pale Moon, but not when reading it with Microsoft Edge. Also I have a problem only in Edge with a Jquery-based sticky footer. In Edge after a little surfing between pages the footer suddenly doesn’t stick to the bottom. Do you understand what is i wrong?

    Tomas Risberg

    Like

    • Jeff Clayton says:

      If it is happening intermittently, it generally means that something else is either interfering such as injected additional CSS code or an error, or the page is not refreshing cleanly in your site. JQuery also is a piece of work that s

      Do any of these issues happen on my test page? (The hack you refer to and others are there) at this location: https://browserstrangeness.bitbucket.io/css_hacks.html#edge — This particular set of CSS hacks aren’t really hacks to be honest, they are code that is specifically programmed by Microsoft and truly native to that set of Edge browsers and found due to research from MS based web sites and documentation — so would not be causing the ‘on again off again’ results you are having.

      The biggest issue you are probably facing is the amount of code in a programmed theme, and the responsive themes have a LOT of CSS to make them work. JQuery code and themed site-skins in particular are by third party programmers and often require a lot of work to ‘undo’ issues that get in your way. One project I worked on in the past required me to insert a screen refresh on initial page load. I don’t know if that will work for your particular issue but it might get rid of your intermittent issue.

      Like

      • Thank you so much for taking your time, and for informing how complicated it can be to analyze an intermittent browser rendering problem.

        Reading your page with Microsoft Edge 41.16299.15.0 shows 51 red css mods. Does this indicate that I could add any of your other css codes for to cure the problem? In that case, which ones of them?

        A browser refresh, wouldn’t that mean that I also could do a manual refresh to get rid of the problem? I’m sorry but a manual refresh leaves the rendering problem unchanged.

        Do you think it could be wise to report the problem to Microsoft at their EdgeHTML issue tracker page?

        Like

      • Jeff Clayton says:

        If your code should work in all versions of MS Edge, you may be better off trying one of the ones (that show in red) for the lowest version of Edge (version 12 was the first release… made to match the last version of Internet Explorer which was 11) — so an Edge 12+ hack would ensure most people would be able to view your work, even if they haven’t updated yet.) I doubt MS will help much because they will say ‘oh you are working with a third party piece of software’ if anyone responds at all. You might have better luck with the people who wrote/provided the theme from their website or any connected forums.

        Like

      • Jeff Clayton says:

        If a manual refresh doesn’t get the clean page back, then it would be important to find what is being injected to the page that is overwriting your own changes. Either after your CSS lines, or in a later-loaded page or javascript. Being a responsive site, that may well be in many places for different sizes of a screen will generally have media queries that apply code to a single screen size.

        Like

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: