browser-feature-detection

The latest version of Firefox has support for CSS Variables , but Chrome, IE and loads of other browsers do not. It should be possible to access a DOM Node or write a little method which returns whether the browser supports this feature, but I haven't been able to find anything which is currently able to do this. What I need is a solution which I can use as condition to run code if the browser does not support the feature, something like: if (!browserCanUseCssVariables()) { // Do stuff... } James Donnelly We can do this with CSS.supports . This is the JavaScript implementation of CSS's

I made a 3d sort of menu for a project and naturally IE is causing problems, because IE10+, even though 3d-transforms work, does not support transform-style: preserve-3d. I tried the workaround methods, by applying transforms to each child element of the 3d menu container, but the animations look awful, to say the least. Deciding to drop 3d entirely for IE, but without the ability to use conditional stylesheets for IE10+, I tried detecting the preserve-3d property value this way: var detect = document.createElement("div"); detect.style.transformStyle = "preserve-3d"; if (detect.style

Question Is there any way to detect support for window.print()? I'd prefer to detect the feature itself vs trying to go down the rabbit hole of detecting whether I'm on a mobile browser or desktop or iOS or Android or which particular mobile browser I might be on. Background The following links lead me to believe that: Apple requires all 3rd party browsers to use UIWebView UIWebView as used in non-Safari apps does nothing when you run window.print() Safari on iOS does something appropriate when you run window.print() The links: https://productforums.google.com/forum/#!topic/chrome/7wTj1dteSeI

Using responsive Layout and a lot of CSS to create a Webpage, I am having a problem with scrollbars being hidden or shown and changing the layout by 17px. The main problem is that on OSX the scrollbars hover over the entire Layout without affecting it, but in any browser on Windows for example the scrollbar is part of the layout and therefore moving it to the left by its width of 17px. Trying to solve this I started to detect browsers like: if($.browser.chrome) { // adapt layout by 17px } else if ($.browser.mozilla) { // adapt layout by 17px } else if ($.browser.safari) { // dont adapt layout

I've written a script to test for SVG support in the IMG tag: function SVGinIMG() { var SVGdata = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D' var i = document.createElement('img'); i.setAttribute('src',SVGdata); return i.complete; } window.onload = function() { var hasSVG = SVGinIMG(); alert(hasSVG); } This does what I want, except that when I run the script in WebKit browsers the complete property doesn't trigger the first time I load the page; when I refresh the page, it works as it should. The return function