10 Critical Updates in Safari Technology Preview 240 That Web Developers Need to Know

Safari Technology Preview Release 240 has landed, bringing a slew of vital improvements for macOS Tahoe and Sequoia users. Whether you're fine-tuning CSS, wrangling forms, or handling media playback, this update addresses several bugs and introduces a powerful new CSS feature. Already have it installed? Just hop into System Settings → General → Software Update to grab the latest. This release spans WebKit changes from 308418 to 309286, and it's packed with fixes that will make your life as a developer smoother. Below, we break down the ten most impactful changes you need to know about.

1. CSS Cascade Gets a New Tool: The revert-rule Keyword

The most exciting addition is the revert-rule CSS keyword, which lets you roll back the cascade to a state where the current style rule never existed. This gives developers unprecedented control over style overrides—especially useful in complex stylesheets or when implementing design systems. Instead of manually resetting properties or wrestling with specificity, you can simply apply revert-rule to undo the current rule's effect. It's a game-changer for managing competing styles in large projects and makes debugging cascade issues far more intuitive.

2. Custom CSS Scrollbars No Longer Cut Off on macOS

A persistent macOS bug that chopped off custom CSS scrollbars and mis-sized the scrollbar corner rect has been squashed. If you've been using ::-webkit-scrollbar pseudo-elements to style scrollbars, you might have noticed your thumb or track getting clipped. This fix ensures scrollbars render correctly across all macOS versions, restoring full control over their appearance. For developers building custom UI components with polished scrollbars, this is a welcome relief—no more ugly cutoffs or misaligned corners.

3. Hanging Punctuation Gets More Accurate: Apostrophes and Quotes Now Supported

Two critical fixes land for the hanging-punctuation property. First, the apostrophe (U+0027) and quotation mark (U+0022) are now correctly treated as hangable quotes, aligning with typographic best practices. Second, ideographic space (U+3000) can now hang when used with the first value. These changes mean your text will flow more naturally, with punctuation visually extending into margins—especially important for languages like Chinese and Japanese. If you rely on CSS hanging punctuation for elegant typography, this update makes it much more reliable.

4. Font Picker No Longer Becomes Unusable After Changing Fonts

Editing multiple lines of text? The Font Picker style selection previously froze after a font change, forcing you to restart your work. This bug, which affected rich text editing in web apps, has been fixed. Now you can switch fonts mid-edit without losing the ability to further adjust styles. While it sounds niche, this fix impacts any web-based text editor that uses the native font picker—such as content management systems, document editors, or note-taking tools—making the experience much smoother.

5. Emoji Images Survive Copy-Paste Across Different Websites

Ever copied text with an emoji from one site, only to have it turn into a broken square when pasted elsewhere? That issue is resolved: emoji images are now preserved correctly when copying and pasting content across different websites. This fix ensures that emoji render as intended, whether you're pasting into an email, a social media post, or a different web app. For anyone who often moves content between platforms, this eliminates a common frustration and keeps your communications visually intact.

6. Text Selection No Longer Jumps with Absolutely-Positioned Content inside user-select: none

Selecting text inside an element with user-select: none that contains absolutely-positioned child elements previously caused the selection to jump unexpectedly. This bug made it nearly impossible to highlight specific regions accurately. The fix ensures that text selection behaves predictably, even with complex positioning. Developers building interactive interfaces—like drag-and-drop areas, custom scrollable lists, or layered overlays—will especially benefit from this stability.

7. Keyboard Tabbing Position Preserved When Buttons Become Disabled

A frustrating accessibility issue: when a focused button got disabled, keyboard focus jumped back to the start of the page, disorienting users. This release corrects that behavior, preserving the tabbing position so focus stays where users expect it. This small but critical fix enhances keyboard navigation for forms, modals, and any UI where buttons are disabled dynamically. It's a win for both usability and web accessibility, ensuring that disabled controls don't disrupt the flow of interaction.

8. Viewport Meta and Margin Parsing Aligned with HTML Spec

Two parsing fixes tighten compliance. Viewport <meta> now treats form feed as ASCII whitespace per the HTML specification, which affects how mobile scaling is parsed. Additionally, pixel-length margin attributes on <body>, <iframe>, and <frame> elements are now correctly interpreted, preventing layout surprises. These changes might seem subtle, but they ensure that your pages render consistently across browsers when using viewport metatags or legacy margin attributes.

9. Major Media Playback Fixes: WebM, Opus, VP8, FairPlay, and More

This release is a treasure trove of media corrections. WebM audio with more than two channels now decodes successfully; MediaCapabilities.decodingInfo() correctly reports VP8 in WebM as supported; and MP4 files with Opus audio tracks can be decoded via decodeAudioData. Also, Live Text selection now works on paused fullscreen videos, and FairPlay-protected VP9 content plays via MediaSource without error. If you work with video or audio on the web, these fixes mean broader codec support and more reliable playback.

10. Autoplay and Time Updates Now Behave as Specified

Two important spec-compliance fixes: autoplay no longer proceeds before default text tracks finish loading, preventing missing subtitles. And currentTime getter now returns defaultPlaybackStartPosition when no media player exists, while HTMLMediaElement fires a timeupdate event when resetting playback position during media load. These changes ensure that media elements behave predictably and according to standards, reducing edge cases that could break playback in interactive applications.

From cascade control to media bug squashing, Safari Technology Preview 240 delivers meaningful improvements for web developers and designers alike. If you haven't already, download or update the preview via System Settings to test these fixes firsthand. Your code—and your users—will thank you.