Css
.your-awesome-element {
/** Всегда устанавливается. */
width: 50%;
/** Перезатрёт предыдущее свойство, если поддерживается, иначе проигнорируется. */
width: 50vw;
}
Modernizr
Нужные тесты в ядро не входят (non-core detects), поэтому нужно собрать его под себя, указав css-vwunit.
Modernizr по умолчанию навешивает классы тестов на html:
.your-awesome-element {
width: 50%;
}
html.cssvwunit .your-awesome-element {
width: 50vw;
}
Или на js:
var units = ['%', 'vw'];
var element = document.querySelector('.your-awesome-element');
element.style.width = 50 + units[+Modernizr.cssvwunit];