729

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

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

or
Show Notes Transcript

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.

Mozilla @scope

The Style Element

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Share