My bookmarks folder is a graveyard of “I’ll use this when Safari supports it” links. A few of them finally came good. Chrome 144 and Firefox 147 have landed, and with them anchor positioning and @scope hit Baseline status. That changes how you build layouts and handle styles, mostly because neither job needs a heavy JS library anymore.
Tethering elements with CSS anchor positioning
Positioning a tooltip or a context menu relative to a button usually ends in a fight with the browser’s scroll position. Chris Coyier posted a demo recently that builds context menus out of the Popover API and anchor positioning, and it handles the interest invokers and the discrete transitions natively.
Anchor positioning is Baseline now, so this ships to production today. Instead of a 50KB library calculating offsets, this is the whole thing:
.my-anchor {
anchor-name: --anchor-el;
}
.my-popover {
position: absolute;
position-anchor: --anchor-el;
top: anchor(bottom);
left: anchor(center);
}Scoping styles with @scope
The one I was waiting for out of these Modern CSS Features is @scope. Years of BEM naming and specificity chains that need an archaeology degree to debug come down to this: you can say where a style starts and where it stops. A block in the main content that shares a generic class name no longer leaks into your sidebar.
Firefox shipping it in their final release of the year makes it a standard tool rather than an experiment. You no longer need CSS-in-JS just to get component-level isolation.
Using your OS as a CMS
Jim Nielsen shared a more experimental workflow: using your OS as a CMS. With custom URL schemes he added “Edit Post” buttons to his site that open the local Markdown file straight in iA Writer. If you would rather write in a local editor than a web dashboard, it is a tidy workaround.
It is a link to a custom protocol, nothing more. 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 from the browser releases
- Chrome has joined Firefox in supporting the
TemporalAPI. Anyone who has handled time zones with the standardDateobject knows why that is worth celebrating. - The HTML document outline is officially dead. Screen readers never really supported it, so stop worrying about nested
<section>headers and stick to a logical H1 to H6 hierarchy. - Chrome 144 introduced a declarative
<geolocation>element, which is a cleaner way to ask for a user’s location than the old imperative JS approach.
If this stuff is eating your dev hours, I can take it on. I have been working with WordPress since the 4.x days.
Pragmatic over fancy
Stephen Margheim makes a point worth keeping in mind: you probably do not need tabs. Just because we can build interactive components with zero JS, that is no reason to over-engineer every element on the page. A plain list is often better for the reader and for your Lighthouse score. See you in two weeks.
