Safari 13.1 was recently released for macOS Catalina, iPadOS, iOS, and watchOS. Safari 13.1 strives to improve on the WebKit engine, privacy, performance, and web developer experience.
Safari’s Webkit now supports the Web Animations API. The Web Animations API lets developers access the browser’s animation engine and manipulate animations with JavaScript. The API relates to implementations of both CSS Animations and CSS Transitions, so that developers may easily move interactive animations from stylesheets to JavaScript, separating presentation from behavior. JavaScript additionally provides more flexibility and control than pure, declarative CSS.
Webkit also now supports the Async Clipboard API. The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. The Async Clipboard API is reported to be more flexible than DataTransfer, allowing developers to write multiple items with multiple types per item. The Async Clipboard API brings programmatic paste to websites on macOS and iOS.
WebKit added support for ResizeObserver, enabling developers to design components that are responsive to the container instead of just the viewport. Heydon Pickering recently released a <watched-box /> web component implementing container queries thanks to ResizeObserver. Chris Coyier, creator of CSS-Tricks and co-founder of CodePen, commented on the importance of container queries:
Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re actually trying to control a more scoped container, and the only reason we use media queries for that now is because it’s the best tool we have in CSS. I absolutely believe that.
WebKit implements CSS Shadow Parts, bringing support for shadow parts to all mainstream browsers. CSS Shadow Parts allows authors to expose parts of a custom element to be styled from outside the element definition, while maintaining encapsulation and control over private parts of the element. CSS Shadow Parts is key for custom elements to be as useful and capable as built-in elements.
WebKit improves support for the new JavaScript features introduced in ES2020, implementing the new nullish coalescing operator (??). WebKit also implements the String.prototype.replaceAll() method for strings.
WebKit implements additional APIs, including the Picture-in-Picture API, Remote Playback API, with new support for HLS date-range metadata in DataCue. The new WebKit also brings about performance and security improvements. Additional details may be found in the release note. Developers may use the WebKit Feature Status page to watch for feature changes.
