Home Carbon Ads Check if CSS property is supported using CSS and JavaScript

Check if CSS property is supported using CSS and JavaScript

supports-css-feature-query

In this article I will show you different techniques to detect if a CSS property is supported by browser using CSS and JavaScript.

Detecting using CSS3

CSS3 provides @supports condition rule to check if a CSS property is support or not. Let’s see some example of using it

Detecting Using JavaScript

There are basically two ways to detect CSS property support using JavaScript.
Classical Method:
Developer been using in operator to detect if a CSS property is supported or not.

CSS.supports
CSS.supports is a function under the specification of CSS3 @support rule. Every browser supporting @support rule will support this function also.

There is also a polyfill available for CSS.supports function.

Official documentation for CSS3 @support rule.

Detecting support for @supports rule using JavaScript

As I mentioned above every browser supporting @supports CSS rule also support CSS.supports function. Therefore just check if CSS.supports is supported or not.

If you have overwritten the function using the above polyfill then you can check if the function contains native code or not. If it has native code then its supported otherwise not. Check this article to learn how to find out if a functions contains native code or not.

Narayan Prusty
Capturing Webcam Image Using JavaScriptPrioritising Downloading Of Webpage Resources
Comments: 2
  1. Jason
    5 years ago

    This feature looks promising and has been adopted on all the major browsers now, except one, the notorious IE… which has almost turned it to the other side, that is, completely useless…

    ReplyCancel
  2. uyghur2014
    7 years ago

    thanks for share

    ReplyCancel

Leave a Reply to uyghur2014 Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 2 Comments Web Development
Share this
Related Articles