Targeting bellow Microsoft Edge (<=IE11)

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

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

@jasny

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

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

@silenceisgolden

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.

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.

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.

@mjsarfatti

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

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

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

I use

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

it works for ie11

@romanlex

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'.

@MTCoster

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

@MTCoster

@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 ;)

@DominikVavra

@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 ...

@DominikVavra

@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.

@silenceisgolden

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'
    })
  }
});

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

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

@saltnpixels

@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.

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

Why not exclude IE completely?

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

@saltnpixels

@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)

@psntr

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

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.

Navigation Menu

Repository navigation

Targeting bellow Microsoft Edge (<=IE11) #198

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Targeting bellow Microsoft Edge (<=IE11) #198

Description

Activity

jasny commented on Jan 23, 2016

alexandre-works commented on Jan 25, 2016

silenceisgolden commented on Feb 3, 2016

mjsarfatti commented on Aug 11, 2016

alexandre-works commented on Aug 11, 2016

mjsarfatti commented on Aug 11, 2016

vijeetgv commented on Aug 22, 2016

Wayne-Ehr-Surprenant commented on May 10, 2017

romanlex commented on Jun 1, 2017

saltnpixels commented on Feb 20, 2018

MTCoster commented on Apr 27, 2018

Vardkin commented on May 1, 2018

DominikVavra commented on May 3, 2018

omostepaniuk commented on May 23, 2018

Saborknight commented on Jun 3, 2018

borantula commented on Jun 8, 2018

rubenheymans commented on Oct 19, 2018

martonlente commented on Oct 19, 2018

WebMechanic commented on Jan 23, 2019

Tecktron commented on Apr 24, 2019

charlax commented on Jul 5, 2019

psntr commented on Oct 9, 2019

WebMechanic commented on Oct 12, 2019

WebMechanic commented on Oct 12, 2019

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions