Uploaded May 2022 | Updated September 2026, 1 week ago
Learn how to detect browser feature support in CSS using @supports at-rule.
🔥 How :has() parent selector works: youtu.be/OqLquBs-bEg 🔥
📚 Resources
Codepen Demo: codepen.io/ZoranJambor/pen/abqJXOX/e56a93dadad8a195726bfa78efe1a801
Supports at-rule on MDN: developer.mozilla.org/en-US/docs/Web/CSS/@supports
📖 Chapters
00:00 Introduction
00:11 Why you should use feature detection
00:39 How @supports at-rule works
01:42 How to check browsers feature support on caniuse.com
02:26 How "not" keyword in @supports works
02:48 How "and" and "or" operators in @supports work
03:51 How to nest @supports rules
04:15 How to nest @supports directly within selectors in Sass
04:49 How to test support for CSS Custom Properties
05:12 How to test for selector and pseudo-classes support
05:55 How to test for at-rules support (@layer, @scope)
06:39 How to use @supports feature detection in JavaScript
07:16 Conclusion
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css
Learn how to detect browser feature support in CSS using @supports at-rule.
🔥 How :has() parent selector works: youtu.be/OqLquBs-bEg 🔥
📚 Resources
Codepen Demo: codepen.io/ZoranJambor/pen/abqJXOX/e56a93dadad8a195726bfa78efe1a801
Supports at-rule on MDN: developer.mozilla.org/en-US/docs/Web/CSS/@supports
📖 Chapters
00:00 Introduction
00:11 Why you should use feature detection
00:39 How @supports at-rule works
01:42 How to check browsers feature support on caniuse.com
02:26 How "not" keyword in @supports works
02:48 How "and" and "or" operators in @supports work
03:51 How to nest @supports rules
04:15 How to nest @supports directly within selectors in Sass
04:49 How to test support for CSS Custom Properties
05:12 How to test for selector and pseudo-classes support
05:55 How to test for at-rules support (@layer, @scope)
06:39 How to use @supports feature detection in JavaScript
07:16 Conclusion
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css
