New WebKit Features in Safari 11
With the release of iOS 11 and macOS High Sierra, the new Safari brings impressive performance improvements and great new WebKit features to the web. This release takes bold steps to curb all too common annoyances that have become pervasive across the web. It’s important for developers to be aware of how they might impact their sites. WebKit includes a JavaScript engine that is faster than ever and adds transformative features like WebAssembly and WebRTC. We can’t wait to see what developers will build with them.
Here are the highlights of the features that make Safari 11 such a significant release.
WebRTC and Media Capture
WebKit support for WebRTC and the Media Capture and Streams API brings real-time communication between browsers to Safari. The combination of support for both technology standards enables developers to bring video conferencing experiences to the web without the use of plug-ins. WebKit uses libWebRTC under the hood for interoperability and a solid foundation of features for efficient video conferencing.
Read more in the WebKit blog post about WebRTC.
WebAssembly
WebKit added support for WebAssembly as a complement to JavaScript programs. It is a low-level binary format designed to be a compilation target for existing languages like C++. It can’t do everything that JavaScript can, but it works together with JavaScript to accelerate computationally-intense operations. The implementation in WebKit supports both x86-64 and ARM64 platforms.
Learn more about WebAssembly in WebKit.
Variable Fonts
Developers can improve the loading performance on their site and provide designers with more control over typography using Variable Fonts. It is a specially formatted font file that contains values describing font variations across different axes of features like font weight, size, or oblique angles. The implementation in WebKit also adds CSS property support that can be animated, allowing web authors to incorporate fluid motion into typography changes.
Read more about Variable Fonts on the Web to learn more.
Timing APIs
Support for Resource Timing, Performance Timeline, and User Timing APIs in WebKit enables developers to measure performance characteristics of their web applications. The Resource Timing API can gather detailed network timing data, such as the time taken to fetch a specific resource. Performance Observers allow you to gather timing metrics asynchronously without blocking the application. While the User Timing API allows developers to set application-specific timestamps that are tied in to the browser’s performance timeline.
Read the Resource Timing, Performance Timeline, and User Timing specifications for more details.
WebCrypto API Updates
WebCrypto API support was updated in WebKit to include a standards-compliant SubtleCrypto implementation. This includes DER encoding support for importing and exporting asymmetric keys. Time-consuming cryptography methods now execute asynchronously and can even run in a Web Worker. Support for a number of new cryptographic algorithms adds new functionality, better efficiency, and improved security.
Learn more about the WebCrypto updates in WebKit.
Web Inspector Improvements
Web Inspector sports several useful new features for developers. When the system is set to a right-to-left language, Web Inspector will display a right-to-left user interface layout. It also added a new Settings tab for Web Inspector preferences. In the Network tab, Web Socket connections can now be inspected to show data being communicated across the connection. Finally, in the Elements tab developers can set debugging breakpoints on elements when the subtree or attribute is modified, or when the node is removed.
Intelligent Tracking Prevention
WebKit identifies cross-site tracking on websites you visit with machine learning, and shuts it down. This prevents ads that follow users around the web, but it also helps them have more control and awareness of the sites and services using their data. It’s a feature that protects users and enforces better user privacy practices across the web.
Find our more about Intelligent Tracking Prevention in WebKit.
Video Auto-Play Blocking on macOS
The auto-play blocking policy introduced on iOS last year inspired a new video auto-play blocking feature in Safari on macOS. Simply put, auto-play video with sound will be paused. Video elements without audio tracks, or muted audio can still auto-play. This release also includes support for the play method of the video element to return a promise to easily handle successful and unsuccessful video playback.
Read more about Auto-Play Blocking on macOS with a helpful example on using a Promise to handle auto-play success or prevention.
More Web Platform Features
Support for history.scrollRestoration was added to give developers control over when to maintain scroll position when a user navigates back through browser history.
New CSS Fill and Stroke Module support gives developers more tools to control how text and SVG artwork is painted with new fill- and stroke- properties.
An improved Flexbox implementation brings it up to match current specifications and better layout performance.
CSS Scroll Snapping was updated to add scroll snapping to the main document frame, overflow scrolling containers, and adds support for scroll-snap-proximity.
User Experience Enhancements
There are also several user focused changes to enhance the user-experience that can impact web development. Text rendered on transparent layers match regular text for consistently beautiful text. Decoding large images happens asynchronously to keep animations smooth dropped frames in animations. Scrolling speed is now consistent between the top level document, iframes, and across web views in apps. Lastly, when sharing a link to an article on iOS, the canonical link of the article will be used.
Feedback
All of these improvements are available to users running iOS 11 and macOS High Sierra, as well as macOS Sierra and OS X El Capitan. 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: 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36. Download the latest Safari Technology Preview release to stay on the forefront of future web features. You can also use the WebKit Feature Status page to watch for changes to your favorite web platform features.
We love hearing from you. Send a tweet to @webkit or @jonathandavis to share your thoughts on this release, and any features you were hoping for that didn’t make it. If you run into any issues, we welcome your bug reports for Safari, or WebKit bugs for web content issues.