Adonis K.

Frontend Engineer

How to check if your browser supports CSS3's calc with JavaScript

Recently I had to use CSS3's calc() value for a website I was designing and it seemed ridiculous to include a whole library (Modernizr) for just 1 CSS property's value. So I decided to write a small script to detect if calc was supported by the browsers or not (and it seems like it's rather similar to Modernizr's way of detecting it). So, here is the script:

// returns true if your browser supports calc()
checkCalc = function (prefix) {
    prefix = prefix || '';
    var el = document.createElement('div'); = prefix + 'width: calc(1px);';
    return !!;

// returns true if your browser supports any version of calc(), prefixed or not
checkAllCalc = function () {
    return checkCalc('-webkit-') || checkCalc('-moz-') || checkCalc();

Now you can:

  1. check webkit prefixed support
  2. check moz prefixed support
  3. check unprefixed/spec support
  4. or all of the above