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.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.