New WebKit Features in Safari 14
With the release of Safari 14 for macOS Big Sur, iPadOS 14, iOS 14, and watchOS 7, WebKit brings significant improvements to performance and privacy along with a host of new features for web developers.
Take a look at all of the improvements WebKit is adding with the release of Safari 14.
Safari Web Extensions
This release brings support for Safari Web Extensions. They are a type of extension primarily built with JavaScript, HTML, and CSS packaged with native apps. This allows extension developers to maintain a single codebase that can be packaged for other browsers.
It also means developers with extensions for other browsers can easily bring their projects to Safari with a command-line tool. It jump-starts your development by converting your web extension into an Xcode project, ready to build and test. After testing, you can submit it to the App Store.
You can learn more about Safari’s web extension support by watching the “Meet Safari Web Extensions” session from WWDC 2020.
Webpage Translation
WebKit with Safari 14 on macOS Big Sur, iOS 14, and iPad OS 14 allows users to translate webpages between English, Spanish, Simplified Chinese, French, German, Russian, and Brazilian Portuguese. Safari automatically detects the language of webpages and offers translation based on the user’s Preferred Languages list.
Content authors can instruct Safari on the specific elements that should or should not be translated. Enable translation of element contents with an empty translate attribute or translate="yes", or disable with translate="no". It’s best to mark specific elements and avoid using the attribute on a single container for the entire document.
Performance Improvements
One area of focus in WebKit was on performance. Significant performance gains improve page load performance and page performance for developers. Loading a previously unvisited page is 13% faster, and loading recently visited pages is 42-52% faster. Tab closing performance improved from 3.5 seconds to 50 milliseconds. WebKit also added support for incrementally loading PDF files and now renders the first page up to 60× faster.
For web developers, WebKit improved asynchronous scrolling for iframes and overflow: scroll containers on macOS. Faster IndexedDB operations, for-of loops, JavaScript Promises, JavaScript cookie access, and JavaScript delete operations improve page performance for web developers and users.
WebKit and Safari can now use platform support for HTTP/3 for improved network efficiency and faster load times. HTTP/3 makes use of multiplexed connections over UDP to reduce congestion and transport latency. It all adds up to better perceived performance for your web apps.
For more details, see the “What’s new for web developers” session from WWDC 2020.
Improved Compatibility
Another area of focus was improving WebKit’s interoperability. One measure of that is passing Web Platform Tests. It’s a set of tests used by browser developers to ensure implementations are cross-browser compatible helping developers have more interoperable code. In these releases, WebKit improved the pass rates for over 140,000 tests across Service Workers, SVG, CSS, XHR+Fetch, and more.
Learn more by watching the “What’s new for web developers” session from WWDC 2020.
Privacy Updates
With each release, WebKit refines its privacy protections for users. This year WebKit enabled full third-party cookie blocking and added support for the Storage Access API in Private Browsing mode in Safari. In addition, Safari added a Privacy Report that shows users the trackers that Intelligent Tracking Prevention prevented from accessing identifying information.
Learn more about WebKit’s privacy enhancements in the “CNAME Cloaking and Bounce Tracking Defense” and “Full Third-Party Cookie Blocking and More” blog posts.
Touch ID and Face ID for the Web
Web developers can now support logging into websites with Face ID and Touch ID. New platform authenticator support in WebKit’s Web Authentication implementation provides a highly secure alternative to usernames and passwords. Support for WebAuthn was introduced in Safari 13 on macOS and iOS 13.3 with support for hardware security keys. New in this release is added support for PIN entry and account selection on external Web Authentication security keys.
For more, read the “Meet Face ID and Touch ID for the Web” blog post.
WebP Support
Improvements for media in WebKit include support for a new image format and new video playback capabilities. This release of WebKit in Safari 14 adds support for the WebP open-source image format. It offers content authors smaller file sizes for lossy and lossless formats with advanced features like alpha-channel transparency and animations.
Learn more about WebP support from the “What’s new for web developers” talk from WWDC 2020.
Reserving Layout Space for Images
Another image-related improvement eliminates layout shifting. It comes from a change to how WebKit derives the aspect ratio of an image. Web authors can simply add width and height attributes to an <img> element with a numeric value to tell WebKit the proportions of an image to reserve when calculating image size from CSS. It’s a simple change that significantly improves the user experience.
To see this in action watch the “What’s new for web developers” session from WWDC 2020.
New CSS Features
Safari 14 supports the image-orientation property in CSS to override WebKit’s default behavior of rotating based on image EXIF data. The default image-orientation: from-image can be set to image-orientation: none to override the behavior and ignore the EXIF orientation flag.
New support for the :is() pseudo-selector works as a synonym for the previously supported :matches(). It can be used to match a list of selectors with the specificity of the most specific selector.
It can be used to avoid repetitive selectors. Compare the following:
/* Removing margins from any subsequent headings */
h1, h2, h3, h4, h5, h6 {
margin-top: 3em;
}
h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
h2 + h3, h2 + h3, h2 + h4, h2 + h5, h2 + h6,
h3 + h4, h3 + h3, h3 + h4, h3 + h5, h3 + h6,
h4 + h5, h4 + h3, h4 + h4, h4 + h5, h4 + h6,
h5 + h6, h5 + h3, h5 + h4, h5 + h5, h5 + h6 {
margin-top: 0;
}
The override could be written with the :is() pseudo-selector like this instead:
:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 0;
}
The :where() pseudo-selector is also supported and works like :is() except it resets the specificity back to 0 making it easy to override complex matches.
Other notable CSS additions include support for line-break: anywhere to break long content before it overflows the container, and image-set() support for all other image functions including image(), -webkit-canvas(), -webkit-cross-fade(), and -webkit-*-gradient().
Learn more about these CSS features by watching the “What’s new for web developers” from WWDC 2020.
Media Enhancements
For video, Safari on iOS 14 adds support for the Picture-in-Picture API for iPhone. On macOS, new support for high-dynamic range (HDR) video playback is added. Content authors can use media-queries or the matchMedia method in JavaScript to detect high-dynamic range display capability and deliver a progressively enhanced experience for users with HDR displays.
<style>
@media only screen (dynamic-range: high) {
/* HDR-only CSS rules */
}
</style>
<script>
if (window.matchMedia("dynamic-range: high")) {
// HDR-specific JavaScript
}
</script>
You can learn more about these media enhancements by watching the “What’s new for web developers” from WWDC 2020.
JavaScript Improvements
Beyond performance improvements, WebKit added several new capabilities to its JavaScript engine. This release includes support for BigInt, a new datatype for integers that are larger than the MAX_SAFE_INTEGER.
let bigInt = BigInt(Number.MAX_SAFE_INTEGER) + 2n;
Three new types of logical assignment operators are available: AND, OR, and nullish. Using these operators only evaluates the left-hand side of an expression once and can be used non-destructively when assigning values.
let foo = null;
foo ??= 1; // nullish assignment operator
> 1
foo &&= 2; // AND assignment operator
> 2
foo ||= 3; // OR assignment operator
> 2
foo ??= 4; // nullish assignment operator
> 2
WebKit also introduces support for the optional chaining operator that gives you a shortcut for safely accessing object properties.
function optionalChaining(object) {
return object?.foo;
}
function optionalChainingTranspiled(object) {
if (object !== null && object !== undefined)
return object.foo;
return undefined;
}
There’s also added support of the EventTarget constructor which means developers can create custom instances of EventTarget of their own design without the overhead of repurposing a DOM element, giving non-DOM objects an interface for dispatching custom events.
You can learn more about JavaScript improvements by watching the “What’s new for web developers” from WWDC 2020.
Web Inspector Updates
Web Inspector in Safari 14 on macOS added the Source Tab combing the Resources Tab and Debugger Tab together. It lists all resources loaded by the inspected page since Web Inspector opened, along with XHR+Fetch resources and long-lived WebSockets. Web Inspector’s JavaScript debugging tools are here too, with all of the stepping and the breakpoint controls, organized in a more compact and unified way alongside the resources of the inspected page. The Sources Tab also offers new capabilities such as organizing by file path instead of file type, Local Overrides for completely replacing the content and headers of responses loaded over the network, and the Inspector Bootstrap Script to evaluate JavaScript before anything else in the page.
In the Timelines Tab is the new Media & Animations timeline to capture events related to media elements, CSS animations and CSS transitions. It makes it easy to correlate activity captured in other timelines to state changes in media elements, such as pausing or resuming playback, or CSS animations or transitions, such as when they’re created and each time they iterate.
Among the enhancements Web Inspector offers improved VoiceOver support and a new HSL color picker with Display-P3 color support.
You can learn more watching the “What’s new in Web Inspector” video session from WWDC 2020 or referring to the Web Inspector Reference documentation.
Feedback
These improvements are available to users running watchOS 7, iOS 14 and iPadOS 14, macOS Big Sur, macOS Catalina and macOS Mojave. These features were also available to web developers with Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109. Download the latest Safari Technology Preview release to stay on the forefront of future web platform and Web Inspector features. You can also use the WebKit Feature Status page to watch for changes to your favorite web platform features.
Send a tweet to @webkit or @jonathandavis to share your thoughts on this release. If you run into any issues, we welcome your bug reports for Safari, or WebKit bugs for web content issues.