How to Check for Both CSS Property and Value Support in Browsers?

Detecting Browser Support for CSS Properties and Values

Problem:

Determining whether a CSS property or value is supported by a particular browser is crucial to ensure cross-browser compatibility. However, existing solutions often focus solely on property support. How can we check both property and value support in CSS or JavaScript?

Solution:

CSS.supports

Modern browsers support the CSS.supports API, which allows for both property and value validation. The syntax is as follows:

<code class="css">CSS.supports(property, value);</code>

Example:

The following JavaScript code demonstrates the usage of CSS.supports:

<code class="javascript">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 )")
);</code>

The CSS.supports API returns true if the specified property and/or value is supported, and false otherwise. This allows for comprehensive cross-browser support testing.

The above is the detailed content of How to Check for Both CSS Property and Value Support in Browsers?. For more information, please follow other related articles on the PHP Chinese website!