WebKit Features in Safari 16.5

Today we are pleased to share what new’s in WebKit for Safari 16.5.

After the massive, web-developer-feature-packed release of Safari 16.4, this version focuses predominately on polishing existing features and fixing bugs. Safari 16.5 does contain a handful of new features including CSS Nesting, :user-valid and :user-invalid, support for pre-orders and deferred payments with Apple Pay, and an update to Lockdown Mode.

CSS Nesting

Safari 16.5 includes support for CSS Nesting. A long-time favorite feature of pre-processors, nesting allows web developers to write code like this:

.foo {
  color: green;
 .bar {
    font-size: 1.4rem;
  }
}

Learn all about CSS Nesting — including the current limitation that prevents the use of an element selector (like article) without including a symbol (like &) before the element — in Try out CSS Nesting today.

The CSS Working Group is currently working on a very promising idea for removing the requirement that every nested selector begin with a symbol. Hopefully sometime in the future, that limitation will no longer exist.

CSS user valid and invalid pseudo-classes

The pseudo-classes :user-valid and :user-invalid are now supported in Safari 16.5.

For years, :valid and :invalid could be used to target an input field or other form field based on whether it is in a valid or invalid state. But there’s been one problem — as soon as a user starts typing, the content is evaluated and declared invalid if it doesn’t match. For example, an email address is marked :invalid as the first half is typed, before the @ is present. This has led to developers using JavaScript for this use case instead.

The new :user-invalid and :user-valid pseudo-classes are much smarter about when they are triggered, removing the need for JS. Compare :invalid to :user-invalid in a browser with support to see the difference.

These new pseudo-classes are especially helpful when combined with :has() to provide powerful tools for styling anything on the page, like the label of a form field.

Apple Pay

Apple Pay on the web now supports pre-orders and deferred payments.

Lockdown mode

Lockdown mode now disables WebCodecs API.

Lockdown mode is an optional, extreme protection that’s designed for the very few individuals who, because of who they are or what they do, might be personally targeted by some of the most sophisticated digital threats. Most people are never targeted by attacks of this nature.

Bug Fixes

WebKit for Safari 16.5 provides multiple bug fixes and feature polish.

CSS

• Fixed Scroll to Text Fragment sometimes scrolling to the top after reloading the page.
• Fixed support for x resolution unit in calc().
• Fixed reflecting trimmed block-start, block-end, inline-start, and inline-end margins for grid or flex items in computed styles.
• Fixed the top offset of self collapsing children at the end of a block container with block-end margin trim.
• Fixed triggering layout when changing margin-trim value.
• Fixed increasing column-count above 2 not updating the layout.
• Fixed CSS custom properties not applying to an SVG use element’s shadow tree.
• Fixed new CSS property unexpectedly dropped from an empty CSS rule when tabbing through or editing a selector.
• Made -webkit-image-set() an alias of image-set().

Editing & Forms

• Fixed hairline on the selection of bidi text.
• Fixed photo library picker showing videos for accept="image/*".

JavaScript

• Updated digital display in Intl.DurationFormat to match spec changes.

Layout

• Fixed text wrapping for bidi text when line-breaking.

Media

• Fixed non-audible AudioContext preventing the audio session to change from play-and-record after stopping capture.
• Fixed handling video streams containing a CodecDelay value that caused an audible pop at the beginning of video playback.
• Fixed video freezing in a video conference when removing AirPods Pro during the call.

Scrolling

• Fixed snapping to the last snap position when performing layout when scroll snapping occurs with a physical mouse wheel.
• Fixed pinch-to-zoom when toggling on and off scroll snapping.
• Fixed scroll snapping jumping to the previous page when swiping to the next page.
• Fixed scroll snapping to work with a physical scroll wheel on a mouse.

Rendering

• Fixed form controls rendering.
• Fixed visual updates for content: counter() when position: absolute is set.
• Fixed an unexpected visible first frame of a transform animation when !important style overrides the animated value.

Web API

• Fixed filling metadata headers for preflight requests.
• Fixed OffscreenCanvas WebGL to fire the context lost event.
• Fixed getFileHandle() to return a TypeMismatchError on unexpected entry type.

Web Apps

• Fixed “Untitled” label on the back to previous app button when opening a web app via a link.

Web Assembly

• Fixed WASM SIMD breaking WebP decoding applications.

Web Inspector

• Added initial support for color-mix CSS values.
• Fixed element ::backdrop rules showing up without a backdrop.
• Fixed “Selected element” console entry filling an entire row.
• Fixed an issue causing the mini console to always opens when choosing “Inspect Element”, even if it was previously closed.

Feedback

We love hearing from you. Send a tweet to @webkit to share your thoughts on Safari 16.5. Find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features. You can also read the Safari 16.5 release notes.

Updating to Safari 16.5

Safari 16.5 is available for macOS Ventura, macOS Monterey, macOS Big Sur, iPadOS 16, and iOS 16. Update to Safari 16.5 on macOS Monterey or macOS Big Sur by going to System Preferences → Software Update → More info, and choosing to update Safari. Or update on macOS Ventura, iOS or iPadOS, by going to Settings → General → Software Update.