How can I detect CSS Variable support with JavaScript?
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...).
The
CSS.supports()static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.
– Mozilla Developer Network
With this, we can simply:
CSS.supports('color', 'var(--fake-var)');The result of this will be true if the browser supports CSS variables, and false 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 returns true. In browsers which do not support CSS variables the background will be red.
var body = document.getElementsByTagName('body')[0];if (window.CSS && CSS.supports('color', 'var(--fake-var)')) { body.style.background = 'green';} else { body.style.background = '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 as false as well. (CSS.supports was introduced at the same time CSS global was introduced, so there's no need to check for it as well.)
Creating the browserCanUseCssVariables() function
In your case, we can create the browserCanUseCssVariables() function by simply performing the same logic. This below snippet will alert either true or false depending on the support.
function browserCanUseCssVariables() { return window.CSS && CSS.supports('color', 'var(--fake-var)');}if (browserCanUseCssVariables()) { alert('Your browser supports CSS Variables!');} else { alert('Your browser does not support CSS Variables and/or CSS.supports. :-(');}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=getcomputedstyle
HTML
<div class="css-variable-test"></div>CSS
:root { --main-bg-color: rgb(1, 2, 3); /* or something else */}.css-variable-test { display: none; background-color: var(--main-bg-color);}JavaScript
var computedStyle = getComputedStyle(document.getElementsByClassName('css-variable-test')[0], null);if (computedStyle.backgroundColor == "rgb(1, 2, 3)") { // or something else alert('CSS variables support');}FIDDLE: http://jsfiddle.net/g0naedLh/6/
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.
@supports (display: var(--prop)) { h1 { font-weight: normal; } /* all the css, even without var() */}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 use flex-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:
body { --color-heading: green; }article { --color-heading: blue; }h1 { color: var(--color-heading); } /* no need for descendant selectors */