0

CSS in this media query is only used when Internet Explorer is detected (simplifying the standard implementation for brevity):

@media screen and (-ms-high-contrast: none) {
    body { background-color: purple; }
}

The way I understand how this works is that (-ms-high-contrast: none) returns false in non-IE browsers as they dont recoginse it.

I want the CSS to be used only if NOT using Internet Explorer. I tried various things including this (IE11 correctly doesnt use the CSS but unfortunately neither do Chrome, Edge, or FF) (I believe the not operator applies round the whole query)...

@media not screen and (-ms-high-contrast: none) {
    body { background-color: purple; }
}

More details in case it helps answer my question.... My site has extra CSS that kicks in below a certain window width (ie responsive). However IE11 can't cope with some of the newer css used for responsive layout, so as a fallback, I want IE11 to just layout in fixed desktop mode. So I need a way for IE11 to ignore the extra responsive CSS.

UPDATE

Note, this is about excluding JUST Internet Explorer, not older browsers in general. In particular for older mobile browsers (especially as you cant update the stock browser on old Android). In may case I am using css grid to auto-place dynamically created cells. As the window shrinks, the number of columns reduce. In old mobile browsers that don't support grid, you just get a vertical list of cells - which looks fine (as they usually have quite narrow displays), however for older desktop browsers (IE11 is still in use on Windows 7), I dont want this - I want to have a fixed 4 column grid.

spiderplant0
  • 3,872
  • 12
  • 52
  • 91
  • Possible duplicates https://stackoverflow.com/questions/42438009/nesting-css-supports-and-media-queries and https://stackoverflow.com/questions/48412244/apply-css-to-all-browsers-except-ie-using-media-query – Asons Nov 27 '18 at 07:00
  • Furthermore, since you use `grid`, which IE doesn't support, there is no need to _avoid it_ as it will not apply those properties, one simply use what you already have and _target only IE_ with the media query, and with that all browsers will display how you intend. – Asons Nov 27 '18 at 07:06
  • @LGSon, I did not change my question, I just added the UPDATE for clarification. The question is still 'how not to apply CSS for IE'. 'grid' was just an example, there is more than this in my responsive CSS. – spiderplant0 Nov 27 '18 at 12:02
  • The only proper, and safe, way would be to apply all the rules regardless of IE11, and then overwrite the one's that should apply to IE11 only (and there is no CSS way to say _for all but IE11_). And what about IE10/9...? If you plan to support that old other brands, why not IE, which likely have more users than the rest. – Asons Nov 27 '18 at 12:09
  • For a better answer we need to know what _"IE11 can't cope with some of the newer css used for responsive layout"_ actually means. – Asons Nov 27 '18 at 12:13
  • Does this answer your question? [Apply CSS to all browsers except IE using media query](https://stackoverflow.com/questions/48412244/apply-css-to-all-browsers-except-ie-using-media-query) – user9645 Mar 12 '20 at 10:27

0 Answers0