WebKit Officially Announces New Web Features in Safari 16 Beta Version! Developer "Are you forcing iOS browsers to use Safari?"

At the just-concluded Apple WWDC2022, in addition to the latest iOS 16 beta system, WebKit officially announced that it will launch the main web technology of the Safari 16 beta version. Currently, members of the Apple Developer program can test Safari 16 by installing the developer beta version of macOS Ventura, iOS/iPadOS 16.

WebKit announces new web features in Safari 16 Beta

On June 6, Pacific Time, the official WebKit blog posted a detailed introduction to the new WebKit features in the Safari 16 Beta version. The details are as follows:

• Web Inspector extension

The new Safari 16 supports the Web Inspector extension, which enhances Safari's built-in browser development tools, especially when using powerful third-party frameworks and services. Using the Safari Web Inspector extension, users can install developer tools extensions from these frameworks and services, making development faster and easier.

The Safari Web Inspector extension uses the same JavaScript API as DevTools extensions in other browsers, making it easy for DevTools extension creators to port them to Safari. Meanwhile, the Web Inspector extension joins other improvements to the Safari web extension, including the ability to sync extensions enabled on iOS, iPadOS, and macOS.

• Container Queries

Similar to Media Query, Container Query allows users to adjust the layout or style of specific items on a web page based on the size of the container rather than the size of the viewport.

Safari 16 supports Size queries and container query units. Container query units are similar to viewport units, but they specify the length of the dimension relative to the query container rather than the viewport.

• Web Push feature on macOS

Safari 16 on macOS Ventura is coming soon with Web Push, which enables remote notifications to users of websites and web applications, both when Safari is not running, via the Push API and the Notifications API.

Web Push-in Safari uses the same Apple Push notification service to provide native push functionality for all Mac and iOS devices. It is reported that Apple will provide the Web Push function for iOS and iPadOS systems in 2023.

• Subgrid

The advent of CSS Grid revolutionized the possibilities of web layout design, and subgrids took the grid to another level, providing an easy way to drop children of a grid container onto that grid. It arranges items across complex layouts without being constrained by HTML structure. Safari's grid inspector allows users to turn on overlays for as many grids as they want, which is especially useful when writing subgrids.

• Flexbox Inspector

Following last year's Grid Inspector, Safari 16 adds the Flexbox Inspector, which perfectly matches the Alignment Editor added in Safari 15.4.

Overrides for Flexbox containers make it easier to visualize the effects of CSS on Flexbox containers, and the new overlays help visually distinguish between available space and gaps. It also shows the bounds of the items and how they are distributed on the main and horizontal axes of the Flexbox container.

• accessibility improvements

Safari 16 introduces a re-architecture of WebKit accessibility support on macOS, resulting in improved performance and responsiveness.

This change allows WebKit to handle more accessibility requests from clients such as VoiceOver in less time than before. On some complex web pages, it was measured that twice as many accessibility requests were served 25% of the time.

• Animation Improvements

CSS offset paths (also known as motion paths) give web developers a way to animate along custom paths of arbitrary shapes. The offset path property lets you define a geometric path along which to animate.

The Offset Anchor, Offset Distance, Offset Position, and Offset Rotate properties provide users with additional capabilities to optimize Precise movement of an animated object.

With Safari 16, users can now animate CSS grids, meaning they can animate changes to the size of a row or column, opening up entirely new possibilities for movement on the page.

Safari 16 also adds support for composite operations, addresses how element animations affect the value of their underlying properties, and adds support for discrete animations for 39 CSS properties.

• Overscroll Behavior

The CSS Overscroll behavior determines what happens when the user scrolls the browser and reaches the bounds of the scroll area, it is useful when the user wants to stop the scrolling link, and when the user scrolls inside the box and reaches the end, you can control the stop or Allows scrolling of the rest of the page (controls how the browser behaves when overscrolling).

• "Shared Worker"

A new type of "worker" has been updated in Safari - Shared Worker, Shared Worker runs JavaScript in the background, your shared worker thread can run as long as the user has any tabs open for your domain, and for the same domain All open tabs can share the same shared worker thread. So if you want something like opening a WebSocket connection to a server that communicates on behalf of multiple tabs, try using Shared Worker.

• other

Other new features include fixes and improvements to form controls, and support for <form>. requestSubmit() and showPicker() methods for HTML input elements, as well as support for Shadow Realms and support for the Worker src Content Security Policy directive.

New WebKit features spark developer debate

As one of the technical highlights at this WWDC2022 event, the new WebKit features in Safari 16 Beta have really excited developers. However, at the same time on the developer community Reddit, the new features of WebKit have aroused many developers' "Tucao" and heated discussions.

Here, we see one of the posts titled "Web push notifications are coming to iOS in 2023", (link: https://www.reddit.com/r/programming/comments/v6c0lz/web_push_notifications_are_coming_to_ios_in_2023/ ) Many developers have expressed their views on this point. Let's feel:

"Oh please, not so fast Apple. With this break neck speed we might even get the PWA install prompt before the end of the century." (Oh please, not so fast Apple. With this break neck speed we might even get the PWA install prompt before the end of the century. Possibly get a PWA installation prompt before the end of the century.)

"we might even get the PWA install prompt before the end of the century. Hopefully never." (We might even get the PWA install prompt before the end of the century.
Hope never. )

"How about stop forcing all browsers to be Safari on iOS first, yeah?"

"Do you mean forcing them to use the WebKit engine? There are other browsers for iOS but they currently all have to use WebKit." Both must use WebKit.)

"Oh yay, another pop up I have to say no to on literally every website from 2023 onwards."

“So it just said 'look for Web Push on iOS in 2023'
Honestly I am not too hopeful about this as I would imagine it would probably be locked behind layers of settings because Apple being Apple. I can't really see they would make it easy for people to escape the App Store ecosystem.
Too difficult for me to imagine Apple would actually allow IM apps that bypass their app store.”

......

It is understood that in the past year, the WebKit browser has launched more than 162 new features and improvements, including Safari 15.2, Safari 15.4 and Safari 15.5. Features introduced earlier this year include dialog element, lazy loading, Inactive, :has() pseudo-class, new viewport unit, cascade, focus visible, accent color, appearance, font palette for colored fonts, BroadcastChannel, Web Locks API, File System Access API, enhancements to WebAssembly, support for Display-P3 in canvas, additions to COOP and COEP, improved CSS auto-completion and new CSS variable tool in Web Inspector, and more.

The updated web technology mainly allows users to work more conveniently on Safari 16. However, the "Web push" function that has been complained by developers and the operation that is suspected of "forcing all browsers on iOS to use Safari" has indeed become an annoyance for many users.

Reference link: https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/