using modernizr для обнаружения vh, vw с calc

Question

Так что у меня возникла проблема, когда браузер совместим с vh, vw единицами и совместим с calc(), НО не совместим с vh, vw единицами в calc. Поэтому я не уверен, как использовать modernizr для тестирования этого конкретного случая.

Любые идеи для этого? Спасибо!

Answer 1

Вы можете добавить пользовательский тест в 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 (возвращает ложь) и 41 (возвращает True). Я не был уверен, что браузеры точно это делают и не поддерживают это, но вы можете просто запустить следующий скрипт, чтобы проверить его: http://jsfiddle.net/3dthsgv5/6/

Это не проверяет только , хотя я считаю, что лучше разделить проблемы. Отдельная проверка поддержки calc() уже присутствует в Modernizr (только не в конфигурации по умолчанию) и может быть найдена здесь: How can I check if CSS calc() is available using JavaScript?

Кроме того, возможно, стоит отметить, что видовые единицы не widely supported еще. Случаи, когда поддерживаются calc и единицы просмотра, но не объединены, очень редки.