Which web browsers / versions have support for document.activeElement?
This property lets you see which element is active / has focus.
Are there any main gotchas/difference between implementations?
document.activeElement is supported by IE6+, FF3+, Safari 4+, Opera 9+, Chrome 9+. (FF2, Saf3 don't support this property)
It still doesn't work on WebKit based browsers in xhtml page
see https://bugs.webkit.org/show_bug.cgi?id=63922
Related
I have some svg code that works in all browsers except IE. if i add this, it works in IE:
<canvas width="1900" height="1325" style="display:block;width:100%;visibility:hidden;"></canvas>
but it then messes up some stuff in all the other browsers. thus i tried to add this condition:
<!--[if IE]><canvas width="1900" height="1325" style="display:block;width:100%;visibility:hidden;"></canvas><![endif]-->
but then again it works in all browsers except IE, thus i think IE is treating it as a comment.
i can't figure out what's wrong, any help is much appreciated!
<!--[if ????]> only works in IE up to IE9.
IE10/11 treat it like it should be treated, a comment
to verify, open the developer tools in IE11
set IE to emulate "IE9" - and you'll see the conditional markup will be visible
switch back to 10/11 mode, and the content will again disappear
Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser. source
How to detect the browser using the Leaflet library for JavaScript?
You can use the boolean method L.Browser for browser detection.
For example:
if ( L.Browser.ie ) {
alert( "Using Internet Explorer" );
// ...
}
This method supports the properties:
ie - true for all Internet Explorer versions;
ie6 - true for Internet Explorer 6;
ie7 - true for Internet Explorer 7;
ielt9 - true for Internet Explorer versions less than 9;
edge - true for Microsoft Edge;
webkit - true for webkit-based browsers like Chrome and Safari (including mobile versions);
webkit3d - true for webkit-based browsers that support CSS 3D transformations;
android - true for Android mobile browser;
android23 - true for old Android stock browsers (2 and 3);
mobile - true for modern mobile browsers (including iOS Safari and different Android browsers);
mobileWebkit - true for mobile webkit-based browsers;
mobileOpera - true for mobile Opera;
opera - true for Opera;
touch - true for all browsers on touch devices;
msTouch - true for browsers with Microsoft touch model (e.g. IE10);
retina - true for devices with Retina screens;
chrome - true for Chrome.
Reference: http://leafletjs.com/reference.html#browser.
It seems that the useCapture flag has a pretty good support on desktop browsers.
In this page: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener, at the bottom there is a compatibility table, but it's incomplete for mobile.
So my question is: can i use the useCapture flag on those devices: Android, IE Mobile, Opera Mobile, Safari Mobile?
After a little research, I concluded that it should work the same on those mobiles.
Chrome works the same on android: What are differences between Chrome on Android and Desktop Chrome?
Opera browser on android might works the same than the desktop version: http://www.opera.com/blogs/india/2015/05/which-is-the-best-opera-browser-for-android-phones/
For the main part, safari mobile might work the same as safari desktop: Desktop Safari ( Mac & Windows ) VS Mobile Safari (iPhone) - HTML, CSS, JS support
Ie mobile should work like ie11 desktop: https://en.wikipedia.org/wiki/Internet_Explorer_Mobile
1) If I'm already using Modernizr, will I then even need HTML5 Shiv to enable HTML5 tag support for IE?
2) Is HTML5 Shiv only for IE, or for all browser who don't have native HTML 5 support? Like older versions of Firefox, Safari, Chrome, etc?
1) If I'm already using Modernizer then even will I need HTML5 Shiv to
enable HTML5 tag supports for IE.
You don't need to separately include html5shiv, because Modernizr includes it:
As of Modernizr 1.5, this script is identical to what is used in the
popular html5shim/html5shiv library.
http://www.modernizr.com/docs/#html5inie
2) and is HTML5 Shiv only for IE or for all browser who don't have
native HTML 5 support. like older version of Firefox, Safari, Chrome
etc.
It's only for Internet Explorer.
Older versions of other browsers don't need it: http://caniuse.com/html5semantic
And the recommended snippet to include it is:
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Which will only ever run for IE less than 9.
Is support of HTML, CSS and Javascript same in Desktop Safari ( Mac & Windows ) and Mobile Safari (iPhone)?
If I'm making some thing for iPhone Safari and use Desktop version Safari on my Windows 7 PC to test and debugging, after fininsh will it look same on both? Are there any difference between Safari ( Desktop ) and Safari (iphone) in terms of support of HTML, CSS and Javascript?
They are based on the same html render engine - WebKit. Pure HTML, CSS and Javascript are supported in mobile safari and desktop version. But if you are doing sth in Flash or Applet, mobile safari does not support that. Some HTML5 tags are not fully supported, like File/FileSystem interface. You still need to test the pages in mobile safari, although developing them in desktop version safari in first place is a good way.