using modernizr to detect vh, vw with calc

Question

So I have run into a problem where a browser is compatible with vh, vw units and is compatible with calc(), BUT is not compatible with vh,vw units in calc. So I'm not sure how to use modernizr to test for that specific case.

Any ideas for this? Thanks so much!

Answer 1

You can add a custom test in Modernizr that checks this for you:

Modernizr.addTest('calcviewportunits', function(){
    var computedHeight, 
        div = document.createElement('div');

    div.style.height = 'calc(10vh + 10vw)';
    document.body.appendChild(div);
    computedHeight = window.getComputedStyle(div).height;
    document.body.removeChild(div);

    return computedHeight !== "0px";
});

Tested on Chrome 26 (returns false) and 41 (returns true). I wasn't sure which browsers exactly do and don't support this but you can just run the following fiddle to test it: http://jsfiddle.net/3dthsgv5/6/

This does not test for just calc() though, I find it better to separate concerns. A separate check for calc() support is already present in Modernizr (just not in the default configuration) and can be found here: How can I check if CSS calc() is available using JavaScript?

Also might be worth noting that viewport units aren't widely supported yet. The cases where both calc and viewport units are supported but not combined are very rare.