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 [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 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(; 
     property:value;
  );} 
}
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 { 

        color:#0000FF; 
        background-color:#CCCCCC; 

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

http://browserstrangeness.bitbucket.org/css_hacks.html

*NOTE*

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.

About Jeff Clayton

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

‹ CSS Hacks for Chrome 43+

Safari 9 CSS Hacks ›

Tagged with: Browser, Chrome, Computer, Computers, CSS, CSS Hacks, Edge, Programming, Safari, Spartan, Tech, Web, Web Browser, Web Browsers, Windows 10
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