browser-feature-detection

Thanks to Perfection kills , we can use the following JavaScript to detect event support: function hasEvent(ev) { var elem = document.createElement('a'), type = 'on' + ev, supported = elem[type] !== undefined; if (!supported) { elem.setAttribute(type, 'return;'); supported = typeof elem[type] === 'function'; } elem = null; return supported; } This works for about the only time I need it: detecting mouseenter support; hasEvent('mouseenter') will return false in Chrome, Firefox, etc., as it should. But now I'm trying to "fix" browsers that don't support the focusin and focusout events. According

In some browsers, including Chrome stable, you can do this: h3 { -webkit-filter: grayscale(1); filter: grayscale(1); } And wouldn’t you know it, the h1 will be rendered completely in grayscale. Everything old is new again . Anyway — does anyone know of any way to feature-detect for this? I need to be able to apply other styles if fil filter won’t work. Sepehr So called UPDATED answer: As the OP mentioned a good point I'm updating the answer but this does not have anything related or in contradict with my previous answer, this is simply a browser detection. Alan H. mentioned that IE, prior to

Internet Explorer does not support the data uri scheme for iframe urls (see http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx ). Other browsers do. As browser detection is loaded with testing and future-proofing problems, I want to use feature detection to work around this issue. So: how can I detect whether or not a browser supports the data uri scheme for iframes? This solution by Kevin Martin is tested and seems to be giving the correct result in IE, FF and Chrome: function iframeDataURITest(src) { var support, iframe = document.createElement('iframe'); iframe.style.display

I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would

In earlier versions, I used to test if I should be triggering popstate manually on page load, because Chrome triggers it right after load, and Firefox and IE do not. if ($.browser.mozilla || $.browser.msie) { $(window).trigger('popstate'); } Now that they dropped the browser object in 1.9, how should I test for these browsers? Or how do I figure if I need to popstate on page load or not? The code is: $(function(){ $(window).on('popstate', popState); // manual trigger loads template by URL in FF/IE. if ($.browser.mozilla || $.browser.msie) { $(window).trigger('popstate'); } }); Update Went for

I know how to check in Javascript if HTML5 audio playback is available. But how do I specifically check if MP3 audio playback is available, as IE9 and Chrome support it, while Firefox and Opera do not. keyboardP You could either check the User-Agent and see what browser is being used or you could test support with Javascript. var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); I got the above code from this page . return !!(a.canPlayType) is better because (some recent versions of)Firefox not supports mp3 and a.canPlayType('audio

I found a most peculiar browser feature in the latest Chrome (35; Win/Android/iOS) and Safari (7; iOS) versions. If you have a math form with input type="number" and enter a number with a decimal comma, the browsers do the calculations with the number as if the comma were a dot. And if you enter numbers with decimal dots, they do their normal calculations, but the resulting figure is displayed with a decimal comma. That is, in my European (i.e. Dutch) version. I don't know about American versions. If you would find that hard to believe, I made a demo to demonstrate it: <!DOCTYPE html> <html>

Is it possible in JavaScript to know if a CSS property is supported by the client browser? I'm talking about the rotation properties of CSS3. I want to execute some functions only if the browser supports them. I believe you can do it this way: if ('WebkitTransform' in document.body.style || 'MozTransform' in document.body.style || 'OTransform' in document.body.style || 'transform' in document.body.style) { alert('I can Rotate!'); } termi There is a new DOM API CSS.supports for that purpose. FF, Opera (as supportsCSS) and Chrome Canary already implement this method. For cross-browser