How to Check if "position: sticky" Is Supported by Browser Using CSS Only?

Check if CSS "position: sticky" is supported by the browser

You can simply use the @supports CSS at-rule to check if, for example position: sticky is supported in the browser, and accordingly you could apply different styling in that case (where you can choose to override the default styling or add new styling altogether). For example:

/* default styling goes here */

@supports (position:sticky) {
  /* styling for browsers that support "sticky" goes here */
}

For older browsers that don't support the @supports CSS at-rule, the entire @supports style block will be ignored.


Hope you found this post useful. It was published . Please show your love and support by sharing this post.