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... }
CSS variables have access to the DOM, which means that you can change them with JavaScript.
CSS variables are currently supported for 93 percent of users globally. CSS variables are currently supported for 93 percent of users globally. If a browser doesn't support CSS variables, it also doesn't understand the var() function, and doesn't know what its second argument means.
CSS is applied to both HTML and XML. JavaScript is applied on HTML only. There is more scope for Optimization in the case of CSS. JavaScript does not support these types of optimizations because it does not have access to those APIs.
To declare a variable in CSS, come up with a name for the variable, then append two hyphens (–) as the prefix. The element here refers to any valid HTML element that has access to this CSS file. The variable name is bg-color , and two hyphens are appended.
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.)
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.)
browserCanUseCssVariables()
functionIn 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. :-('); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With