Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Targeting bellow Microsoft Edge (<=IE11) #198

Open
alexprg opened this issue Aug 21, 2015 · 24 comments
Open

Targeting bellow Microsoft Edge (<=IE11) #198

alexprg opened this issue Aug 21, 2015 · 24 comments

Comments

@alexprg
Copy link
Contributor

alexprg commented Aug 21, 2015

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
Copy link

jasny commented Jan 23, 2016

@alexandre-works
Copy link
Collaborator

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

@silenceisgolden
Copy link

@mjsarfatti
Copy link

mjsarfatti commented Aug 11, 2016

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
Copy link
Collaborator

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
Copy link

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
Copy link

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
Copy link

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

@romanlex
Copy link
Contributor

romanlex commented Jun 1, 2017

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

@saltnpixels
Copy link

I use

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

it works for ie11

@MTCoster
Copy link

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
Copy link

Vardkin commented May 1, 2018

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

@DominikVavra
Copy link

DominikVavra commented May 3, 2018

@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
Copy link

@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
Copy link

@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
Copy link

borantula commented Jun 8, 2018

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
Copy link

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

@martonlente
Copy link

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
Copy link

@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
Copy link

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

@charlax
Copy link

charlax commented Jul 5, 2019

Why not exclude IE completely?

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

@psntr
Copy link

psntr commented Oct 9, 2019

@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
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests