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.
Second Update: Windows 10’s Microsoft Edge Browser started at version 12, where Internet Explorer left off at version 11, and continued to version 18. In January of 2020 the Chromium 79 based version of MS Edge has been released. Windows 11 continues to use the Chromium-based version.
The CSS hacks here are for the MS (non-Chromium) versions. Any version of MS Edge newer than version 18 will be responding as Chrome because MS is now using a modified version of that engine.
—
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
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
Jeff Clayton IT Director / Senior Software Engineer / Film & Photography 
Windows 10 is now finally available – here are CSS hacks that target the new Edge Browser!
LikeLike
[…] 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 […]
LikeLike
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
LikeLike
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.
LikeLike
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.
LikeLike
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.
LikeLike
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.
LikeLike
Okay, thanks for your time. Apologies for not grasping that the first time.
LikeLike
No apology needed, if the way these things work were readily obvious, many more people would be writing them much more often.
LikeLike
Hi Jeff
Thanks for these css hacks :).
Can we combine multiple css hacks? As in If we want to target IE11 and Edge only then is that possible?
LikeLiked by 1 person
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!
LikeLike
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; }
LikeLike
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.
LikeLike
[…] [Microsoft Edge CSS Hacks] […]
LikeLike
Hi Jeff,
Thanks, that just saved me from an Edge related headache.
Cheers!
LikeLike
You are most welcome! And thanks for letting me know the result of my work has helped you!
LikeLike
Knowledge is the gift that keeps on giving, thanks again Jeff!
LikeLike
Thanks Jeff. That saved me heaps of time
LikeLike
You are welcome, always glad to hear that!
LikeLike
Jeff,
Thanks, this was really helpful post
LikeLike
You are very welcome, and thank you for the kind words!
LikeLike
Thanks for the Edge 14 query. Was very helpful.
LikeLike
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!
LikeLike
Glad my work has helped you, people like you make my day – thanks for the post!
LikeLike
[…] CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser […]
LikeLiked by 1 person
Thank you 🙂 , Edge 14 query saved me. Really helpful post.
LikeLike
You are welcome!!!
LikeLike
[…] CSS Hacks for Windows 10 and Microsoft’s Edge (Formerly Spartan) Web Browser […]
LikeLike
Do any of these still for 15.15063? Not for me… 😦
LikeLike
Please check the test page, if it is working there then there is something you need to fix in your css. This one works for edge 15+: @supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial) { .selector { property:value; } }
LikeLike
I am using that version 15.15063 and see it working perfectly. It looks like something else is going on with your site. The test page is here: https://browserstrangeness.bitbucket.io/css_hacks.html#edge and mirrored here https://browserstrangeness.github.io/css_hacks.html#edge
LikeLike
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.
LikeLike
Hey Jeff,
I want to add some CSS on specific width in Edge browser. I have tried this ,@supports (-ms-accelerator:true),(min-width:711px) { Style goes here}
but it doesn’t work. Is there any other way ?
LikeLike
The ms-accelerator line is an @supports feature, the min-width call is for a media query. Nest the supports feature within the media query: @media screen and (min-widh:711px) { @supports (-ms-accelerator:true) { ./* .css here */ } }
LikeLike
Good job Jeff, thanks a lot. The following works for me.
/* Internet Explorer 10+, Microsoft Edge Browser */
_:-ms-lang(x), .selector { property:value; }
LikeLike
Glad it helped you!
LikeLike
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 🙂
LikeLike
I understand– truly happy to be of service!
LikeLike
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;
LikeLike
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
LikeLike
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.
LikeLike
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?
LikeLike
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.
LikeLike
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.
LikeLike
Ok. I will check the codes you suggest, and if not successful ask in a Genesis theme forum. Thank you.
LikeLike
[…] 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 […]
LikeLike
It is not a good idea to help Microsoft and their browser chaos to survive with any kind of hacks. Microsoft can be lucky that people working hard as Jeff Clayton does, to do Microsofts job. I suggest every one using IE/Edge browser should be aware that Microsoft is not able to support a working browser today. So they might make IE/Edge more mainstream in the future.
LikeLike
I appreciate the kind words, and I wish I didn’t have to find workarounds like these. The real issue is that my customers often do in fact use the Microsoft (and for that matter most other) browsers and the product has to look right even if it is complicated no matter which browser they are using. The best option is to rework CSS and test (and retest) in every browser to get a good result without a hack — these are primarily for the person who needs to fix it fast, but diligently work to find a more permanent solution… which may take a lot of recoding.
LikeLike
Hi Jeff,
thanks for these hacks.
Do you already know some Microsoft Edge Browser 16+ Hack?
LikeLike
I do have a few that are in testing, this should be good for 16+: @supports (-ms-ime-align:auto) and (position:sticky) { .selector { property:value; } }
LikeLike
ok I added the new set to my test sites (including also edge 17): browserstrangeness.bitbucket.io and browserstrangeness.github.io
LikeLike
Your home is valueble for me. Thanks!…
LikeLike
Glad it helps you, thank you for your kind words
LikeLike
Is there a way with CSS or HTML to not show content if the user is using MS Edge and / or IE
I have an animation that just wont work in MS or IE and to be honest this really sucks!
The animations do work in Chrome and FireFox – Not texted Safari or Opera
Thanks in advance
PS. If you click my name it will take you to the page with the animations – The ones that are giving me hassle are the fireflies and the flying crow that goes from left to right then right to left
LikeLike
Yes, try this one… @supports (not (-ms-ime-align:auto)) { .selector { property:value; } } (see my test site, it shows content on any modern browser except microsoft ones)
LikeLike
Hiya Jeff, Thank you so much for the help.. Im not 100% what i have to do with this code you have supplied.. Please forgive me lol
Can you give me an example of use – for example if I wanted to block a div and its contents would that be possible with the code you have supplied?
Is so can you give me an example 🙂
Thank you again, sorry for not understanding the use lol
Jay
LikeLike
For example: say i have a div class=”AllFlies” would i use it like so to not have it show in IE and Edge?
@supports (not (-ms-ime-align:auto)) {
.AllFlies {
display:none:
}
}
Thanks your very helps 🙂
LikeLike
My bad I got it working 🙂
I had to remove the “not” for this to work (DoH!)
@supports ((-ms-ime-align:auto)) {
.AllFlies {
display:none:
}
}
thanks Jeff, great tricks!
LikeLike
It is easier when you are more familiar with hacks. This is for CSS not JavaScript for one thing. So if you were to want to show content for 2 settings.. you could use display:block and display:none in one example.
Your hack to discern content would be in your css section (order is important). The head of your document is a good place to put it.
.notmicrosoft { display:none; }
.ismicrosoft { display:block; }
@supports (not (-ms-ime-align:auto)) {
.notmicrosoft { display:block; }
.ismicrosoft {display:none; }
/* any other non-microsoft css can go here */
}
make 2 example divs in the body of your page:
<div class=”ismicrosoft”>is microsoft</div>
<div class=”notmicrosoft”>not microsoft</div>
Try that and see!
LikeLike
Awesome! thanks Jeff.
I think i got it sorted now, I had it in reverse but its fixed now
Check out the link again in FireFox then Edge and Internet Explorer 🙂
Works a treat!
Your a legend!
Thanks so much :0)
LikeLike
Sorry forgot to say scroll to the footer of the page 🙂
Thanks again!
LikeLike
Glad you got it working- I love the look!
LikeLike
Hi Jeff! Do you know any hacks for Edge 18 or something only for Edge 17 and below?
Thanks
LikeLike
This one I just tried should work for 18+: @supports (-ms-ime-align:auto) and (-webkit-mask: url()) { .selector { property:value; } } and then the opposite for 17 and below only: @supports (-ms-ime-align:auto) and (not (-webkit-mask: url())) { .selector { property:value; } } I tried them on my own 18+ machine and on browserstack. For completeness, one could use this for 17 (only): @supports (-ms-ime-align:auto) and (font-variation-settings:normal) and (not (-webkit-mask: url())) { .selector { property:value; } }
So you can see them live, I just added them to my test sites as well: http://browserstrangeness.bitbucket.io/css_hacks.html or the mirror at http://browserstrangeness.github.io/css_hacks.html
LikeLike
Thanks for the quick answer. Will check and let you know. The problem for me was that css had different behaviors for Edge 18 and Edge 17 and was pretty frustrating
LikeLike
I hope it does what you need. BTW– You are describing the reason we have CSS hacks in the first place 🙂
LikeLike
It did worked, thanks a lot
LikeLike
Excellent, glad to help!
LikeLike
[…] CSS Hacks for Windows 10 and Microsoft’s Edge Web Browser […]
LikeLike
Just fucking legendary.
LikeLike
cheers!
LikeLike
[…] 适用于Windows 10和Microsoft Edge Web浏览器的CSSž… […]
LikeLike
Very nice site, worth checking out!
LikeLike
[…] Windows 10 및 Microsoft Edge 웹 브라우저 용 CSS 해킹 […]
Greetings!
LikeLike
[…] Aqui tem mais uma listá com várias opções para o Edge: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/ […]
LikeLike
[…] Further explanation, including variants to support specific versions of Edge, can be found in this article. […]
LikeLike
[…] https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/ […]
LikeLike
[…] CSS Hacks for Windows 10 and Microsoft’s Edge Web Browser […]
LikeLike
[…] https://jeffclayton.wordpress.com/2015/04/07/css-hacks-para-windows-10-y-vista previa-del-navegador-… […]
LikeLike
For English speakers, this question is asking about finding MS Edge browsers currently. After MS Edge (newer than version 18), Microsoft moved to using Chromium as a base for the browser. It uses Chrome CSS now. You can use JavaScript with your site to do this however, then add a class (see: https://www.w3schools.com/howto/howto_js_add_class.asp) — and a live example: https://browserstrangeness.github.io/detect_ms_edge_browser.htm
LikeLike
[…] CSS Hacks for Windows 10 and Microsoft’s Edge Web Browser […]
LikeLike
[…] Further explanation, including variants to support specific versions of Edge, can be found in this article. […]
LikeLike
[…] https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/ […]
LikeLike
[…] CSS Hacks for Windows 10 and Microsoft’s Edge Web Browser […]
LikeLike
[…] Further explanation, including variants to support specific versions of Edge, can be found in this article. […]
LikeLike
[…] https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/ […]
LikeLike