On this page
The Safari 26 beta announcement at WWDC25 came with a long feature list. Rather than remember every API name, I am more interested in the small annoyances that might take less work: awkward paragraph wrapping, a menu under an avatar, and a reading progress bar.
Keep one word from sitting on its own#
A short card description can still end with a single lonely English word. Adding a manual line break fixes one screen width and often makes another worse.
Safari 26 beta adds text-wrap: pretty, which adjusts line breaks to improve uneven edges and reduce very short final lines.
.article p,
.card-description {
text-wrap: pretty;
}It does not promise perfect typography in every paragraph. Still, article text and card descriptions are easy places to try an improvement that does not require editing the content. The result depends on your actual font, copy, and column width.
Put the account menu under the avatar#
Click the avatar in the corner and show Profile and Sign out underneath it. Simple enough, until the layout moves the avatar or the menu runs into the edge of the screen.
CSS Anchor Positioning lets you express that relationship directly. Name the avatar with anchor-name, connect the menu using position-anchor, and choose which side it should occupy. Alternative positions can handle insufficient space, reducing the need to read coordinates and calculate offsets yourself.
That interests me more than another elaborate effect. A menu belongs next to its button, and CSS can now describe that relationship. Positioning does not, however, handle opening, closing, or keyboard interaction for you.
Let scrolling fill a progress bar#
Long articles sometimes have a thin bar across the top that fills as you scroll. Traditionally, this meant listening for scroll events and calculating the distance in JavaScript.
Scroll-driven Animations can tie a CSS animation to scrolling instead. A bar can animate from empty to full, with animation-timeline: scroll(root) connecting it to the page's scroll progress. Scroll back up and it retreats; it is not simply an animation that plays once after loading.
If comments follow the article, whole-page scroll progress is not the same as progress through the article. Deciding which one the bar represents matters more than choosing its color.
Of these three, text wrapping is what I would try first: the comparison is easy to make on an existing page. Menus and scroll animations can follow when there is a reason to use them. These features were announced for Safari 26 beta; a production site still needs to account for the browser versions its readers actually use.