Use @supports At-Rule for Feature Detection in CSS

Published: 19 May 2022
on channel: CSS Weekly

885

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

On this page of the site you can watch the video online Use @supports At-Rule for Feature Detection in CSS with a duration of hours minute second in good quality, which was uploaded by the user CSS Weekly 19 May 2022, share the link with friends and acquaintances, this video has already been watched 885 times on youtube and it was liked by 51 viewers. Enjoy your viewing!