The summary/details HTML5 element has terrible browser support. Therefore I built a non-jQuery fallback to make it work in non-supported browsers (IE and Edge). This fallback uses element.removeAttribute, but I am in doubt about the browser support of this command. I cannot find a definitive answer online. I have tried caniuse.com and MDN web docs, but they have no clear answers.
I know it works in my (updated) version of Firefox. Anyone has more info?
This method does not work consistently across browsers. It is BROKEN on MS Edge at least, and its brokenness is not mentioned by MDN, W3schools or caniuse at time of writing.
Basically, the method will fail when removing boolean attributes such as selected or hidden. The following will fail on Edge:
someDiv.removeAttribute("hidden");
Workaround is to set the attribute to "false" immediately before removing it.
someDiv.setAttribute("hidden", "false"); // "thanks" for the nonsense, MS
someDiv.removeAttribute("hidden");
This is not how boolean attributes are supposed to work, but that's how Edge requires it. Given that Edge is about to be dropped by Microsoft in favour of a Chromium-based alternative, we can expect this bug to remain unfixed, and the workaround to clutter our code for years.
Related
MDN says that window.focus() is compatible with IE https://developer.mozilla.org/en-US/docs/Web/API/Window/focus.
But if I open IE and write
x=window.open('https://blank.org')
And after I come back to the main tab and I do x.focus() is not working.
I found several similar posts, but they are all old, and the information referred to there is out of date.
Is this happening by default, or is a IE setting?
I can reproduce the issue in IE 11. I searched docs and find that it might be due to some security issues the method can't be used in IE 8+. You can refer to this article:
Windows Internet Explorer 8 and later. The focus method no longer brings child windows (such as those created with the open method) to the foreground.
It can work in modern browsers because they have different engines than IE so the function can work.
I've seen this question asked a couple times on here but no one has replied.
Before I go implementing the more resource intensive elementAtPoint method, can someone confirm that Chrome does not support touchenter and touchleave events?
The MDN documents it https://developer.mozilla.org/en-US/docs/Web/Reference/Events/touchenter
The latest W3C draft specifies it http://www.w3.org/TR/2011/WD-touch-events-20110505/
Does anyone know if any of the Chrome versions support it, even if it's in development, can I get it?
Well, pretty outdated I guess... Anyways, I've just used touch events, they are supported now, and Chrome will eventually emit touch events instead of clicking if you switch to device mode on the developer window (F12). Thus they are kinda easy to test.
CanIUse is also a friend: http://caniuse.com/#search=touch
There are some JS library to simulate the IE in Webkit? For instance: IE8 doesn't support border-radius currently (maybe on IE10). So I run a JS library that check if I'm using the border-radius then remove it to make similar to IE vision.
It's a crazy idea, I know, but work on IE is too slow, and if I can simulate it on Webkit, will be great! I need do it to an own project too.
Note: I know that exists a Chrome extension to make a IE tab, but the proposal is different: I need run on Webkit, but eliminating features not supported on IE.
Edit1: I'm working on a Webkit based IDE to developer HTML templates. Basically I need a button that emulate the IE view version without need a IE installed too (Mac, Linux for instance). Will be interesting have a Mozilla emulator too, for instance. Basically I will generate a CSS file to each browser too. For instance: -webkit properties not will be included to MSIE CSS. filter not will be included in Webkit CSS (but can be emulated).
So, I'll make a copy of current HTML page before apply a JS method that will edit or delete the unsupported content, make it similar to IE. If IE8 not support border-radius, it'll be removed and I'll see basically an IE version of page. If Mozilla not support -webkit-box-sizing it will be renamed to -moz-box-sizing if disponible.
I know of no script, and frankly I don't expect to see one any time soon as the task of re-creating the topography of IE's support for CSS in various versions of the browser would be a massive undertaking. It would further complicate things if the undocumented hacks like _height were supported too.
Frankly, the best way to test your site in IE8 is to use IE8+. In versions IE8 and up Microsoft introduced Browser Emulation, permitting you to fallback and emulate any number of IE versions all from a single browser - I use this daily, and it's a fantastic feature.
Within IE, open up the Developer Tools by pressing F12 and from there you can change the Browser Mode to IE8. No refresh will be necessary as the browser will handle that on its own. Using this method you can quickly test versions 7 through 10 (assuming you're testing from IE10) with the click of a button.
Disabling CSS3
If all you would like to do is disable CSS3 features, you can use the Strip Tease bookmarklet. It's not a fully-developed solution, so keep in mind that it won't handle things like advanced selectors, etc.
I'm having some trouble setting up virtual machines for testing IE versions (I use a mac) and have noticed on IE8 it has a browser switching mode.
Does this mode do a full switch for CSS and Javascript, I need testing to be 100% reliable.
Also does IE9 have a similar feature going down to IE7?
It's not going to be 100% reliable, I can tell you that right now. The only way to really test on IE7 is to test on IE7. For most layout checks, using the newer browser in emulation mode will be fine, but there are definitely bugs and oddities in the actual older browsers that the newer browsers don't mimic faithfully.
When you change The browser mode from the IE developer tools, IE renders the site according with your selection.
IE 9 also has this option, and if say you pick IE7, you'll get pretty much the same expercience you would get in that browser (from a layout and functionality point of view), but it's not completely reliable, some Javascript quirks are not the same (I can't remember any specific ones)
If you really need to test in IE7, get IE7 :D
More info here!
Press F12, and in the developer tools toolbar change browser mode to IE7 and Document Mode: IE7 (if you change the browser mode, then doc mode automatically changes also).
As for whether you get a different Javascript API? I don't know.
I agree with #Pointy, though. Realistically you actually need to run IE7. A VM is often a good way to do this if you don't want to muck about getting the different versions running side-by-side.
I'm looking for a way insert JS into web page using CSS file, in Opera. In Internet Explorer [I tested it on 5.5,6,7,8] it's possible using behaviour property.
behavior: url(file.htc);
From my experience it's very useful. Now I need it for Opera.
There is no such equivalent feature in Opera.
You'll have to find another way to solve your problem.
The behaviour property is a proprietary to internet explorer. So it's unlikely you will find an equivalent.
However interestingly, looking through an old W3 working draft, it is proposed as a standard - but I haven't seen anything about other browsers actually supporting it nor an equivalent.
On a side note:
The behaviour property is very useful for "patching" internet explorer to enhance old browsers with newer features e.g. adding css3 rounded corner support etc. But at this time, because it is non-standard I would not recommend using it for anything other than adding support to outdated browsers.