Developers, please note that WebKit is getting a new upgrade!

Introduction

Currently, the default browser kernel on the two major mobile smart operating systems iOS and Android is WebKit, and the UIWebKit and WebView components have been launched in the form of Framework respectively, allowing third-party developers to build their own browsers or various complex applications that use Web technology to display content.

Recently, Safari 15.4 added more than 70 new features to WebKit, including new web technologies, updates, and fixes. This is also the first major WebKit version launched in 2022. Safari 15.4 is currently available for macOS Monterey 12.3, iPadOS, and iOS 15.4. The specific new features are as follows:

HTML

WebKit has added support for lazy loading of images through the <img> element's loading attribute, providing web developers with an easy way to instruct the browser to lazy load certain images.

After years of debate about accessibility standardization, there is finally a solution today, with WebKit adding support for the <dialog> element and the ::Background pseudo-element. The <dialog> element provides a powerful way to create overlays and modals.

WebKit also adds support for a global autofocus property, allowing developers to indicate which element should be in focus when a page loads or a <dialog> is shown.

CSS

(1) Characteristics of CSS architecture

What’s new in CSS in 2022 gives web developers revolutionary new ways to structure their code, making it easier to reuse code, create design systems, and integrate with complex applications. First up, coming to Safari, WebKit adds support for the :has() pseudo-class. This selector satisfies a long-standing desire for a “parent selector” (a way to conditionally apply CSS rules based on the content of an element). It was long thought that adopting such a selector was impossible, but the WebKit team found a way to highly optimize performance and provide a flexible solution that doesn’t slow down your page. WebKit adds support for Cascade Layers, a powerful way to organize styles into layers, with specificity calculated independently within each layer.

Web developers can create a "framework" layer and a "custom" layer - assigning all CSS from third-party frameworks to the "framework" layer and writing their own code in the "custom" layer. They can specify that everything in the custom layer should take precedence over everything in the framework layer, regardless of the specificity of the selectors used in each layer. The cascading layers appeared in all major browsers at almost the same time and were included in Interop 2022, making it a tool that future web developers will value.

WebKit also adds support for CSS Containment via the contains property - all four types: size, layout, style, and paint.

(2) Additional functions

Web developers are in great need of a tool that works similarly to existing viewport units but better on mobile devices, where the browser viewport changes size as users scroll through the page.

The new viewport units are that solution. 100svh means 100% of the smallest possible viewport height, and 100lvh means 100% of the largest possible viewport height. 100dvh means 100% of the dynamic viewport height — meaning the value will change as the user scrolls the screen of a mobile device.

There are other new viewport units - svw, lvw and dvw serve the same purpose for width. To cover small, large and dynamic versions of vmin and vmax, svmin, svmax, lvmin, lvmax, dvmin and dvmax units are also implemented. To support logical dimensions, new vi and vb are similar to existing viewport units for viewport inline dimensions and viewport block dimensions. svi, svb, lvi, lvb, dvi and dvb provide logical dimension units for small, large and dynamic versions of inline dimensions and block dimensions.

WebKit adds support for the :focus-visible pseudo-class to style the focus indicator only when the browser renders it.

To make native form controls more customizable, the accent-color property provides web developers with a way to change the color of specific parts of a form control's user interface (UI). On macOS, iPadOS, and iOS, <input type="checkbox">, <input type="radio">, <progress>, <select>, and text input types with <datalist> support accent colors. Additionally, on iPadOS and iOS, <input type="range">, <button>, and <input type="button"> support accent colors.

WebKit fixed a bug in interpolating between colors with alpha transparency, improving gradient support.

Additionally, WebKit adds support for the calc() math function, including sin, cos, tan, e, pi, exp, log, atan, acos, asin, and atan2.

(3) Typesetting

Several new WebKit features added in Safari 15.4 enrich the possibilities of web typography.

WebKit adds support for the font-palette CSS property and the @font-palette-values ​​rule.

The font-palette property provides a way for web developers to select one of several different predefined color palettes included in color fonts. For example, declaring a dark palette for a font for use in a dark mode design for a website. The @font-palette-values ​​rule provides a way for web developers to define their own custom palettes for re-coloring color fonts.

The color font used for the enlarged capital letters is Bradley Initials DJR Web, shown here with its default palette, a custom palette created by a web developer, an alternate palette included with the font, and with some colors removed based on user preference.

WebKit has added support for text-decoration-skip-ink to control how underlines and overlines appear when they are rendered through glyph ascenders and descenders. WebKit previously supported this typographic feature through text-decoration-skip, but since no other browsers support short-hand yet, WebKit's support for long-hand will make it easier to suppress underlines and overlines.

Additionally, WebKit adds support for the ic unit, useful when typesetting CJK scripts.

(4) Disable WebKit prefix

To reduce reliance on prefixes, WebKit has added support for several CSS properties and values ​​that were only available in earlier forms. The prefixed versions are still available and are now aliased to the unprefixed versions. Safari 15.4 adds support for the following:

Appearance, including automatic rendering

• mask, and the commonly used forms mask-image, mask-size, mask-repeat-x, mask-repeat-y, mask-origin
• Backface Visibility
• Group text vertically
• Print color adjustment
• Parent CSS value of the text-align property

WebKit also removes the non-standard CSS properties: -WebKit-border-fitting, -WebKit-margin-collapse, -WebKit-margin-top-collapse, -WebKit-margin-bottom-collapse, -WebKit-margin-collapse-before, -WebKit-margin-collapse-behind, and -WebKit-background-compositing.

Web API

Web API is the application programming interface of the Web, which can extend the functionality of browsers, simplify complex functions, and provide simple syntax for complex code. All browsers have a set of built-in Web APIs to support complex operations and help access data.

Safari 15.4 includes many upgrades to web APIs in WebKit to help web developers provide better user experiences.

Support for BroadcastChannel allows tabs, windows, iframes, and workers from an origin to send messages to each other. This enables experiences such as synchronizing the login state of a site across multiple tabs.

Another new mechanism supported by WebKit is the Web Locks API, which can manage access to resources as asynchronous lock controls from origin nodes in tabs, windows, iFrames, and Workers.

Developers can also control the scrolling behavior of an element using CSS scroll behavior properties or behavior options in the window.scroll(), window.scrollTo(), and window.scrollBy() methods in JavaScript.

This new support enables developers to choose between instantly jumping to a location in the viewport or smoothly animating the scrolling action.

The ResizeObserver API has been updated with support for the ResizeObserverSize interface used by ResizeObserverEntry to help developers observe changes to an element's element box size property.

The addition of StructuredClone(value) provides a utility that synchronously performs a deep copy using the structured cloning algorithm to clone and transfer the objects in the input value.

WebKit's support for the File System Access API and Origin Private File System was first released in Safari 15.2. Safari 15.4 introduced the getFile() method in FileSystemFileHandle, which makes it easier to read files from the file system. In addition, WebKit updated WriteableStream to use the File System Access API.

JavaScript

This time, JavaScript's new features and updates bring more convenience to developers. Its convenient new array function makes it better to search from the end of the array using the findLast() and findLastIndex() methods. These methods help developers avoid the typical method of first using reverse() to change the array.

In addition, JavaScript also supports the at() method to access entries at a specified integer index, especially supporting the use of negative integers starting from the end of the array.

let list = ['banana','cherry','orange','apple','kiwi'];

// Instead of this:

console.log(list[list.length-2]);

// It's as easy as:

console.log(list.at(-2));

The new language utility object Object.hasOwn() simplifies detecting when an object has a property itself, i.e. a property that is not inherited or does not exist.

Internationalization

As the standards process defines more internationalization features, WebKit continues to regularly update its Intl implementation. The latest version includes support for identifying local time zones, collations, calendars, numbering systems, and currencies using the Intl Enumeration API.

The update to V2 of Intl.Locale exposes new information, including calendar week data (such as the first day of the week), text information (such as writing direction), and other locale-dependent defaults (such as calendar, 12-hour or 24-hour period), and numbering system.

WebKit also updated Intl.DisplayNames to V2, adding support for calendar and dateTimeField names and language display options.

The selectRange() method added to Intl.PluralRules provides locale-correct plural forms for ranges (e.g. 0-1 items). The Intl.NumberFormat V3 update adds formatRange() and formatRangetoParts() methods for formatting ranges of numbers using locale-aware conventions, as well as new useGrouping, roundingPriority, roundingIncrement, trailingZeroDisplay, and signDisplay options.

Finally, Intl.DateTimeFormat includes support for four new time zone name options: shortOffset, longOffset, shortGeneric, and longGeneric.

Web Application

Updates to the Web App Manifest and ServiceWorker improve the user experience for websites in Safari and web apps saved to the Home Screen on iOS and iPadOS. Web App Manifest improvements include ensuring that the browser always fetches the manifest file during page load, rather than when the user selects "Add to Home Screen" from the Share menu. This approach improves reliability and also allows the manifest file to define the characteristics of the web page in Safari. In addition, there is now support for declaring icons in the web app manifest file. When apple-touch-icon is not defined in the HTML head, and the manifest file code used to declare the icon omits the "purpose" key or includes "purpose", Safari and iOS use the manifest-declared icon. Icons defined using apple-touch-icon take precedence over manifest-declared icons to provide consistent behavior for web apps that use this technique to define specific icons for iOS, unlike other mobile platforms. Developers can now enable navigation preloading in a ServiceWorker to improve loading performance and avoid ServiceWorker startup delays that block network requests. There is also new support for allowing users to download files generated by a ServiceWorker. WebKit also improves the reliability of using FormData and files through ServiceWorker.

media

The WebRTC Negotiation API is now fully compliant with the WebRTC 1.0 specification to support WebRTC Perfect Negotiation, a method that resolves potential synchronization issues that can occur between two remote peers during negotiation.

WebKit has added support for in-band chapter tracks for audio and video. In-band text tracks provide subtitle or chapter marker information for the media itself within the container, rather than being declared in HTML or injected into JavaScript. In previous versions, in-band subtitle tracks like CEA-608 were already supported. Now, in-band chapter tracks are also supported, where "hints" represent the start time and title of the chapter.

WebKit adds support for requestVideoFrameCallback() on <video> , which allows the caller to be notified when a new video frame is available to display, and provides metadata about the frame.

privacy

Continuing its commitment to privacy and furthering WebKit’s web standards for measuring ads in a privacy-preserving way, Safari 15.4 delivers three updates to private click measurement:

Added conversion fraud prevention via unlinkable tokens to trigger events on merchant websites.

• Added support for same-site conversion pixels on merchant websites to eliminate reliance on cross-site pixels.
• Allows measurement of links within nested cross-site iframes on the publisher's site.

Safety

WebKit in Safari 15.4 has improved support for Content Security Policy Level 3, providing enhanced security controls over content loading and helping web developers reduce the risk of cross-site scripting and other vulnerabilities. Blocked resource conflict reporting for inline scripts, inline styles, and eval execution has been updated to comply with web standards.

New support for "strict-dynamic", "unsafe-hashes", and "report-sample" source expressions provides developers with greater flexibility. Developers can also use the new support for hash source expressions to safely include external JavaScript in their pages.

This release also removes support for XSS Auditor, which has been superseded by modern cross-origin defenses like CSP and COEP.

WKWebView

Developers using WKWebView (including third-party browsers on iOS and iPadOS) can take advantage of new WKPreferences for additional user experience control. Apps on iOS, iPadOS, and macOS now have controls to allow or prevent web content from using the fullscreen API. Another new preference allows enabling or disabling site-specific quirks, a set of site-specific behaviors designed to improve web compatibility. On iPadOS, web content using Media Source Extensions can now be used in WKWebView.

Safari Web Extension

In terms of WebKit's cross-browser interoperability model for extensions, Safari 15.4 adds additional support for web extensions, including support for manifest_version3 and related API changes. These new features include:

• The service_worker background script is an alternative to non-persistent background pages.
• Script and style injection via the browser.scripting API.
• Dynamic and session rules via the browser.declarativeNetRequest API.
• Use externally_connectable:matches to extend the message to the web page.

And solved several problems, including:

• Limits are now enforced on the size and number of items in an extended sync store.
• It is now allowed to include more directives in the content_security_policy of an extension manifest, such as sandbox directives.
• Special matching characters (*, |, ||, and ^) in the urlFilter of the declarativeNetRequest rule are now processed instead of being treated as regular expression patterns.
• Promises returned from runtime.onMessage listeners are now allowed to be used for message replies.

Web Inspector

Web Inspector updates provide useful new tools for working with CSS in the Styles panel, including intuitive support for cascading layers and new @layer rulesets, making it easy to identify in which layer a rule is defined. There are also new CSS alignment controls to visually identify and select the ideal value when Flexbox and Grid use align-content, align-items, align-self, justify-content, justify-items, or justify-self. Web Inspector provides convenient autocomplete options when adding new properties or values ​​in the Styles panel. The latest version upgrades the autocomplete to use fuzzy matching, making it easier to find the right option. When using CSS custom properties or the more widely known CSS variables, a common practice is to add them to the selector rules of :root or html. Unfortunately, this results in a long list of inherited CSS variables for every element on the page. Web Inspector can help users deal with this in a number of ways. First, it automatically hides unused inherited CSS variables. Then, when you need to see them, you can use a button to show them all. You can also use the filter tool to search for the right CSS variable, or you can view all applicable CSS variables grouped by value type in the calculation panel, allowing you to collapse groups that are not relevant to their task.

WebKit Origin History

As we all know, WebKit is an open source browser typesetting engine. Its origin can be traced back to the HTML Widget of the KDE open source desktop environment project that started in 1998. It was later further developed into KDE's standard components, KHTML typesetting engine and KJSJavaScript scripting engine.

Apple chose KHTML after comparing Gecko and KHTML to develop its own Safari browser. The reason is that KHTML is lighter and clearer than Gecko, which is huge and bloated. Apple renamed KHTML to WebCore and KJS to JavaScriptCore, and the two are combined as WebKit.

In September 2008, Google launched the Chrome browser based on the WebKit kernel. Chrome has promoted the continuous development of browser technology. WebKit has gradually entered the vision of more developers, and its influence and popularity have increased day by day.

Reference links:

​​https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/​​