Summary of WebKit features added in Safari 16



Apple released Safari 16 for iOS 16, macOS Monterey, and macOS Big Sur on September 12, 2022. This Safari 16 WebKit feature is explained by

Jen Simmons , Apple Evangelist on the Safari and WebKit Web Developer Experience team.

WebKit Features in Safari 16.0 | WebKit
https://webkit.org/blog/13152/webkit-features-in-safari-16-0/

According to Mr. Simmons, Safari 16 released this time contains various functions that were not in the beta version. You can understand the functions of Safari 16 Beta by reading the following article.

Webkit function of 'Safari 16 Beta' updated, web push function for macOS added - GIGAZINE



New features added from Safari 16 Beta include:

◆WebKit
AVIF is an image compression format developed by Alliance for Open Media as an alternative to image formats such as JPEG, PNG, GIF and WebP. Safari for iOS 16 supports this AVIF format still image, and has functions such as expression in multiple color spaces and lossless and lossy compression. AVIF is expected to be supported on macOS Ventura and iPadOS in October.

In addition, full support for the media query 'resolution', support for the CSS property 'text-align-last' that can set the alignment of the last line of the text block, support for ' :target ' in the :has() pseudo-class etc. are listed as new features of WebKit.

◆Passkeys
'Passkeys' supported by Safari on iOS is a technology that allows you to sign in to any service without a password using Touch ID or Face ID. It will also be supported on macOS Monterey, macOS Big Sur, macOS Ventura and iPadOS in October.

What is Apple's 'Passkeys' that makes passwords a thing of the past? -GIGAZINE



◆ Apple Pay
Safari 16 adds support for `` merchant tokens '' that efficiently support regular payments with Apple Pay, and support for ``multi-merchant payments'' that allows you to pay to multiple merchants in a single transaction. increase. Safari 16 also supports Order Tracking, which allows merchants to provide order and delivery status details via Wallet on the web, and Apple Pay is now available on all WKWebViews. It is said that it has become.

◆Web Inspector Extensions
Safari 16 now supports Web Inspector Extensions, allowing you to enhance the web developer tools built into Safari. In addition to adding the ability to synchronize extensions with iOS, iPadOS, and macOS, Safari 16 supports both Chrome extensions 'Manifest V2' and 'Manifest V3'.

◆Container query
Like media queries, container queries allow you to adjust layouts and styles based on the size of the container instead of the size of the viewport. He said he supports it. 'Size query' describes CSS that is applied only when the container is a certain size, and 'container query unit' specifies the length for the dimensions of the query container instead of the viewport. Units include 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', and 'cqmax'.

◆ Sub-grid
Subgrids allow grids to be nested by making grid items grid containers. This makes it possible to arrange items even in complex layouts without being constrained by the HTML structure, and Safari's grid inspector allows you to turn on any number of grid overlays. It is convenient when coding subgrids.

◆ Flexbox inspector
Safari 16 added a Flexbox inspector. Safari's Flexbox inspector visually distinguishes between excess empty space and flex gaps, and also displays item borders so you can see how items are distributed on both the major and cross axes of a flexbox container. It is said that you will be able to understand at a glance whether there is.



◆ Improved accessibility
Safari 16 introduces a rearchitecture of WebKit's accessibility support for macOS, which can improve performance and responsiveness while reducing hangs in VoiceOver functions. Accessibility support has also been significantly improved, with elements with 'display:contents' now properly represented in the accessibility tree.

◆ Improved animation
WebKit now supports CSS offset paths (motion paths), allowing web developers to animate objects along custom paths of arbitrary shape.

◆Support for overscroll-behavior
The CSS overscroll-behavior property now allows you to determine what happens when the user reaches the end of the scroll region.

◆Shared Worker
WebKit now supports SharedWorker. This allows all open tabs on the same domain to share the same SharedWorker.

◆Other additional functions and bug fixes
In addition to the above, Safari 16 added support for `` ShadowRealms '', and many bug fixes and functional improvements were made.

in Software, Posted by log1l_ks