WebKit Features in Safari 16.1
- Read original article here
WebKit Features in Safari 16.1
Feedback
Today, Safari 16 arrives for macOS Ventura and iPadOS 16. Numbered Safari 16.1, this release is also available for iOS 16, macOS Monterey, and macOS Big Sur.
To update to Safari 16.1 on macOS Monterey or macOS Big Sur, go to System Preferences → Software Update → More info. To update your Mac to macOS Ventura , go to System Settings → Software Update. To update to Safari 16.1 on iPad and iPhone, update iPadOS 16 and iOS 16 in Settings → General → Software Update.
Features that shipped in September’s Safari 16.0 include Container Queries, Subgrid, Web Inspector Extensions, Flexbox Inspector, Offset Path, Overscroll Behavior, Shared Workers, Shadow Realms, resolution media query, :has(:target), text-align-last, animation-composition, discrete animation, accessibility improvements for display: contents, improved VoiceOver performance, additional Apple Pay support, new Web Extension APIs, Manifest version 3 support, and much more . Safari 16.1 brings all of these features to iPadOS 16 and macOS Ventura.
Now let’s look at the new features and fixes arriving with Safari 16.1.
Web Push for macOS Ventura
Safari 16.1 for macOS Ventura brings support for Web Push to Safari. Websites and web apps can now remotely send notifications using the same standards supported in other browsers — Push API and Notifications API , along with Service Workers — and deliver those notifications even when Safari isn’t running.
In Safari, users of your website or web app opt into notifications by first indicating interest through a user gesture — such as clicking a button. Then they’ll be prompted to give permission for your site or app to send notifications. Users can view and manage notifications in Notifications Center. And they can customize styles and turn notifications off per website in Notifications Settings.
If you’ve already implemented Web Push for your web app or website using industry best practices, it will automatically work in Safari. You do not need to be an Apple Developer Program member. However, if you’ve excluded Safari through browser detection, you’ll need to switch to feature detection to get it working. Web Push in Safari uses the same Apple Push Notification service that powers native push on all Apple devices. If you tightly manage push endpoints on your server, be sure to allow URLs from any subdomain of push.apple.com.
To learn more, watch the WWDC session Meet Web Push for Safari (15 min video), or read the article Meet Web Push on webkit.org.
Animated AVIF
Safari 16.0 brought support for AVIF still images to iOS 16. Safari 16.1 adds support for AVIF animated image sequences. Now both still and moving images saved in the AVIF format are supported on iOS 16, iPadOS 16, and macOS Ventura.
Passkeys
In September, iOS 16 introduced passkeys. Now with Safari 16.1, passkeys are supported everywhere Safari 16 is supported — including iPadOS 16, macOS Monterey, macOS Big Sur, and macOS Ventura, as well as iOS 16. Passkeys provide users with an incredibly easy way to log in, while delivering a profound increase in security .
The technology that makes passkeys possible is defined in open standards from the FIDO Alliance and the W3C, including the WebAuthn standard, which already has widespread support in browsers . Passkeys are an industry-wide effort, and “passkeys” is a common noun, to be used by anyone. You can offer passkeys alongside your existing authentication options. First, teach your backend to store public keys and issue authentication challenges. Then, on your website or web app, offer passkeys to users by adopting the APIs for creating new passkeys and allowing users to sign in with their passkey. If your website or web app already supports using a platform authenticator with WebAuthn, there are a few things to note as you add support for passkeys. Make sure you aren’t limiting signing in to the device that saved the passkey; that is, don’t use a cookie to “remember” that a user set up a key on a particular device. Also, make sure the username fields in your existing sign-in forms are compatible with AutoFill by adopting “conditional mediation”. Finally, start to refer to passkeys, and treat them as a primary way to sign in.
To learn more, watch the WWDC22 session, Meet Passkeys (27 min video) or read Supporting passkeys .
New viewport sizes on iPadOS
iPadOS 16 introduces an entirely new multitasking experience with Stage Manager. This means browser windows on iPadOS can be resized to many different viewport sizes and aspect ratios. Responsive web design techniques, including the use of CSS media queries and container queries, are key. There’s never been a single “tablet size” for layout, and now that’s more true than ever.
Hover on iPadOS with Apple Pencil
The new iPad Pro supports hover with Apple Pencil. In web browsers, users see hover states for links, animations, and more. Hover on iPadOS is yet another example of how structuring code using feature detection , instead of device or UA detection , helps future-proof websites and web apps.
Scroll to Text Fragment
Safari 16.1 adds support for Scroll to Text Fragment , making it possible to include a text directive for finding a text fragment as part of a URL. When a user navigates to a URL that includes such a directive, the browser scrolls the text fragment into view and marks it with a persistent highlight.
Screen capture improvements
On macOS Ventura, Safari 16.1 adds support for capturing a specific Safari window with getDisplayMedia() . Calling getDisplayMedia in response to a user action will show the user a prompt asking for permission to allow the sharing of their screen or a specific window of an application, including Safari windows. The MediaStream provided by getDisplayMedia contains a video stream of the screen or window that can be recorded, or used as part of a WebRTC session.
And More
Safari 16.1 adds support for web-to-App Store advertising with SKAdNetwork. It also adds support for WebDriver Wheel input source and actions. Safari Web Inspector adds support for the color picker to pick a color from any pixel on the screen.
Fixes and Polish
Safari 16.1 also contains bug fixes and feature polish. Many of these fixes improve the Interop 2022 score for Safari. The test pass rate for Safari Technology Preview 156 is now 97.3%. That’s calculated from 87.3 points of a possible 90. The remaining 10 points are joint “investigation projects”.
Accessibility
Fixed display:contents buttons failing to expose their accessible name.
CSS
Fixed dynamic viewport height units (dvh) not matching the actual viewport height.
Fixed scroll-snap properties set on to stop propagating to the viewport.
Fixed logical viewport units to properly resolve for font-size.
Fixed containing blocks with a non-visible overflow incorrectly clipping position: fixed descendants.
Fixed table user-agent styles to use box-sizing: border-box.
Fixed
Fixed handling layout and paint containment.
Fixed handling font-variant: normal and font-variant: none shorthands to reset font-variant-numeric and font-variant-alternates.
Fixed small caps handling to prevent synthesizing if any character in the font supports small caps.
Forms
Fixed the ignored CSS color property on
elements.
when appearance: textfield is set.
Fixed applying the readonly attribute to the correct
types and
element. Fixed the content width for to not include decorations. Fixed input type state changes to correctly handle missing or empty string value attributes. Fixed form.submit() to submit a single form to multiple frames concurrently. Fixed cloning a to not set the initial selection at the end of the text content. Fixed not firing a select event when setting a selection range results in no change to the selection. Media Fixed some AVIF images not rendering because of their container format. Rendering Fixed preventing background propagation on with any containment. Security Fixed COOP same-origin breaking forms after a back navigation. Fixed script-src-elem CSP in Workers. Web API Fixed focus behavior for shadow DOM and the element to align with specifications. Feedback We love hearing from you. Send a tweet to @webkit, @jensimmons, or @jonathandavis to share your thoughts on Safari 16.1. If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technology 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 use the WebKit Feature Status page to watch for new information about the web features that interest you the most. To learn more about what’s in Safari 16.1 for web developers, read the Safari 16.1 release notes. PreviouslyRelease Notes for Safari Technology Preview 156Learn more @webkit Site Map Privacy Policy Licensing WebKit WebKit and the WebKit logo are trademarks of Apple Inc.
