Modern CSS features are moving so fast that my bookmarks folder is basically a graveyard of “I’ll use this when Safari supports it” links. Well, the wait is over for some of the big ones. Chrome 144 and Firefox 147 have officially landed, and with them, features like anchor positioning and @scope have finally hit Baseline status. This isn’t just a minor update; it’s a shift in how we build layouts and handle styles without reaching for a heavy JS library every five minutes.
Tethering Elements with CSS Anchor Positioning
We’ve all been there: trying to position a tooltip or a context menu relative to a button and ending up in a “race condition” with the browser’s scroll position. Chris Coyier recently showed a goldmine of a demo on building context menus using the Popover API and anchor positioning. The beauty of this is that it handles the “interest invokers” and discrete transitions natively.
Since anchor positioning is now Baseline, you can ship this to production today. Instead of a 50KB library to calculate offsets, you can do something as simple as this:
.my-anchor {
anchor-name: --anchor-el;
}
.my-popover {
position: absolute;
position-anchor: --anchor-el;
top: anchor(bottom);
left: anchor(center);
}Scoping Styles with @scope
One of the most anticipated Modern CSS Features in my world is @scope. If you’ve spent years wrestling with BEM or specificities that feel like they require a degree in archaeology to debug, this is for you. It allows you to define where a style starts and, crucially, where it stops. This prevents “leaky” styles from breaking your sidebar because a block in the main content shared a generic class name.
Firefox shipping this in their final release of the year makes it a standard tool in our kit. No more over-engineered CSS-in-JS just to get component-level isolation.
The “OS as a CMS” Concept
On a more experimental note, Jim Nielsen shared a brilliant workflow: using your OS as a CMS. By using custom URL schemes, he added “Edit Post” buttons to his site that open the local Markdown file directly in iA Writer. It’s a clean, pragmatic workaround for developers who prefer writing in local editors over a web-based dashboard.
You can implement this by simply linking to a custom protocol. For example, to open a file in VS Code at a specific line:
<a href="vscode://file/path/to/my-post.md:10:1">Edit locally</a>Quick Hits and Browser Shipments
- Temporal API: Chrome has joined Firefox in supporting the
TemporalAPI. If you’ve ever had to handle time zones with the standardDateobject, you know why this is a massive win. - HTML Document Outline: It’s officially dead. It was never really supported by screen readers anyway, so stop worrying about nested
<section>headers and stick to logical H1-H6 hierarchy. - Geolocation Element: Chrome 144 introduced a declarative
<geolocation>element. It’s a much cleaner way to request user location than the old imperative JS approach.
Look, if this Modern CSS Features stuff is eating up your dev hours, let me handle it. I’ve been wrestling with WordPress since the 4.x days.
Pragmatic Over Fancy
While these new features are exciting, Stephen Margheim makes a great point: you probably don’t need tabs. Just because we can build interactive components with zero JS now doesn’t mean we should over-engineer every UI element. Sometimes a simple list is better for the user and your lighthouse score. Stay pragmatic, keep shipping, and I’ll see you in two weeks.
