A statement you no doubt are shocked to hear uttered in the year 2024. 😂

So why are we styling XML news feeds like it’s 2004? It’s because some bloggers are sick of hiding their RSS/Atom feeds away where no one can find them…and then when they do, browser treat them as ugly text files—or worse, don’t let you do anything useful with them at all. It’s more confusing than helpful, and in an age where we desperately need to claw back control of publishing on the open web, making news feeds feel friendly and inviting is actually pretty smart.

Now available in Safari Technology Preview 186+ as well as Chromium-based browsers from 118 onward, @scope holds the potential to reshape how we think about formulating CSS selectors and handling scoping considerations.

But my favorite feature is what is called prelude-less scope, and it is directly tied to the use of <style> tags inline in HTML. It’s essentially what you imagine when you think of defining “scoped styles” in your HTML. Here is a very simple example…

The Government Digital Service blog for the UK has published an article about their performance gains across a variety of properties, with “reductions of up to 40% in CSS size on some pages.” The way they achieved these improvements is one which shouldn’t come as a huge surprise but is surprisingly not on many web developers’ radar (based on my own anecdotal experience discussing these sorts of issues).

The solution? Unbundling styles which are specific to certain pages and not the entire website and loading those styles on those specific pages, instead of loading all of a website’s CSS via a single bundle.