February 12th, 2024 × #css#frontend#webdev
CSS Native @scope
This episode covers the new native CSS scoping feature using the @scope rule, how it works, what problems it solves, and browser support status.

Wes Bos Host

Scott Tolinski Host
In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations.
Show Notes
- 00:00 Welcome to Syntax!
- 01:00 Brought to you by Sentry.io.
- 01:33 Why scope your CSS?
- 03:21 Scott's hot take.
- 05:43 How does @scope CSS work?
- 07:31 Similar to a component-based workflow.
- 08:00 Not having to specify a selector for your scope.
- 09:52 Pseudo inline hover styles.
- 11:31 Donut scope.
- 13:01 "Inverted donut-hole scope"
- 14:50 Browser support + limitations.
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads