How to Check If CSS Value Is Supported by the Browser

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!');
}

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.)

What is the most practical way to check for @supports support using only CSS?

@supports currently only tests property/value combinations, and nothing else. Your other options don't work because none of them are valid (including the last one with just the at-keyword followed by the opening brace!). The property/value pair requirement is dictated by the grammar for @supports, which you can find in the spec.

Simply test for a property/value pair that you know is guaranteed to work across all user agents whether or not @supports is implemented. This (sort of) eliminates the possibility that you'll run into a user agent that implements @supports but not that property/value combination, focusing on its support for @supports instead.

Your given example of display: block will suffice. Your use of the cascade to check if a browser does not implement @supports by overriding declarations within a @supports rule for browsers that do support it is also acceptable (being the only obvious way to do it anyway).

Test if a browser supports a CSS selector

Workaround for your case:

<input type=checkbox checked=checked>

css:

input{
  font-family:'arial';
}
input:checked{
  font-family:'sans-serif';
}

checking procedure: js

alert($('input').css('font-family')=='sans-serif'?'supported':'not supported');

How can I detect CSS Variable support with JavaScript?

We can do this with CSS.supports. This is the JavaScript implementation of CSS's @supports rule which is currently available in Firefox, Chrome, Opera and Android Browser (see Can I Use...).

The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.
– Mozilla Developer Network

With this, we can simply:

CSS.supports('color', 'var(--fake-var)');

The result of this will be true if the browser supports CSS variables, and false if it doesn't.

(You might think that CSS.supports('--fake-var', 0) would work, but as noted in comments on this answer Safari seems to have a bug there making it fail.)

Pure JavaScript Example

On Firefox this code snippet will produce a green background, as our CSS.supports call above returns true. In browsers which do not support CSS variables the background will be red.

var body = document.getElementsByTagName('body')[0];

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

  body.style.background = 'green';

} else {

  body.style.background = 'red';

}

How to check if -webkit-text-stroke is supported in browser

You can use @supports to test this.

@supports (-webkit-text-stroke: green) {
  div {
    -webkit-text-stroke:green;
  }
}

The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

MDN Reference

Is it possible to do a CSS @supports check on a @media rule?

This does not seem to work. Should it work?

No; @supports only supports property declarations, not at-rules or indeed any other grammatical construct in CSS. You're not looking to check for support for the @media rule anyway; you're trying to check for support for specific media features. But @supports doesn't support that either, even though media features share the same declaration syntax with property declarations.

To that end, you don't need the @supports rule at all. To check if a browser supports a certain media feature, simply write a @media rule with a media query list containing both the media feature and its negation:

@media not all and (pointer), (pointer) {

  p { color: green; }

}

<p>If this text is green, your browser supports the <code>pointer</code> media feature.

---

Related Topics