Targeting bellow Microsoft Edge (<=IE11)

[alexprg]

At the moment the property 'transform-style: preserve-3d' is not very reliable (there are reports of false positives in some OS/Browsers), and there is no other property that we can differentiate from Edge. So as soon there is a update on Edge of a property not supported by IE11 ( filter, object-fit, etc) we will update the plugin

[jasny]

http://caniuse.com/#search=filter

[alexandre-works]

@jasny did you tested it? Because on Edge there isn't a full support, and we may get false positives.
Anyway thanks man 👍

[silenceisgolden]

http://caniuse.com/#feat=promises, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise && Object.prototype.toString.call(Promise.resolve()) === '[object Promise]'

from https://github.com/jakearchibald/es6-promise/blob/master/lib/es6-promise/polyfill.js

[mjsarfatti]

Can we just make an exception and check for Promise (instead of a CSS property), as @silenceisgolden suggested?

typeof Promise !== 'undefined' // Edge

See also: http://caniuse.com/#search=promise

Otherwise it will remain forever a half-complete plugin, it would be a shame! :)

EDIT

Even better: we could introduce JS checks in alternative to CSS checks. With a syntax such as:

lowerThan: 'js:Prop'

it would be trivial to check window.Prop instead of div.style.prop. What do you guys think? I could easily send a pull request if the writers are interested.

[alexandre-works]

I think it may be a very good suggestion, but I will say something said before: was it tested for older browsers? My point is: this plugin must work for very old browsers like IE6, IE7, etc (that is the point why we made it) and specially with js code must be double checked, or simply will not work and the plugin becomes useless.

[mjsarfatti]

According to https://msdn.microsoft.com/en-us/library/dn802826(v=vs.94).aspx:

[Promise is] Supported in Microsoft Edge (Edge browser). Also supported in Store apps (Microsoft Edge on Windows 10). See Version Information.
Not supported in the following document modes: Quirks, Internet Explorer 6 standards, Internet Explorer 7 standards, Internet Explorer 8 standards, Internet Explorer 9 standards, Internet Explorer 10 standards, Internet Explorer 11 standards. Not supported in Windows 8.1.

The only problem I see is if you use a polyfill such as https://github.com/stefanpenner/es6-promise. But you should know your code...

Also, if you polyfill Promise you could always check some other object, possibilities are endless.

[vijeetgv]

I think @mjsarfatti's suggestion will work in older browsers as well, as undefined & typeof are basic js keywords & are supported since the beginning...

[Wayne-Ehr-Surprenant]

Is there any solution here to prompt user to update their brower when they are using IE11 ?

[romanlex]

My dirty PR for this work #269
You can check lower then Edge browser
lowerThan: 'js:Promise' or lowerThan: 'Edge'

[saltnpixels]

I use

@media all and (-ms-high-contrast: none) {
  #outdated{
    display: block;
  }
}

it works for ie11

[MTCoster]

Since @romanlex's PR has been merged into master, can you cut a new release (1.1.6 perhaps) with it included? I would prefer to continue using a CDN, but without a versioned release I can't access the new lowerThan: 'Edge'.

[Vardkin]

@MTCoster Same for me using the v1.1.2 downloaded today from GitHub

[DominikVavra]

@MTCoster @Vardkin
If you need to use it right now just use this - https://gist.github.com/DominikVavra/073f383e3c077ddfed3c638dbe8a4d55

just use lowerThan: 'Edge'

then you can wait until new release ;)

[omostepaniuk]

@DominikVavra Could you please provide non-minified version (or pointer to a commit from which you've built it, if any) of the gist you've shared above? It does not seem to be working for me so I just want to understand what I'm doing wrong ...

[Saborknight]

@DominikVavra Not sure why, but your gist doesn't seem to work... I'm getting the popup regardless if I'm on IE11, Edge or FF. Perhaps something I've done wrong?

<div id="outdated" style="z-index: 999; background-color: #ae5791;"></div>
<script>
	//event listener form DOM ready
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload !== 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}

				func();
			};
		}
	}

	addLoadEvent(function(){
		outdatedBrowser({
			bgcolor: '#ae5791',
			color: '#ffffff',
			lowerThan: 'js:Promise', // I tried this with values 'Edge' and 'js:Promise Edge', still doesn't work
			languagePath: '/lang/outdatedbrowser/en.html'
		});
	});
</script>

The script is being loaded at the head, before this.

Many thanks for the help from any.

[borantula]

as our problem was with IE versions including 11 so I used a slightly modified version of @silenceisgolden 's solution with lowerThan:true . When I just check for Promise IE was throwing undefined error but typeof is safe. I tested from IE8-11 in browserstack so far seems good.

var supportsPromise = typeof Promise !== "undefined" && Object.prototype.toString.call(Promise.resolve()) === '[object Promise]';

//call plugin function after DOM ready
addLoadEvent(function(){
  if(false === supportsPromise) {
    outdatedBrowser({
        bgColor: '#f25648',
        color: '#ffffff',
        lowerThan: true,
        languagePath: 'dependecies/outdatedbrowserlang/en.html'
    })
  }
});

[rubenheymans]

so is there a working solution already? Tried a lot but nothing is working for me, I don't want to support IE11

[martonlente]

Hello,

Though it may not be perfect, but lowerThan: 'object-fit' does a good job targeting IE11 and older (but not Edge).

I use it often, as it's quite 'in-pair' with CSS custom properties, that I make use of on all my projects recently.

Márton Lente

[WebMechanic]

@media all and (-ms-high-contrast: none) {
  #outdated{
    display: block;
  }
}

@saltnpixels: to be extra safe use
@media screen and (-ms-high-contrast:active), (-ms-high-contrast: none)
to catch people actually using hight contrast mode or your fancy CSS will slip through unintentionally and mess up the page. there's not much left of one's design if somebody uses high-contrast anyway.

[Tecktron]

Will the version ever be bumped on this to include no IE11 support?
Looks like that PR is almost a year old

[charlax]

Why not exclude IE completely?

// @ts-ignore: Property documentMode does not exist
const isIE = /*@cc_on!@*/ false || !!document.documentMode;

[psntr]

@media all and (-ms-high-contrast: none) {
  #outdated{
    display: block;
  }
}

@saltnpixels: to be extra safe use
@media screen and (-ms-high-contrast:active), (-ms-high-contrast: none)
to catch people actually using hight contrast mode or your fancy CSS will slip through unintentionally and mess up the page. there's not much left of one's design if somebody uses high-contrast anyway.

The code above runs for Edge too, this below prevent Edge but IE11 / IE10:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)

[WebMechanic]

The code above runs for Edge too, this below prevent Edge but IE11 / IE10:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)

@psntr you're right, I wasn't ware that MS apparently changed their spec of -ms-high-contrast ages ago :) "active" is no longer valid (for EdgeHTML) and was replaced by "auto".
https://msdn.microsoft.com/en-us/library/hh771863

[WebMechanic]

Maybe for the records...
To override stuff using "The Cascade™" one can play with combining nested @media queries and @supports which are not, well, supported in MSIE. Both are valid CSS3+ and use features MSIE nicely ignores, so you can override rules and properties for MSIE set earlier by putting the good stuff within these @-rules.

Using nested @media queries excludes MSIE but not EdgeHTML and new UAs.

@media screen {
 /* MSIE */
  @media (min-width:123px) {
    /* "new" UAs allow for nested MQ */
  }
}

Target EdgeHTML 12-18 which knows @supports but not MSIE, which doesn't.

/* prefixed "CSS Exclusions" only implemented in Edge, IE10+ */
@supports (-ms-wrap-flow:flow) {}

And there's also @media only screen as a "filter" for oldIE.