Jun 07, 2022 14:30:00

Webkit function of 'Safari 16 Beta' has been updated, and web push function for macOS has been added.

WebKit has added a number of features since the beginning of this year, but on June 6, 2022, we announced new features to be included in Safari 16 Beta.

News from WWDC22: WebKit Features in Safari 16 Beta | WebKit
https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/

◆ Web push function for macOS
Web push functionality will be added to Safari 16 of the next major version of macOS, macOS Ventura . This function is implemented with a combination of web standard APIs ( PushAPI , NotificationsAPI , ServiceWorker ) like other browsers that have already been implemented, and when a notification is requested by a gesture such as a button click by the user, the website or web application Will display a message asking for permission to notify. If you give permission here, the notification will be sent to the user remotely after that, and you can receive the notification even if Safari is not running. Users can view and manage notification settings in Notification Center and switch notifications for each website.

With the addition of the web push function in Safari, we are now able to realize the web push notification function in all major web browsers. This means that desktop apps have almost lost their advantage over web apps.

◆ 'Web Inspector' extension
Safari 16 provides a '

Web Inspector ' extension that can enhance Safari's embedded browser development tools. This is expected to help, for example, when developing with powerful third-party framework services.

◆ Container query
Safari 16 now supports CSScontainer queries . It can be used like a traditional media query , except that you can adjust the style of the HTML element based on the size of the container instead of the viewport.

You can use

size queries and container query units to specify the size. Of these, for size queries, the units such as px, em, and rem, which are familiar to media queries, are used. On the other hand, the container query unit is similar to the viewport unit, but the feature is that the size is specified based on the size of the container.

unit	Standard size
cqw	1% of the width of the query container
cqh	1% of the height of the query container
cqi	1% of the inline size of the query container
cqb	1% of the block size of the query container
cqmin	The smaller value of cqi or cqb
cqmax	The larger value of cqi or cqb

◆ Subgrid and Grid Inspector
Subgrids are a feature that allows you to easily place grandchildren in a grid layout, making it easier to design complex layouts. The Grid Inspector also supports this, helping you code your layout with subgrids.

◆ Flexbox Inspector
Flexbox Inspector is added in Safari 16. Flexbox container overlays make it easy to visualize the impact of CSS on flexbox containers.

◆ Shared Worker
Shared Worker has been added as a new type of worker. This is a mechanism to execute JavaScript in the background like a traditional service worker, except that all tabs open for the same domain can share the same shared worker. Therefore, it is useful when it is inefficient to set up a worker for each tab.

Other improvements include accessibility improvements, animation improvements, and overscrolling adjustments.