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

user_5950715 0
Viewed 24161

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.

viewport browser css jquery javascript
8 Answers

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.

user_24947540

Use the new CSS @supports feature. You can do this from CSS and also from JavaScript.

CSS:

@supports(width: 1vh) {
  div#id {
    width: 1vh;
  }
}
/* Use at `@supports not` if you want to give an `else` condition */
@supports not (width: 1vh) {
  div#id {
    width: 3%;
  }
}

JavaScript way: The supports() method is provided in the CSS API to do this.

if(CSS.supports('width', '1vh')) {
  document.querySelector('div#id').style.width = '1vh';
} else {
  documen.querySelector('div#id').style.width = '1%';
}

Read more at CSS Conditional Rules

user_54737250

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

In Chromium browsers starting in version 100 you can now inspect using DevTools to see if a particular declaration (property + value) is supported.

Here is a screenshot of my website using Chrome 101 (Beta), which is the first Chromium version to support the font-palette property:

enter image description here

You can see in the green boxes that the @supports rule with the following conditions:

@supports (font-palette: dark) or (font-palette: light)

that in Chrome 101, both of the following declarations

font-palette: light;
font-palette: dark;

are supported.

Unlike the answers above, this is a pure DevTools -> Styles solution to determining support in a browser.

user_98586530
Related