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...
}
You don’t need Javascript to detect if a browser supports custom properties, unless the
Do stuff...
is Javascript itself. Since the thing you’re detecting support for is CSS, I assume that the stuff you’re trying to do is all CSS. Therefore, if there’s a way to remove JS from this specific problem, I would recommend Feature Queries.Feature queries test support for syntax. You don’t have to query for
display
; you could use any property you want. Likewise, the value of--prop
need not even exist. All you’re doing is checking to see if the browser knows how to read that syntax.(I just chose
display
because almost every browser supports it. If you useflex-wrap
or something, you won’t catch the browsers that do support custom props but that don’t support flexbox.)Sidenote: I prefer calling them Custom Properties because that is exactly what they are: properties defined by the author. Yes, you can use them as variables, but there are certain advantages to them as properties, such as DOM inheritance:
We can do this with
CSS.supports
. This is the JavaScript implementation of CSS's@supports
rule which is currently available in Firefox, Chrome, Opera and Android Browser (see Can I Use...).With this, we can simply:
The result of this will be
true
if the browser supports CSS variables, andfalse
if it doesn't.(You might think that
CSS.supports('--fake-var', 0)
would work, but as noted in comments on this answer Safari seems to have a bug there making it fail.)Pure JavaScript Example
On Firefox this code snippet will produce a green background, as our
CSS.supports
call above returnstrue
. In browsers which do not support CSS variables the background will be red.Note that here I've also added checks to see whether
window.CSS
exists - this will prevent errors being thrown in browsers which do not support this JavaScript implementation and treat that asfalse
as well. (CSS.supports
was introduced at the same timeCSS
global was introduced, so there's no need to check for it as well.)Creating the
browserCanUseCssVariables()
functionIn your case, we can create the
browserCanUseCssVariables()
function by simply performing the same logic. This below snippet will alert eithertrue
orfalse
depending on the support.The Results (all tested on Windows only)
Firefox v31
Chrome v38
Internet Explorer 11
Set a CSS style with CSS variables and proof with Javascript and
getComputedStyle()
if it is set...getComputedStyle()
is supported in many browsers: http://caniuse.com/#feat=getcomputedstyleHTML
CSS
JavaScript
FIDDLE: http://jsfiddle.net/g0naedLh/6/
I had problems getting the
window.CSS.supports
method to work for testing css variables in chrome 49 (even though it has native support). Ended up doing this:Seems to work in all browsers I tested. Probably the code can be optimised though.