Hide styles from IE6 - IE11 (@media only + nested @media rules)

[WebMechanic]

The only keyword was introduced in MQ4 afaik to blockout old UAs from choking on the new stuff.

@media only all {
  /* invisible for IEs */
}

Also works as <link media="only all" href="not-for-ie.css"> to prevent IE8- to load external stylesheet - as do all @media rules.

Nested @media rules

@media all {
  /* visible to IEs */
  @media (min-width:1px) {
    /* nested: invisible to IEs */
  }
}

EDIT: as discovered in the discussion below "only" only works up to IE8, but nested queries do filter newer version of IE. For MSIE11 see #9

[browserstrangeness]

Interesting stuff, thank you for your posts!

[browserstrangeness]

I went and looked at my old notes for @media only. It appears to be old stats. Back when I tested it, @media only screen / @media only all both worked once ie9 came out. So once it was non-ie, but that did change for newer versions. It rules out only IE8 and older now. It works on Firefox 3.5+ as well. Old Firefox nobody may care about nowadays of course but below 3.5 is ruled out too.

[WebMechanic]

Strange. I used it in a fairly recent project that made heavy use of (final) display:grid|flex to rule out IE11 entirely 'cos I didn't want to fiddle with old -ms- versions; 'twas tempting thou...

I use(d) <link media"only screen"> to exclude whole files and on a granular level several nested queries like the one above inside the files IE11 got served (basics, white space, colours, and typography) to cover stuff it should not see and may potentially choke on.

Wrapping large chunks inside @supports (display:block) {} also excludes any IE but keeps ED12+, wheras @supports (--fu:bar) {} excludes ED15- and so on. Getting rid of IE and old Edge in bulk is fairly easy w/o any sophisticaled parser or feature hacks :)

---

FF3 and others like OP12 aside, for practical usage: lte IE8 would be basically WinXP and by now any remaining, presumably defunct Windows Phone in rural areas w/o any net connection whatsoever, who' primary use is micro payments and classic "phone business", like let's say... making phone calls, sending texts.

These days XP only exists as pirated versions on hacked boxes (so who cares) and presumably in so-called 3rd world countries on school computers (exploring Wikipedia), that are very unlikely to access any site that use all the fancy bells and jingles one would then need to cover up. Also there's much more usage of (old) cell phones than PCs in those places that'd require a much different design and content strategy in the first place. I reckon if some poor soul seriosly has to support or must include a large amount of IE users, using conditional comments or some simple script based detections would be a more efficient, safer strategy than the sprinkling of some CSS hacks.

[browserstrangeness]

@media only screen and using <link media"only screen"> may not behave the same, so that would need to be tested separately. I would be curious if they acted differently. If it doesn't then maybe some other CSS was overwriting it afterwards? Either that or no noticeable difference. I would be curious to see the pages you were testing. @supports surely was not available in any IE version of course. IE8- pretty much does rule out XP and below, though you can still use compatibility mode in even IE11 to see at least IE7 compatibility, and also others depending on the version of windows you have running around up to 10. Browserstack does a good job of testing a bunch of the others.

[WebMechanic]

@media only screen and using <link media"only screen"> may not behave the same

@media fubar and media="fubar" etc. certainly do.

I just fired up a quick test and "only screen" indeed is loaded by IE9+

maybe some other CSS was overwriting it afterwards?

frankly, the existing CSS already was a complex, bloated +250kB gzipped LESS monster to begin with, so I woudn't rule out that assertion at all 😇 At some point I got really annoyed by both the LESS sources I had to use and IE11 constantly picking up things it shouldn't. There's certainly one @import with a bunch of --vars in it for all the shiny new stuff and all wrapped in a single @supports (--fu:bar). A few basic selectors containing var()s for colours and such eventually appeared in IE's scope (to fail). It was easier to just hardcode them in "trident.css".

Compatibility mode is probably nothing to worry about or sth. real users would use, other than in some archaic and controlled corporate setup that likely limits access to their Intranet anyway.

I sometimes use compatibility mode in IE11 "native". I can never recall how to lauch IE-mode from within Edge/18 and never tried in Edg/80. I only refer to Browserstack for the final touches and mostly to check if the 10 Safari users will also see something pretty.

It's kinda weired that a giant company like Microsoft so utterly failed for over a decade to produce a decent browser even for their own userbase. Unlike Apple + Safari, but then Apple always cared about the looks of things. IE6 with all it's horrible but well-known flaws and quirks was at least usable as a browser even w/o any remarkable extensions, but ever since IE7 the program just felt very clumsy and "edgy" and unpleasent to use.

[browserstrangeness]

Great testing - you might (maybe not...) be surprised even a few years ago I found customers using compatibility mode -- probably because it sounded good. Go figure!

[browserstrangeness]

Since you listed this one, I found my testing results on nested media queries as well, thought you might like the exact stats:

@media screen { @media { .selector { property:value; } } }

Safari 6.1+, Firefox 11+, Chrome 26+ (and Opera 14+), MS Edge 12+

[browserstrangeness]

So yes, that one is still great for killing MSIE :)

[browserstrangeness]

You can use media all or media screen here, I usually remove all so that print versions are unaffected.

[WebMechanic]

I use one base.css that's loaded with "all" and has a small "print" section at the end to make things look ok when put on dead trees. Sort of a reset, that makes the page look neat even if everything fails or doesn't apply. Anything else is "only screen" and sprinkle of @supports just in case. It'd be nice to also have a supports attribute for link to avoid fetching a file in the first place, unlike media print. Need to check the WG repos if there is a proposal...

Safari 6.1+, Firefox 11+, Chrome 26+ (and Opera 14+), MS Edge 12+

Noted. The logs of almost any project I did in the lasts everal years -- content focused sites, no JS heavy stuff or "apps" -- show less than 0.0n% or even single digit requests per month for either IE and even Safari, so I virtually don't bother at all. They can see all contents and interact with the page. What more U need? When Win8 came out I switched to Ubuntu and only after that box died I returned to Win10 shortly before there was Edge/18, so I missed all the early Edge versions.

[browserstrangeness]

It may take a while for everyone to adopt Chrome Edge, but eventually you will have less to worry about in that venue... until MS changes it, right? ;)

[WebMechanic]

I don't know if Edgium will ever be more relevant than any other existing Blink/Chromium clone out there. Just like Vivaldi it's Chrome with a different GUI and an arbitrary set of features to please a minority of specific end users. If corporates have Intranets that rely on EdgeHTML justlike they might oncy relied on IE6, IE8 or IE11 they can block Edgium and will do so for a long time. These users are irrelevant for the wild web to make a difference. Their alternative "WWW" browser would be Firefox or Chrome 'cos that's what the IT department can already handle and configure.

Users pick a browser for it's (GUI) features or just don't bother at all what browser they use. It's whatever their Nerd friend recommended. Privacy Extensions are present based on what said Nerd installed for them and done. Not a single (adult) person I know gives a toss about extensions or even knows what they are let alone can do, same with themeing. Certainly nobody cares if a browser knows more CSS or JS standards than another. They don't compare pages using different browsers (like we do) and maybe have use a combination of either Chrome + FF or Chrome + Safari - only because they found one particular site the use on a regular basis seems to be more useful if opened with a specific browser - no questions asked why. It's just a given for them. Even my old mom does that for online banking, shopping and eBay. She also learned on her own that this blue "e" on her (Win7) desktop doesn't work most of the time so she just ignores it entirely. Well done Microsoft ...

EdgeHTML looked promising and there was some hype within the web developer bubble, but it failed simlply for not being the default browser even on Win10. I can still click on some web-ish files or even SVGs today and IE11 will pop up. So I predict Edgium will fail too and remain irrelevant for the majority of end users - unless some future version of Win10.x will make it the default browser outta the box.

It'll have it's users in hardcore Windows environments for it's better integration with corporate requirements and Windows networks than any other cross-plattform browser. And that's the only reason MS joind the Chromium team. But Chrome will benefit from that as well -- by design. I hight doubt a longtime Safari, Chrome or Firefox user would ever switch to Edgium on any supported platform. For vanilla users there is virtuall no reason to do so, esp. if you already are a Chrome user of Google fan.

For future installs of Windows 10 or 11 or 2025 there might come a time where it wouldn't make a difference for end users to use Chrome or Edgium, simply because there's be no significant difference. We'll see if Mozilla will persevere the presure. Safari will always have it's place on Macs for as long as the WebKit team remains innovative.

[browserstrangeness]

I personally don't want to lose out on addons. I tend to use a lot of them in Firefox and Chrome. I will only use Chrome-Edge as a test platform honestly.

[WebMechanic]

yep. same here.

[WebMechanic]

I dug into the sources for the site I refered to earlier. THIS is what I eventually used to kick out IE11: #9