Use @supports At-Rule for Feature Detection in CSS
Learn how to detect browser feature support in CSS using @supports at-rule.
🔥 How :has() parent selector works: • In-Depth Guide to CSS Parent Selector... 🔥
📚 Resources
Codepen Demo: https://codepen.io/ZoranJambor/pen/ab...
Supports at-rule on MDN: https://developer.mozilla.org/en-US/d...
📖 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:
💌 https://css-weekly.com/
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
Zoran Jambor
#css