Best of WebKit — 2025

1. 1
   Article

   WebKit·47w

   A guide to Scroll-driven Animations with just CSS

   CSS scroll-driven animations allow developers to create animations that respond to user scrolling without JavaScript. The feature uses animation-timeline property with scroll() and view() functions to control when animations trigger. Scroll() timelines activate during any scrolling, while view() timelines activate when elements enter the viewport. The guide covers creating progress bars and sliding image effects, emphasizing accessibility considerations with prefers-reduced-motion media queries. Animation-range property controls when animations start and stop within the timeline. The feature is available in Safari 26 beta and represents a significant advancement in CSS animation capabilities.

   47

   1
2. 2
   Article

   WebKit·52w

   Two lines of Cross-Document View Transitions code you can use on every website today

   Cross-Document View Transitions enhance the navigation experience by enabling elements to persist across page transitions on websites, using just two lines of CSS code. This reduces the visual disruption between pages, creating a seamless transition effect. With browser support in Safari 18.2, Chrome 126, and Edge 126, it's accessible to most users. Considerations for motion sensitivity are discussed to ensure accessibility.

   42

   1
3. 3
   Article

   WebKit·1y

   The CSS shape() function

   The CSS shape() function allows creating adaptive and scalable shapes based on the element's size. Unlike the traditional SVG paths used in clip-path, shape() enables more responsive design using familiar CSS units and variables. This new function enhances the rendering efficiency and flexibility for applying shapes in web design.

   38

   3
4. 4
   Article

   WebKit·32w

   Online Identity Verification with the Digital Credentials API

   Safari 26 introduces support for the W3C Digital Credentials API, enabling websites to request mobile IDs (mdocs) directly from Apple Wallet and third-party wallets. The API follows ISO/IEC 18013-5 and 18013-7 standards, providing secure, privacy-focused identity verification with features like data minimization, end-to-end encryption, and device binding. Web developers can implement the API by building signed requests on their servers, calling navigator.credentials.get() with user gestures, and validating encrypted responses. The implementation requires registration with Apple Business Connect and follows international standards for cross-platform interoperability.

   34
5. 5
   Article

   WebKit·46w

   A step into the spatial web: The HTML model element in Apple Vision Pro

   visionOS 26 introduces the HTML model element as a default feature, enabling developers to embed 3D USDZ models directly in web pages for Apple Vision Pro. The element provides a simple API for displaying stereoscopic 3D content with features like orbit mode for user interaction, entity transforms for positioning, environment mapping for realistic lighting, and animation controls similar to video elements. The implementation supports the spatial web vision by making 3D content integration easier than traditional WebXR approaches.

   16
6. 6
   Article

   WebKit·1y

   Better typography with text-wrap pretty

   Support for text-wrap: pretty has been introduced in Safari Technology Preview, enhancing typography on the web by using paragraph-based algorithms to solve traditional issues like short lines, bad rag, and poor hyphenation. The feature aims to improve readability and aesthetics of web text significantly. It's compared to the text-wrap: balance value, illustrating the different use-cases for each. Using text-wrap: pretty should have minimal performance impact for typical-length paragraphs, and developers are encouraged to test it and provide feedback.

   11