How to get the Microsoft Edge browser out of WebKit Media Queries that work for Safari and Google Chrome

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

So we have a problem — there are multiple different WebKit (Chrome and Safari) hacks out there that are now picked up by MS Edge… Including one of the most used and famous media queries:

/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector { property:value; } 
The Old and Out-Of-Date Standard Webkit Hack

SO — Use this set for Chrome, or the below for Safari instead:

My old Media Query combo still works properly and Targets Chrome 29+, ruling out Safari, Firefox and MS Edge (which now also cover @supports feature queries)

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
    .selector { property:value; } 
Author: Jeff Clayton

Though old, some people still need to check for older Chrome browsers. This one still only targets chrome (versions 22-28). Also not Edge, Safari or Firefox.

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
Author: Jeff Clayton

This Safari hack I worked out by combining multiple other hacks is for 6.1+:
(Safari 9 is the latest version of Safari at this time.)

/* Safari 6.1+ */

@media screen and (min-color-index:0) 
and(-webkit-min-device-pixel-ratio:0) { @media
    .safari_only { 


Author: Jeff Clayton

Additional info…

During the Windows 10 Preview version testing phase, I had been working with different CSS to find the gold nugget in the midst of the mess of code that 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.

Now that Safari 9 finalized @supports feature detection, use the above code instead if you just want to target Chrome. Firefox is also beginning to target webkit so this one rules out that browser as well.

Looking at these there us a simple fix (a non-edge wrapper) we can use. Here is a nested media/supports block that will solve this for you:

/* Chrome 28+, Safari 9+ */

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @supports (not (-ms-accelerator:true))
    and (not (-moz-appearance:none)) {
      .selector { property:value; } 
} }
Author: Jeff Clayton

To target just Safari, use the Safari-Only CSS I worked out on my Safari Hacks collection page.

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


A different point that is important – comments saying things do not work right– without example code, or any examples at all, are not helpful and cannot be assisted. If there is a valid need for assistance in codewriting, whether by me or another helpful programmer, please provide a live site that can be checked.

What is required for anyone to assist you: HTML page you are working on; Which CSS Hack you are attempting; What browser are you using (please verify exact version numbers!); What OS are you using (some hacks are specific to OS); Most ‘hack’ issues I have seen are where the hack was not completely copied properly. Are you using the CSS hack exactly as written, copy and paste rather than attempting to type it out – and checking the code to see if it copied exactly afterwards? (Some use a ‘missing space’ or a slash that does not translate well if not copied exactly). Are you running the hack through a compiler or filter? (That will not often work as they get altered. They must be used as-is in most cases.) What is happening in that browser as opposed to other browsers? (Or do they do the same thing?) Have you modified your browser settings so that it is not the ‘out of the box’ version? These things would be very helpful indeed. Thanks in advance.

IT Director/Senior Software Engineer, Photographer I test and create new CSS web page formatting hacks for 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 Chrome, Chrome-All, Computers, Cool Code, CSS, CSS Hacks, Edge, Edge-All, Hacks, Safari, Safari-All, Spartan, Spartan-All, Tech, Web, Web Browser, Web Browsers, Windows, Windows 10
4 comments on “How to get the Microsoft Edge browser out of WebKit Media Queries that work for Safari and Google Chrome
  1. […] in CSS, developers could detect Internet Explorer separately from other browsers. But now, Edge is getting thrown in with other Webkit detection, even though it doesn’t render the same as Webkit or Blink. So now, all CSS queries to detect […]


  2. amanda says:

    these were used to mess up my microsoft edge. how do i fix this


    • Jeff Clayton says:

      Your response says multiple, but the truth is, the first one is the only one that fits what you are referring to. If you are in fact talking about the old webkit css I posted at the top of this page with the updated specs, it is because edge picks up webkit css commands. the sites that you are visiting have not been updated to recognize that ms-edge picks them up. Firefox is going to be doing this as well coming up, so there will be issues there as well. It was a decision based on the fact that so many sites have them, that microsoft and mozilla both decided they wanted to use the css themselves. it is a real pain I know.

      The ones I posted here are updated in that they don’t affect edge unless stated in the posted specs. If you are not talking about other sites, but need to target browsers in your own code, please use the modified ones I have supplied that target or rule out Edge specifically.

      Please check my MS Edge CSS Hacks Page to target just Edge, or this code to rule out Edge. If you are a programmer and are unable to follow my updated files here, I would like to see examples of your own code to show you how to fix it. Everything you need is on this site. Without examples, I cannot help you further however. If you are referring to other people’s sites, then they need to update their work to reflect Edge. I have not seen many (if any) developers who know how to do that. This is why I post these — and this article in particular, to help them when they have issues like you are describing.

      I added a few from my other pages here to make it easier for you to find what you need.


Leave a Reply

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

You are commenting using your 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: