Итак, я столкнулся с проблемой, когда браузер совместим с единицами vh, vw и совместим с calc(), НО не совместим с единицами vh, vw в calc. Поэтому я не уверен, как использовать modernizr для проверки этого конкретного случая.
Любые идеи для этого? Огромное спасибо!
Вы можете добавить собственный тест в Modernizr, который проверит это за вас:
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";
});
Протестировано на Chrome 26 (возвращает false) и 41 (возвращает true). Я не был уверен, какие именно браузеры поддерживают и не поддерживают это, но вы можете просто запустить следующую скрипту, чтобы проверить это: http://jsfiddle.net/3dthsgv5/6/
Это не тест только для calc(), хотя я считаю, что лучше разделить проблемы. Отдельная проверка поддержки calc() уже присутствует в Modernizr (просто не в конфигурации по умолчанию), и ее можно найти здесь: Как я могу проверить, доступен ли CSS calc() с помощью JavaScript?
Также стоит отметить, что единицы области просмотра пока не широко поддерживаются. Случаи, когда и calc, и единицы области просмотра поддерживаются, но не объединяются, очень редки.
