New WebKit Features in Safari 14.1
Safari 14.1 for macOS Big Sur, iPadOS 14.5, and iOS 14.5 brings new WebKit features, APIs, performance improvements, and improved compatibility for web developers. Take a look.
Flexbox Gap Support
Safari 14.1 now supports the
gap property inside Flexbox containers, along with
column-gap. Gaps in Flexbox make it possible for web developers to create space between Flex items without resorting to annoying margin hacks.
gap property, of course, has worked inside Grid containers since Safari 12. Because
gap is supported for Grid, testing support for the property in a Flexbox formatting context wasn’t possible by using feature queries (
@supports). By adding support for
gap in Flexbox, Safari brings the web closer to widespread compatibility.
For more information, see the “flex containers” definition in the “Row and Column Gutters” section of the CSS Box Alignment specification.
Date & Time Inputs on macOS
In HTML, the date, time, datetime-local attributes for the input element prompt the browser to create date and/or time controls — an interface that’s designed to let the user easily enter a time or a date, usually with a calendar. Safari has supported these input fields on iOS since 2012. Now with Safari 14.1, these fields are supported on macOS as well.
CSS Individual Transform Properties
With WebKit support of Individual Transform Properties, web developers can write CSS rules and keyframe animations in a more straightforward way.
For years, the transform property has provided the ability to scale, rotate, and translate. You could access this power through code like this:
transform: translate(100px, 100px) rotate(180deg) scale(2);
Now, if you wish, you can instead write:
translate: 100px 100px; rotate: 180deg; scale: 2;
This is a syntactical and conceptual difference — the result is the same. You might find it easier to understand and remember.
This syntax also avoids unintentional overrides of other transform-related properties and eliminates pre-computing intermediate values when using keyframe animations.
You can learn more by reading “CSS Individual Transform Properties” on the WebKit blog.
Paint Timing API
A valuable metric to improving the performance of web content is the time it takes for the user-agent to show something to the user. WebKit added the Paint Timing API to its suite of performance APIs to provide this measurement. Developers can measure:
first-paintfor the time it takes to show pixels of anything that is not the user-agent’s default background
first-contentful-paintto get the time for the user to see content such as text or an image
To learn more about the API, see the Paint Timing specification.
Web Speech API
The Web Speech API in WebKit has supported speech synthesis for some time. Now, Safari supports speech recognition powered by the same speech engine as Siri. That means web developers can enjoy the benefits of high-quality transcription for over 50 languages and dialects. Note that users will need Siri enabled in System Preferences on macOS or Settings in iOS or iPadOS for the API to be available to be used.
For more information on speech recognition and speech synthesis on the web, see the Web Speech API specification.
Web Audio API
As a continuing area of focus, Safari compatibility improvements are ongoing. Updates to the Web Audio API bring it to standards compliance. It is now available unprefixed with support for advanced audio processing via Audio Worklets.
You can learn more about web audio from the Web Audio API specification.
There are several new interoperability improvements in WebKit:
- Web Animations now work on 122 more properties
- Animation of pseudo-elements beyond
- Improved mouse support on iPadOS and in Catalyst apps, including wheel events and hover/pointer media queries
Updated wheel Event handling improves performance and interoperability with other browsers. Wheel handlers registered on root objects (window/document/body) with default arguments will be treated as passive. Pages that want to prevent the default handling of Wheel Events which result from gestures like trackpad swipes on macOS, must now call
preventDefault() on the first Wheel Event in the sequence.
WebKit added support for MediaStream Recording, also known as the MediaRecorder API. It allows websites to record audio and video, then encode them using the platform’s available set of default encodings.
Learn more in the MediaStream Recording specification.
WebKit added improved support for WebM media. With Safari 14, WebKit added support for WebM via MSE on iPadOS and macOS. Now, WebKit on macOS supports WebM files containing VP8 or VP9 video tracks and Vorbis audio tracks. Developers can now offer WebM content to users, though users will enjoy the best quality and power efficiency with h.264 or HEVC.
See the WebM Project for details.
To learn more, see the public and private instance field proposal.
New Internationalization API features include
Intl.DateTimeFormat was updated to support
timeStyle options. The
Intl.NumberFormat method was updated with support to display measurement units, notation formats, sign display, and narrow symbol currency formatting.
For more information on these formatting methods, see the proposals for
WeakRef and FinalizationRegistry
WeakRef supports holding an object that can be garbage collected when there are no strong references to it. The FinalizationRegistry object compliments WeakRef to manage cleanup tasks when a target object is garbage collected.
Read more details in the WeakRefs proposal.
WebAssembly support, introduced with Safari 11, is a low-level binary format used as a compilation target for existing languages.
WebAssembly support for the atomic instructions in the Threading specification, are enabled in Safari 14.1. Note, that until Safari supports the COEP/COOP headers, shared memory is not enabled as it could expose users to cross-origin Specter data leaks.
For more information, see the WebAssembly Specification for WASM Threads.
WebAssembly Sign Extension Operator
New sign-extension operator support preserves the number’s sign while extending the number of bits of an integer.
Learn more in the Sign-extension Ops proposal.
See the WebAssembly Specification for toJSValue.
Private Click Measurement
This release features Private Click Measurement – a proposed web standard that enables advertisers to measure the effectiveness of click-through ad campaigns in a privacy-preserving way. This new technology is part of a larger effort to remove cross-site tracking from the web and provide privacy-preserving alternatives where needed.
See “Introducing Private Click Measurement, PCM” on the WebKit blog.
Storage Access API Updates
WebKit has improved the Storage Access API to allow per-page storage access and allow nested iframes to request storage access. These interoperability changes are from the ongoing standardization of the Storage Access API together with Mozilla, Microsoft, and the web community. This API has shipped in Safari since 2018 and is part of a larger effort to remove cross-site tracking from the web and provide privacy-preserving alternatives where needed.
For details, see “Updates to the Storage Access API” on the WebKit blog.
Web Inspector Updates
The updates to Web Inspector available in these releases include:
- A new three-panel layout in the Elements Tab brings the Styles sidebar into an independent panel alongside the existing details sidebar.
- The new Font panel gives content authors visibility into details of the fonts used on the page.
- Breakpoints in the Sources Tab can now be configured with conditions or actions, reducing the need for stray
console.logstatements left in production code.
To learn more about Web Inspector features, see the Web Inspector Reference documentation.
These improvements are available to users running Safari on iPadOS 14.5, iOS 14.5, or Safari 14.1 on macOS Big Sur (11.3), macOS Catalina, or macOS Mojave. These features were also available to web developers in Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122.
Download the latest Safari Technology Preview release to stay at the forefront of future web platform and Web Inspector features. You can also use the WebKit Feature Status page to watch for changes to web platform features you’re interested in.
If you run into any issues, we welcome your bug reports for Safari or WebKit bugs for web content issues. Send us a tweet @webkit to share your thoughts on this release.