How to check if css value is supported by the browser?
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; }}
I assume you meant to check whether the vh value is supported, not whether specifically DIV#id bears it?
function cssPropertyValueSupported(prop, value) { var d = document.createElement('div'); d.style[prop] = value; return d.style[prop] === value;}cssPropertyValueSupported('width', '1px');// => truecssPropertyValueSupported('width', '1vh');// => maybe true, maybe false (true for me)cssPropertyValueSupported('width', '1foobar');// => false
We can since a while test from javascript if a css rule if available in the context with CSS.supports.
(Since Firefox 22/ Chrome 28)
console.log(CSS.supports("( transform-origin: 5% 5% )"),"\n",CSS.supports("( display: flex )"),"\n ",CSS.supports("( background-color: #12233212 )"))The CSS.supports() static methods returns a Boolean value indicatingif the browser supports a given CSS feature, or not.
https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports
To go further, we can possibly use this property for browser detection.