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.

or

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

Play / pause the audio
Minimize / expand the player
Mute / unmute the audio
Seek backward 30 seconds
Seek forward 30 seconds
Increase playback rate
Decrease playback rate
Show / hide this window