Post

CSS style() queries landed in Firefox 151 making them newly available across engines. Here's how they work:

I like how this example shows that style queries lead to less surprises (cascade specificity). I’m struggling with this use case, though. With classes, I would exclusively set the class to normal or warning directly on the banner. Why style a banner with parent and grandparent containers instead?

This example was based on an issue I faced while working at Shopify. We had a component system where we wanted child components to inherit the 'tone' of the parent, so things like buttons/banners/etc would have the right tone if a parent set one.

It's kinda funny, a couple of people have said this example is "contrived", yet it's one of the 'realest' examples I've done.

I guess it's TOO REAL