How to check if css value is supported by the browser?

Question

Im not very skilled in javascript so please be bear with me. Safari 6 and below and older android mobile browsers and maybe more do not support the css value VH. My DIV#id or class is not the height of the viewport. Below is a link to a page i found some useful information, but im really not sure how to use it with a css value:

Check whether a css value is supported

Here is the code given as a shortcut for you:

if('opacity' in document.body.style) {      // do stuff }  function isPropertySupported(property{    return property in document.body.style;  } 

In the comments of the link i attached above someone does ask how to check if a css VALUE is supported and the answer is, "You set it, then read the value back and check if the browser retained it." Now im sure that would be useful information if i knew more javascript which i have just started to learn.

This is what i have in mind but im really not sure how to go around doing this. Check if div#id or div.class has vh css value. Check whether the css value is supported by the browser. If its supported then keep loading. If not supported then change id or class.

So to sum up my question:

How do i check if a css value is supported by the browser using javascript or jquery?

Guidance to the answer is really appreciated. Thanks for your help.

Answer 1

There is the new API CSS.supports. Supported in most browsers except IE.

console.log(    // CSS.supports(property, value)    1, CSS.supports("text-decoration-style", "blink"),    2, CSS.supports("display", "flex"),    3, CSS.supports('--foo', 'red'),    4, CSS.supports('(--foo: red)'),      // CSS.supports(DOMstring)    5, CSS.supports("( transform-origin: 5% 5% )"),    6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or "     + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")  )

And there is a similar feature in CSS, the @supports feature query selector, also supported in most browsers except IE:

@supports (display: grid) {   div {     display: grid;   } } @supports not (display: grid) {   div {     float: right;   } }