Check Browser CSS Property Support with JavaScript

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

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

Check browser CSS property support with JavaScript?

I believe you can do it this way:

if ('WebkitTransform' in document.body.style 
 || 'MozTransform' in document.body.style 
 || 'OTransform' in document.body.style 
 || 'transform' in document.body.style) 
{
    alert('I can Rotate!');
}

CSS @supports vs Checking Support via JS

1. What is the best approach to checking CSS property support with @supports in older browsers not supporting this CSS syntax?

   This depends entirely on what you're trying to do. If you're checking support for a specific value of a property (such as flex for the display property), it is sufficient to provide a fallback value and let the cascade handle it for you in most cases.

   Using your example, it's as simple as:

   div {
       display: none;
       display: flex;
   }
   

   If you're dealing with an entire property that may not be supported in older browsers, then it depends entirely on what you're trying to accomplish with or without that property. For example, border-radius usually doesn't have any adverse effects on layout, so older browsers that don't support it will degrade gracefully without you having to do anything else. But other properties may have adverse effects on layout, and you will need to account for different properties and layout configurations differently.

2. Would it make sense or be practical to utilize both CSS and JS for this?

   If you're using JS to cover as many bases as possible, using CSS may either be redundant, or serve as a modern, non-JS alternative that will account for users who have disabled JS. This may also vary depending on what sort of feature you're detecting.

   Since this is about @supports, it's worth noting that there is a JavaScript API called CSS.supports which functions identically except you call it from within JavaScript. If you're not worried about users with scripting disabled, you can check if it is implemented and use it if it is, or your existing feature detection code otherwise:

   var supported = false;
   
   if (window.CSS) {
       supported = window.CSS.supports('display', 'flex');
   } else {
       // Your existing feature detection code here
   }
   

3. Is there some sort of if/else syntax for CSS @supports?

   There is no if/else syntax for CSS conditional at-rules such as @supports and @media, and even if there were, browsers that don't support @supports will likely ignore the else portion. If you need to account for older browsers, your only option is to use the cascade as shown above (and even if browser support isn't an issue, it's much simpler and covers most use cases).

   The other way is to duplicate the condition and prepend not to negate it, and the CSS rules in each @supports rule will be mutually exclusive (which is helpful if you want to include other properties that should be applied only when the property is not supported, and cannot be emulated using legacy syntax for older browsers):

   @supports (display: flex) {
       div { display: flex; }
   }
   
   @supports not (display: flex) {
       div { display: none; }
   }
   

Using CSS can I check if a browser supports the CSS Properties and Values API (Houdini) @property rule

Apparently best we can do at this point is to pretend that support of paint worklet denotes support of CSS Typed OM @property in style sheets: unlike @property, <property-accepting-image>: paint(<ident>) can be used in @supports block.

Una Kravets uses this in her @property dev.to article:

@supports (background: paint(something)) {
  /* [Typed OM `@property` should be supported here] */
}

She also notes that this is (was) not reliable in Chromiums from version 78 up to v84.

For current state of browsers according https://ishoudinireadyyet.com/ it should be safe to use this recommendation:

It seems plausible that UAs newly adopting Houdini will release support for both paint API and CSS OM in style sheets, i.e. the Chromium v84 scenario will not happen again. (And if it will, my bet is the Typed OM will be released prior to paint worklet, so the condition will be (unnecessarily) ignored in that versions.)

Check for browser support of display: contents

Browsers typically reject applying invalid style property values. So if you set the display value on a created element then check what that property returns they should match if supported.

function isvalidDisplay(val){
   var el = document.createElement('div');
   el.style.display = val;
   return el.style.display === val;
}

['inline','block','foobar','contents'].forEach(v=> console.log(v,isvalidDisplay(v)))

Checking if a CSS property is supported by a tag

If you want to know if a particoular property is present into an object you can do something like:

var image = document.createElement('img');
for (var key in image.style) {
    if (key == "color") image.style.key = "blue";
}

Warning 1: as said by others this check might have little sense, apart from particoular cases;

Warning 2: the upper code checks if the browser or the user has assigned a property to the object (eg. some browser like Webkit based do this for style, some other may not do it, like old IE).

How to feature detect for CSS custom properties?

You can reliably use CSS.supports() in JavaScript or @supports in CSS to detect support for custom properties. Every version of every browser that supports custom properties also supports this method of feature detection.

if (window.CSS && CSS.supports('color', 'var(--primary)')) {

  document.body.innerHTML = 'Supported';

}

@supports (color: var(--primary)) {

  body {

    background-color: green;

  }

}

---

Related Topics