Apple is also keeping up with the times on the front end! Did you know?

At the Apple Worldwide Developers Conference (WWDC) held on June 11, Apple unveiled its latest software series, including iOS 18, watchOS 11, macOS 15, iPadOS 18, tvOS 18, and VisionOS 2 operating systems. Not only that, Apple also released its AI suite Apple Intelligence.

In this update, the Safari browser also ushered in a brand new version - Safari 18. It also keeps up with the trend of the times and brings 48 impressive new web features and fixes 174 known issues. Let's take a look at the update highlights of Safari 18!

WebXR enhancements

Support for visionOS 2 Beta: Adds support for WebXR to visionOS 2 Beta, allowing developers to create fully immersive web experiences for Apple Vision Pro users.
Transient-pointer input mode: Safari for visionOS 2 Beta supports the new WebXR transient-pointer input mode, allowing users to interact naturally through gaze and gestures.
Hand Tracking: Support for WebXR hand tracking, allowing developers to create 3D models for user hand animations.

CSS Updates

View Transition API: Introduced the View Transition API, allowing developers to smoothly transition elements between states and provide more flexible page animations.
Style Queries: Support for style queries, enabling developers to define reusable groups of styles and apply those styles based on the values of CSS custom properties.
Relative color syntax: The relative color syntax has been extended to allow references to currentColor or system color keywords when defining new colors.
Animation of display properties: Introduced support for transition animation of display property, combined with @starting-style and transition-behavior , allowing developers to achieve smooth display transitions between element states.
Shaping interactive areas on visionOS: Safari in visionOS 2 Beta allows developers to define and display the visible area shape of interactive elements such as links through CSS clip-path and SVG to enhance the user experience.
Background filter: Improved the implementation of backdrop-filter filter, without prefix, supports SVG filter functions, and enhances interoperability with other browsers.
safe in Flexbox: Added support for the safe keyword in Flexbox to improve layout handling when flex items overflow.
Content visibility: Support for content-visibility property allows developers to optimize page performance and speed up page loading by delaying the rendering of off-screen content.

Web Apps on Mac

Open links directly: Web apps on Mac support directly opening links that match the added web app scope without jumping to the browser.
Extension support: Web apps on Mac now support Safari web extensions and content blockers, giving users more personalization options.

Safari Extension Updates

Mobile Device Management: Added support for mobile device management, including extension enablement status, private browsing status, and website access management on devices, making it easier for schools and businesses to configure and manage Safari app extensions, content blockers, and web extensions on iOS, iPadOS, or macOS devices.

Spatial Media Experience

Fullscreen API: Safari 18 for visionOS 2 Beta introduces the Fullscreen API, which allows developers to create spatial photo and panorama experiences similar to those on Apple Vision Pro on the Web. When users click on photos, they pop up into a floating frame, and further clicks expand into a fully immersive experience.

HTML

Inline predictive text: Safari 18 Beta brings the inline predictive text feature on iOS, iPadOS, visionOS, macOS Sequoia, and macOS Sonoma to the web, allowing text to be predicted and automatically completed as you type. Developers can control this feature through the writingsuggestions property.
Switch control haptic feedback: WebKit for Safari in iOS 18 Beta adds haptic feedback to <input type=checkbox switch> , improving the user experience of switch controls on iPhone.
Date and time input accessibility: WebKit for Safari 18 Beta on macOS improves accessibility support for date and time input field types, making <input type="date"> , <input type="datetime-local"> , and <input type="time"> elements work properly with VoiceOver.
ARIA Attribute Extensions: Added support for reflected attributes for ariaBrailleLabel and ariaBrailleRoleDescription elements, allowing ARIA attributes to be directly obtained and set via the JavaScript API, providing more options for specific accessibility needs.
Safari Viewer for distraction-free video viewing: Introducing the Viewer feature, which provides a distraction-free video viewing experience and automatically enters picture-in-picture mode when switching tabs or windows.
VisionOS Immersive Video: Safari for VisionOS 2 Beta supports full-screen videos docked to the current environment, providing a fully immersive video viewing experience, and adjusting the immersion through the digital crown.
Managed Media Source Support: Added Workers support for Managed Media Source (MMS) and Media Source Extensions (MSE), improving the stability and performance of cross-site media playback.

WebRTC

WebRTC HEVC support: WebKit for Safari 18 beta adds support for the WebRTC HEVC RFC 7789 RTP Payload Format, providing new options for video conferencing, video streaming, and high-bitrate media delivery.

Passkeys

Added support for web authentication credential creation using mediation=conditional , allowing websites to automatically upgrade password accounts to passkeys.
Support for using passkeys across related origins, allowing sites to use the same passkey on a limited number of domains that share a credential backend.
Added support for the WebAuthn prf extension, allowing symmetric keys to be retrieved from the passkey for encrypting user data.

HTTPS

Mixed content handling: Enhanced HTTPS support for all images, video, and audio by automatically upgrading passive subresource requests in mixed content settings to comply with Mixed Content Level 2.

JavaScript

Added support for Unicode 15.1.0 characters in RegExp, for a total of 149,813 characters.
Added support for the v flag in RegExp.prototype[Symbol.matchAll] , providing more powerful Unicode character matching capabilities.

Web API

Added support for URL.parse() , a new URL parsing method that returns null instead of throwing an exception when parsing fails.
Enhanced declarative Shadow Tree support to make them more flexible and serializable by adding shadowRootDelegatesFocus , shadowRootClonable , shadowRootSerializable IDL attributes and getHTML() method to the <template> element.
hasUAVisualTransition: Added support for the hasUAVisualTransition property of PopStateEvent , which indicates whether the user agent provides a visual transition effect for fragment navigation.
Sub-resources of module scripts: Supports the integrity of sub-resources of module scripts, provides encryption guarantee for the content integrity of externally hosted module scripts, and enhances security.
bytes() method: Added bytes() method to Request , Response , Blob and PushMessageData objects, allowing developers to directly access the underlying byte data without using arrayBuffer() and wrapping the result in Uint8Array .
Feature detection of text fragments: Support for detecting text fragment features is provided through document.fragmentDirective . Although the returned FragmentDirective object itself does not provide any functionality, it is helpful for detecting whether the browser supports fragment directives.

Canvas

willReadFrequently: Added the willReadFrequently context property to getContext() method to indicate whether a large number of readback operations are planned. This helps optimize performance when getImageData() is called frequently.
currentcolor: Extends 2D canvas support for currentcolor so that it can be used in color-mix() or relative color syntax. In these contexts, currentcolor will default to the computed color property value on the canvas element.

WebGL

Added support for the following WebGL extensions:

EXT_texture_mirror_clamp_to_edge
WEBGL_render_shared_exponent
WEBGL_stencil_texturing
EXT_render_snorm
OES_sample_variables
OES_shader_multisample_interpolation

Web Inspector Updates

Added support for fuzzy search code completion in the CSS source editor of Web Inspector, improving developers' debugging efficiency.

WKWebView

WebKit added support for two new APIs in iOS 18 beta, iPadOS 18 beta, visionOS 2 beta, and macOS Sequoia beta — the Writing Tools API and an API for controlling adaptive image symbol insertion.