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 o

Answer 1

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 indicating if 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.

Answer 2

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');
// => true
cssPropertyValueSupported('width', '1vh');
// => maybe true, maybe false (true for me)
cssPropertyValueSupported('width', '1foobar');
// => false

Answer 3

I'd suggest to use Modernizr.

Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor's browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them.

Some useful links:

• Modernizr: the feature detection library for HTML5/CSS3

• Using Modernizr to detect HTML5 features and provide fallbacks

• HTML5 Boilerplate custom build of Modernizr for feature detection

Answer 4

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;
  }
}

Answer 5

I see the code you have there.

var styletotest = "PutStyleHere";

if (styletotest in document.body.style)
{
    alert("The " + styletotest + " property is supported");

} else {

    alert("The " + styletotest + " property is NOT supported"); 

}

Simply place the css property you want to test in the quotes where it says

PutStyleHere

And when you load the file it will show a popup telling you if it works or not.

However this seems unnecessary.

Simply Googling:

[property] css W3

where [property] is the property you want to know browser support information.

When I searched

Opacity Css W3

and then clicked on the W3 link... you can scroll down and you will see a section of the page with the info you want like this:

Source

Answer 6

This is my code that accounts for totally unsupported properties by checking for presence of camel-Case props in the style, and uses CSS.supports if available.

const prefixes = ['', '-webkit-']

function supports(prop, value) {
  if ('CSS' in window && 'supports' in window.CSS) {
    for (let i = 0; i < prefixes.length; i++) {
      const property = prefixes[i] + prop

      if (window.CSS.supports(property, value) ) { return true }
    }
    return false
  }

  const el = document.createElement('div')

  let found = false
  prefixes.forEach((pr) => {
    if (found) return
    const p = `${pr}${prop}`
    const Prop = p.replace(/-(.)/g, (m, s) => s.toUpperCase())
    if (!(Prop in el.style)) return
    el.style[p] = value
    found = el.style[p] == value // can just check if it's not empty actually
  })
  return found
}