Geek Answers Handbook

Using modernizr to detect vh, vw with calc

So, I had a problem when the browser is compatible with vh, vw and compatible with calc (), BUT it is not compatible with vh, vw units in calc. Therefore, I am not sure how to use modernizr to verify this particular case.

Any ideas for this? Many thanks!

+7
css viewport-units calc
source share
1 answer

You can add a custom test to 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 in Chrome 26 (returns false) and 41 (returns true). I was not sure what browsers do and do not support it, but you can simply run the following script to test it: http://jsfiddle.net/3dthsgv5/6/

This does not check only calc() , although I believe it is better to separate the problems. A separate test of calc() support is already present in Modernizr (but not in the default configuration) and can be found here: How to check if CSS calc () is accessible via JavaScript?

It is also worth noting that view units are not yet widely supported . Cases in which both calc and view units are supported but not merged are very rare.

+8
source share

More articles:


All Articles