How Can I Determine Browser Support for CSS Properties and Values?

Determining Browser Support for CSS Properties and Values

You have encountered an issue where a CSS property (vh) is not working consistently across browsers. To resolve this, you seek a method to check if both properties and values are supported. While Lea Verou's article provides insights, it is unclear how to apply it to CSS values specifically.

Using CSS.supports

Modern browsers now offer the CSS.supports API, which allows you to verify support for specific properties and values. Here's how you can use it:

<code class="javascript">console.log(
  // Check for property support
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),

  // Check for value support
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // Check for more complex property and value combinations
  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 )")
);</code>

In this example, various properties and values are tested. The console output will display "true" for supported features and "false" for unsupported ones. This API provides a concise and efficient way to verify browser support for both properties and values.

The above is the detailed content of How Can I Determine Browser Support for CSS Properties and Values?. For more information, please follow other related articles on the PHP Chinese website!