Email or username:

Password:

Forgot your password?
Chris's posts Post Back to profile
Chris Coyier

The CSS feature `@​container style()` is pretty neat!

Are you familiar with `@​mixin` in Sass? It's a little bit like that.

1) Declare a chunk of CSS you want to re-use
2) Set a --custom-property to trigger it

SCSS code featuring a @mixin and then calling that mixin with an @include call.
CSS code setting up a @container (style) query watching for --featured: true; and then "calling" it by setting that custom property on two different selectors.
Examples of elements being styled with our custom chunk of code, making the background yellow and putting a star in the upper right area.
2 Aug 2023 at 20:24 | Open on front-end.social
3 comments
Sara Joy :happy_pepper:

@chriscoyier gah honestly the way CSS is being written keeps turning upside down lately, I can't keep up!

2 Aug 2023 at 20:28 | Open on front-end.social
Philipp

@chriscoyier thats interesting! Started with Sass (with WPCodebox an amazing wordpress code snippet plugin) and love it. Think I will stay at it, but lets see if @container style() is worth switching. Any benefits compared to Sass?

2 Aug 2023 at 20:28 | Open on social.anoxinon.de
Bobbing for Apples Annie 👻
Go Up