Exclude Internet Explorer 11 min-width:10vmin / IE6-8 min-width:10rem

[WebMechanic]

This is another simple feature-ish media query to filter styles from specific versions of Internet Explorer.

• vmin and vmax are not supported until IE11 inclusive
• rem is not supported until IE8 inclusive

Any media query combination that involves (min-width:1vmin) or <link media="(min-width:1vmin)"> will prevent IE11 (all IE) from reading/loading the style(sheet). All relevant browsers released after 2013/2014{*} support this unit. Likewise (min-width:1rem) will filter styles from IE6-8.

Useful in combination with other IE css filters that could involve EdgeHTML or Windows specific styling (e.g. forms). Reminder: (-ms-high-contrast:none) will not be applied by Edge/18. Support for 'none' was dropped.

{*} according to caniuse, WebKit added support with Safari 7 in 2014, Samsung Internet 4 in 2016

• https://caniuse.com/#feat=mdn-css_types_length_vmin
• https://caniuse.com/#feat=rem

[browserstrangeness]

Unsupported units, perfect!

[browserstrangeness]

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { .selector { property:value; } }

This particular combo only targets internet explorer 10 and 11, none of the Edge versions.

[browserstrangeness]

Testing with (min-width:1vmin) it appears to work for excluding IE, It is enabled in all versions of MS Edge & Chromium versions. I need to test Safari and also Firefox older than the mid-30's, Chrome doesn't pick it up (in this media query form) until Chrome 44+ which may require a combination with another media query to target older Chrome versions. Doing the test with every version even ones on an old WinXP box would be good before posting though.

[WebMechanic]

This particular combo only targets internet explorer 10 and 11, none of the Edge versions.

I found the full -ms-high-contrast construct is often way longer than the fixes I'd put inside :) which is why I barely use it. It's also doing the opposit: it targets and not excludes which is what 'vmin|rem' do. There are of course reasons to do either or both.

My strategy to stay sane is to exclude any IE in the first place using link media. I also pull out the @supports sledgehammer; also short and 100% effective and I don't mind the collateral damage by "loosing" a couple three or seven year old browsers. If you're riding a horse don't enter the highway.

Not sure how far back you want these filters and hacks to be "safe" and cross examined. FWIW most of this fine collectiion is already purely academic. I suppose at some point it'll also become impossible and impracticable to check for false positives, even with services like Browserstack or running a gazillion Docker images even with automation tools such as Selenium, Puppeteer and whatnot. As we just learned, Opera 12.1 picks up many \0 hacks that allegedly only target Internet Explorer (10?), and Opera 12 was a valid, vivid browser when those hacks were invented or discovered.

So back on subject matter: '1vmin' or even '1rem' (which I "discovered" and derived after checking for "vh/vw" support on caniuse) surely filters way more then just IE11 but any browser released prior mid 2013 and before these units were "invented".

It serves me well preventing browsers from loading files they should not load inthe first place. So I rather use link than inline @media 'cos I eventually bundle browser specific styles/hacks if need be into their own files (i.e. trident.css, gecko.css) and avoid to spread them oll over the place. This also allows the active majority of Good Browsers to ignore irrelevant data in the first place and it saves some bandwidth along the way. Easy maintenance and nowadays a single click in DevTools to re-/enable a file for testing.

My obligatory "utils.js" adds some simple feature tests (poor man's Modernizr) to polute the html and body elements with very specific classnames and data attributes, just as a safety net.

EDIT phrasing

[jeffclayton]

how i tend to do media queries to make it look more readable to me (same reasoning you have) is something like this:

//////////////////////////////////////////////////////////////////////////////////////////////// @media query hell here () { // for the ABCDEFG browser ////////////////////////////////////////////////////////////////////////////////////////////////

.mycss { stuff here }

//////////////////////////////////////////////////////////////////////////////////////////////// } // end media query for the ABCDEFG browser ////////////////////////////////////////////////////////////////////////////////////////////////

the bars are the only way i find this mess even readable with a large page

[jeffclayton]

I have a need for (near) perfection in testing, I collected a ton of old browsers for my Mac and even an old XP box for these things. Browserstack covers a ton of newer (and even many older) ones so that and a few other sites are great solutions. One of the worst (sometimes found via source code) is finding out that a certain hack isn't just removed, but when it skips a version (or a few versions) then works again. So testing is often needed for most versions within reason.

[jeffclayton]

(@browserstrangeness/@jeffclayton) -- didn't realize I switched accounts ;)

[jeffclayton]

You are right about Opera, but like I said before, I haven't been keeping up with it for a while now.

[WebMechanic]

Here's another interesting pecurilarity. IE10 and IE11 actually do support "vmin" if applied to properties as in width:30vmin, yet the unit does not work when used in a @media query. This also appears to be true for IE9 using the non-standard vm.

I guess as a consequence neither supports any of the new dimensional units (in media queries) introduced in Units Level 4: cap, ic, lh, rlh, vi, vb.

---

If MS did this on purpose and not by accident, then there is some logic in doing so. The unit refers to the viewport width which reflects one dimension of a window's (inner) size. So a media query of max-width:50vmin could never match that medium because a window|screen cannot be less or more than 100% of its own current size which is always 100% in either dimension. Some pairings of min-|max-width/-height and vmin|vmax would lead to exceptions. Or maybe the standards definition changed after the fact and MS (again) implemented some early draft version like they did with flex, grid and regions.

[browserstrangeness]

I noticed that as well. I started to write a bit on it thinking on the old specs, but it is probably more simple to say that browsers are just slow to adopt such things. Media queries always seem to me to be more of an afterthought base-level parent wrapper to force things to work within manufactured device hardware specs.