Touring New CSS Features in Safari 26

Safari 26 represents a significant milestone for web development on Apple platforms, introducing 75 new CSS features, 3 deprecations, and 171 additional improvements. This release brings CSS capabilities that developers have been eagerly anticipating, closing the gap with other browsers while introducing Apple-specific innovations that enhance the web platform as a whole.

For developers building Next.js applications and modern web experiences, these additions mean cleaner code, better performance, and more consistent cross-browser behavior. Our web development team stays current with these advances to deliver cutting-edge solutions for clients across all Apple devices.

Anchor Positioning: A New Layout Paradigm

Anchor positioning introduces a native CSS mechanism for attaching one element to another, eliminating the need for complex JavaScript calculations or CSS transform hacks that have been the standard approach for decades. This feature pairs exceptionally well with the popover attribute that shipped in Safari 17.0, enabling developers to create responsive menus, tooltips, dropdowns, and other UI patterns that adapt to different screen sizes and content lengths.

The Fundamentals

At its core, anchor positioning works by establishing a named relationship between two elements: an anchor element and an anchor-positioned element. The anchor element receives an anchor-name property with a dashed-ident value, while the anchor-positioned element uses position-anchor to reference that name.

.anchor-element {
 anchor-name: --profile-button;
}

.popup-element {
 position: absolute;
 position-anchor: --profile-button;
 position-area: top right;
}

The position-area property defines where the anchor-positioned element should appear relative to its anchor, using a grid-based system that covers the areas around and on top of the anchor element.

Scroll-Driven Animations: CSS Gets Motion

Scroll-driven animations represent a fundamental shift in how developers think about animation on the web. Rather than tying animations to time-based durations, scroll-driven animations link animation progress directly to scroll position, creating experiences that feel more connected to user interaction and content flow.

The scroll() and view() Functions

The scroll() function connects an animation to a scrollable container's scroll position, allowing the animation to progress as the user scrolls through content. The view() function links animation progress to an element's position within the viewport, enabling animations that trigger as elements enter, move through, or exit the visible area.

@keyframes grow-progress {
 from { transform: scaleX(0); }
 to { transform: scaleX(1); }
}

.reading-progress {
 animation: grow-progress linear;
 animation-timeline: scroll();
 transform-origin: left center;
}

The animation-range property provides precise control over when animations begin and end relative to scroll position, allowing developers to fine-tune the animation timing for specific visual effects.

The progress() Function: CSS Math Evolved

The progress() function adds a powerful new capability to CSS math, allowing developers to calculate how far along a value is between a start and end point. This function returns a unitless number that can be used in any CSS value that accepts numbers, opening up new possibilities for responsive and adaptive designs.

Basic Syntax

The progress() function accepts three arguments: the progress value to evaluate, the start value, and the end value. One of the most powerful aspects is its ability to work with mixed units, automatically handling type casting.

.adaptive-element {
 --viewport-progress: progress(100vw, 400px, 1000px);
 font-size: calc(16px + (var(--viewport-progress) * 8px));
}

This example calculates how far the viewport width has progressed between 400px and 1000px, then uses that value to interpolate font size across viewport sizes.

contrast-color() for Accessible Text

The contrast-color() function addresses a common accessibility challenge: ensuring text remains readable against dynamic background colors. This function automatically selects either black or white text based on which provides better contrast with the specified background color.

.button {
 --button-color: #6366f1;
 background-color: var(--button-color);
 color: contrast-color(var(--button-color));
}

This creates buttons with dynamic background colors that automatically adjust text color for optimal readability. The function evaluates the contrast ratio between the background and both black and white, selecting the color that meets or exceeds WCAG accessibility standards. Incorporating accessibility best practices like these improves SEO performance by making content available to all users.

text-wrap: pretty for Better Typography

Safari 26 introduces text-wrap: pretty, a value that optimizes how text wraps to improve readability and visual appearance. This feature goes beyond the basic wrap behavior to consider factors like line length balance, widow and orphan prevention, and overall paragraph aesthetics.

When applied to a block of text, the browser makes intelligent decisions about line breaks that go beyond simple word boundaries. The algorithm considers the overall paragraph structure, attempting to create lines of similar length and minimizing situations where single words appear isolated at the end of paragraphs.

.article-body {
 text-wrap: pretty;
}

Safari's implementation differs from Chrome's version by addressing multiple aspects of text layout quality, including rag improvement and reduced hyphenation, resulting in more visually appealing text across different viewport sizes.

Best Practices and Performance Considerations

Progressive Enhancement

While Safari 26 brings significant new capabilities, developers should continue practicing progressive enhancement. Features like anchor positioning and scroll-driven animations gracefully degrade in older browsers, but the experience may differ. When building modern web applications, consider providing fallback styles or JavaScript-based alternatives for critical functionality in browsers that don't support these features.

Animation Performance

Scroll-driven animations offer excellent performance because they run on the compositor thread, but developers should still be mindful of paint-heavy properties. Using transform and opacity ensures the best frame rates, while properties that trigger layout may cause scrolling performance issues.

Testing Across Browsers

The features in Safari 26 align closely with Chrome's implementations, but there may be subtle differences in specification interpretation. Test thoroughly across browsers to ensure consistent behavior.

Accessibility Considerations

The contrast-color() function provides a helpful accessibility foundation, but manual verification against WCAG guidelines remains necessary for complex designs. Scroll-driven animations should respect prefers-reduced-motion preferences. Partnering with an experienced web development agency ensures these considerations are properly addressed.

Sources

1. CSS-Tricks: Touring New CSS Features in Safari 26
2. WebKit Blog: WebKit Features in Safari 26.0
3. Apple Developer: Safari 26.0 Release Notes
4. WebKit Blog: Better typography with text-wrap pretty
5. WebKit Blog: How to have the browser pick a contrasting color in CSS