If you develop for the Apple ecosystem, Safari is much more than just a browserIt's a key component for creating fast, secure web experiences with deep integration across iOS, iPadOS, macOS, tvOS, and xrOS. For years, Apple has been adding specific tools, APIs, and technologies so that you can debug, test responsive designs, automate tests, and connect your website to your native apps without leaving your browser.
In this article we are going to take an in-depth look at the Safari's most useful resources for web developersFrom extensions, universal links and smart banners, to Web Inspector, responsive design mode, WebDriver, new CSS capabilities, advanced multimedia support and the entire ecosystem of tools to experiment with the latest WebKit features.
Safari as a platform for web developers
Safari is the default browser on iPhone, iPad, and Mac, and it stands out for its high performance and energy efficiencyThis is crucial on mobile devices and in environments like visionOS/xrOS. For developers, this translates into a clear objective: to design websites and web apps that are fast, accessible, and privacy-friendly, leveraging the browser's own APIs without sacrificing compatibility.
Safari's rendering engine is the WebKit project, an open project that Apple has been promoting for years and continues to incorporate the most advanced web specifications in animation, design, typography, and media. Most of the new features you see in the latest versions of Safari come directly from improvements to WebKit.
In addition to the browser itself, Apple provides technical documentation, WWDC videos and examples that explain how to use each new feature: from next-generation CSS to APIs like WebGPU, declarative web notifications, or privacy improvements.
Extensions, universal links, and smart banners
Safari extensions allow you to add custom browser features Reusing web technologies—HTML5, CSS3, and JavaScript—integrated with native APIs thanks to Xcode, you can package your extensions as apps and distribute them on the App Store for Mac, iPhone, and iPad, monetizing them just like any other application.
To connect the web with your native apps, Apple offers Universal Links. With them, a standard HTTP link can Open content directly within your app On iOS, iPadOS, and macOS, it's installed; otherwise, the user continues browsing the web without interruption. Everything is configured using JSON files hosted on your domain and the corresponding Xcode configuration.
Another key element is the Smart App Banners. This is a discreet strip at the top of the page that invites the user to open or download your app From the App Store. If you already have it installed, tapping the banner launches the app; otherwise, it takes you directly to its page. Implementing them is as simple as adding a meta tag to your HTML with your app's identifier.
In terms of multimedia content, Safari supports HTTP Live Streaming (HLS), Apple's system for Serve responsive video using standard web serversYou can deliver streams to native apps on iOS/iPadOS and HTML5 websites, benefiting from adaptive bitrate, encryption, and compatibility with current video infrastructure.
Authentication, notifications, and test automation
The integration with iCloud Keychain allows your login forms to benefit from secure autofill and verification codes without having to set up complex solutions. In iOS 15, iPadOS 15, macOS Monterey and later, you can rely on iCloud Keychain verification codes and syncing to simplify multi-step authentication processes.
Safari also supports push notifications for websites on macOS, using the Apple Push Notification service (APNs). With this feature you can send notifications to users who have given permissionEven when Safari isn't open, notifications display your site's icon and the text you define, and clicking them takes the user to your chosen URL.
In the area of automated testing, Safari implements WebDriver, a cross-platform standard for automating browsers. Thanks to WebDriver you can Write tests that interact with your site as a real user would.: click, type, run JavaScript, capture screenshots or check accessibility roles, and reuse the same scripts against other browsers with compatible drivers.
These tests are typically orchestrated using libraries like Selenium, which offer bindings in languages such as Python, Java, JavaScript, and PHP. Safari exposes a local WebDriver server that accepts commands via HTTPThis simplifies integration with existing CI/CD pipelines and testing suites.
Safari Development Menu and Web Inspector
If you create or maintain websites, Safari's Develop menu is your gateway to a set of advanced tools for debugging and inspecting contentFrom there you can open the Web Inspector, activate responsive design mode, connect simulators or real devices, and manage experimental feature flags.
The Develop menu is not enabled by default. To display it on a Mac, you must go to Safari > Settings (or Configuration)Open the Advanced tab and check the box “Show developer features”. This will add a new “Development” menu to the top bar, and several extra sections to the browser settings.
Web Inspector is the central debugging panel. You can open it from the Develop menu with the "Show Web Inspector" option or by using the Control click (right button) on any element and choosing “Inspect element”. This last option opens the inspector with the corresponding HTML node already selected, showing its styles, layout, accessibility and other details.
Within the inspector, you'll find tabs for DOM structure, active CSS rules, network, JavaScript console, storage, performance, and more. The element selection tool lets you hover your mouse over the content to View margins, paddings, shape outlines, and accessibility roleswhich greatly speeds up the correction of styles or layout problems.
Adaptive design mode and testing in simulators
Safari includes a Responsive Design Mode intended for testing How does your website adjust to different screen sizes?You access it from the Develop menu with the option “Enter responsive design mode”. The browser opens your page within a resizable frame, with controls for width, height, and scale.
By dragging the side handles, you can simulate viewports much larger or smaller than your actual window, while Safari Rescale the view and force the reflow of text, images, and layouts. You can also manually enter the exact width and height you want to test, and see the scaling factor at which the page is being rendered.
Adaptive mode allows you to modify the device's pixel ratio, which is essential for testing. high-density assets (2x, 3x) and medium resolution queriesAmong the suggested options: using srcset on images, the image-set function in CSS, and resolution queries to adjust borders, icons, or other details according to screen density.
From Safari on macOS, you can open your website in iOS, iPadOS, and xrOS simulators. Once you have Xcode installed and run at least once, the "Open with Simulator" option will be enabled in the Develop menu. This lets you choose between the simulators installed or running and launch the current page directly in Safari within that simulated environment.
Simulators not only replicate screen dimensions, but also platform-specific behaviorssuch as smooth scrolling, double-tap to zoom, and usability patterns from iPhone, iPad, and xrOS devices. Additionally, you can use Web Inspector from your Mac to inspect pages open in the simulator, just as you would with Safari on macOS.
Remote debugging on iPhone, iPad, tvOS and xrOS
Beyond simulators, Safari allows you to inspect content that is running in physical devices connected to your MacThis includes anything from an iPhone, iPad, Apple TV (tvOS) to an xrOS device. It encompasses pages opened in Safari, web apps on the home screen, and even associated service workers.
On iOS and iPadOS, to enable remote inspection, go to Settings > Safari > Advanced and turn on Web Inspector. Then connect your device to your Mac with a cable, and in Safari's Develop menu on macOS, enable Web Inspector. The device appears with the list of inspectable contentsYou select the page or app you want to debug and a Web Inspector specific to that context opens.
If you find it annoying to use a cable all the time, you can enable the "Connect via Network" option in the Develop menu, which allows the Mac to communicate with the device through the same Wi-Fi networkOnce paired, you can unplug the cable and continue debugging wirelessly as long as both are on the same local network.
In xrOS the process is similar, but pairing is based on the network from the start. You have to go to Settings > Apps > Safari > Advanced, enable Web Inspector, and then, from Settings > General > Remote Devices, make the pairing screen visible. From your Mac, in Safari, use the Develop menu to select “Use for Development” and You enter the six-digit code that you see on the xrOS headset or device. Once paired, you'll be able to browse websites on xrOS in the same way as on iOS.
An interesting detail is that even xrOS supports an element selection mode: you enter selection mode in Web Inspector, look at the node you want on the page and You perform a pinch gesture to select, which sends that item back to the Mac inspector.
Web content within native apps: WKWebView and JSContext
More than one million apps on Apple platforms incorporate embedded web content or JavaScript for parts of its interface or logic. Safari and WebKit provide APIs to make that content inspectable even in production versions, whether you use WKWebView or run JavaScript in JSContext.
Since macOS 13.3, iOS and iPadOS 16.4 and later, as well as xrOS, there is an API for Mark your webviews and JS contexts as debuggableYou can assign descriptive names to each JSContext, which will then appear in Safari's Develop menu, making it easier to identify which part of the app you are inspecting.
Once the app activates inspection, these contexts appear in the Develop menu just like any other web page and can be opened with Web Inspector. This allows debug embedded HTML, CSS and script in your native app with the same tools you already know from the browser, without having to resort to ad hoc solutions.
New CSS capabilities in Safari and WebKit
Apple is heavily promoting CSS capabilities in WebKit. One of the areas where they've invested the most is animation. Safari 19 incorporates the scroll-linked animationswhich allow you to synchronize animations with scrolling using only CSS, without the need for JavaScript.
The key concept here is timelines. By default, CSS animations progress over time, but now you can use scroll-based timelines like scroll() or in the visibility of the view, such as view()With scroll() you can create progress bars that grow as the user scrolls through the page; view() allows you to trigger animations when elements enter the viewport and stop them at a specific range with the animation-range property.
Safari has placed special emphasis on the accessibility of movement. It is encouraged that, before implementing visually striking effects, the impact on people sensitive to motion sickness or with vestibular disorders be assessed. The recommendation is adapt or disable intense animations when the user has configured the preference to "reduce motion", relying on media queries such as prefers-reduced-motion.
Another powerful new feature is view transitions between documents, introduced in Safari 18 and expanded in 18.2. These transitions allow smooth the transition between full pages Capturing snapshots before and after the change and animating between them. Simply define `@view-transition` and set `navigation: auto` to achieve a basic fade without writing JavaScript.
For more advanced effects, such as page slides, you can experiment with the view-transition-old and view-transition-new pseudo-elements and associate them with a view-transition-name. Again, it's encouraged to encapsulate the most aggressive effects within low-motion media queries, so that They will only run if the user has not requested less animation.
Anchor and popover positioning in CSS
In the layout area, Safari incorporates anchor positioning, designed to facilitate the creation of contextual menus, tooltips, and popovers that respond well to viewport changes without resorting to JavaScript. This functionality is combined with HTML's native popover API to show/hide floating elements.
The typical flow: You define an element that will act as an anchor, for example, the profile picture button, and assign it an anchor-name with a proper name (which must begin with two hyphens). Then, the menu you want to display becomes the target, you apply position-anchor with the anchor name, and you specify its position area with the position-area property.
The position area is visualized as a 3×3 grid around the anchor: top, center, bottom; left, center, right. With values like bottom center or bottom span-right You can place the menu right below the avatar, aligned to the center or extended to the right, adjusting the visual alignment without any headaches.
To improve adaptability, the `position-try` property allows you to declare alternative positions if the primary one doesn't fit on the screen. Possible values include keywords such as flip-inline or flip-block, which tell the browser to invert the inline or block axis to find another placement that is not cut off on narrow screens or different orientations.
In parallel, the `anchor()` function offers more granular control: instead of grids, you align specific sides of the target with those of the anchor, combining `anchor(bottom),` `anchor(left),` etc., with `calc()` and relative units like em. This is very useful for animate between multiple positions or use multiple anchors At the same time, when use cases become more complex.
Advanced visual effects: background-clip, shape() and typography
In terms of visuals, Safari has for years allowed advanced padding with background-clip: text, which lets Fill the text with gradients or images instead of a solid color. To use it, you apply a background-image (gradient or image), set background-clip: text, and make the text color transparent, showing the background only within the letters.
Now, WebKit extends the concept to borders with `background-clip: border-area`. This allows the gradient or image to be applied. only in the border areaCreating buttons and frames with gradient borders, progress circles, or even double-frame effects with photos. It's crucial to adjust the background-origin to the border area to prevent the gradient from repeating oddly within the content.
Regarding shapes, the `shape()` function arrives in Safari 18.4 to complement `path()`. While `path` allows you to draw complex SVG shapes but doesn't respond well to viewport changes, `shape()` is designed to create adaptable forms where only certain parts scaleYou can combine units such as percentages, container query units, and calc() to maintain angles and curves while length and height vary with available width.
This is ideal for backgrounds with arrows, speech bubbles, and other decorations that need to remain recognizable on both large and small screens. By using `shape()` on properties like `clip-path`, you achieve that the silhouettes retain their visual character while adapting to fluid layouts.
In typography, Safari 19 introduces text-wrap: pretty, a little gem for polishing the appearance of long paragraphs. Instead of squeezing each line to the maximum available width, this option Look for a range of line lengths that are more pleasing to the eye., avoiding very short, isolated words at the end or several consecutive lines broken by hyphens.
With `text-wrap: pretty`, the browser attempts to make the right margin of the text appear more uniform, reduces the occurrence of widows and orphans, and uses syllabification more sparingly. It's a feature that will be improved over time: if the browser doesn't support it, The content still looks good with the standard behavior.
SVG icons, HDR images, and dynamic range control
In static media, Safari now includes support for favicons in SVG format, something many developers have been requesting. Thanks to this, you can define a single vector resource that It looks crisp in bookmarks, Safari's home page, the dock, and other contexts.with different sizes and scales. In addition, SVGs usually weigh less than their PNG equivalents.
Another important leap forward is HDR (High Dynamic Range) images, which Safari is adding to its multimedia support after years of supporting HDR video since Safari 14. HDR images, usually in formats like HEIC or AVIF, They offer more bits per channel (10-16 compared to SDR's 8) and they benefit from wider color spaces like Display P3, resulting in more vivid colors, deeper shadows, and brighter highlights.
The practical problem is that, alongside SDR images, HDR images can stand out too much, for example, in search results or mixed galleries. To manage this, Safari introduces the CSS property `dynamic-range-limit`, which allows you to adjust the effective dynamic range of HDR content.
With `dynamic-range-limit: none` (the default value), full brightness is preserved. With `dynamic-range-limit: standard`, HDR images and videos are rendered as if they were SDR, matching the overall level. An intermediate value, `dynamic-range-limit: constrained`, aims to maintain the visual benefits of HDR without making it stand out from the rest, although this mode is not yet available in the Safari 19 beta.
If the browser does not support HDR, there is no need to duplicate assets: the browser itself takes care of it. HDR to SDR tone mappingTherefore, you can serve a single, top-quality HDR image and trust that it will look reasonable in older environments.
More media formats, MediaRecorder and Spatial Web
Safari has been expanding its list of supported codecs and containers so that you can use modern and efficient formatsAmong others, JPEG XL and HEIC are supported on the web, and Safari 19 adds Ogg Opus and Ogg Vorbis, bringing the number of supported media formats between audio and image to about fifteen.
Safari 18.4 closes a significant gap by adding support for WebM in the MediaRecorder API, meaning your web apps can record video or audio in real time and export WebM files with codecs such as VP8/VP9 for video and Opus for audio, both in Safari and in WKWebView views.
With regard to the spatial web, Apple has worked on stereoscopic rendering of 3D models and playback of immersive videos directly in Safari, without extra plugins. This enables experiences where 3D models and 2D content coexist on the same page, especially relevant in xrOS. Apple promises more capabilities, such as complete three-dimensional environments that can be integrated into your website.
The specific WWDC sessions on spatial web explain recommended patterns for integrating models, managing performance, and providing user-friendly interfaces, all supported by WebKit and Safari as a foundation.
Feature Flags, Safari Technology Preview, and Reference Resources
To experiment with web platform technologies before they arrive in the stable Safari, Apple offers the feature switching options (feature flags) and the app Safari Technology Preview, which is updated every two weeks with the latest WebKit.
Feature flags are accessed from the Development menu by selecting "Feature Toggles" or "Feature Flags." In this window, you'll see features grouped by topic (Animation, CSS, JavaScript, Media, etc.), with a search function and a status indicator: Stable, Testable, Preview, or Developer Features. Each flag can be enabled or disabled with a simple checkbox.
Functions in Stable state are those that have just started being sent by default and remain temporarily switchable for diagnose problems or test backward compatibilityTestable features are prototypes under development designed to gather early feedback and refine standards. Preview features are mature enough for developers to thoroughly test; they are disabled in standard Safari but enabled by default in Safari Technology Preview.
There are also flags classified as Developer Features, intended for development behavior or to temporarily reactivate obsolete APIs. Apple reminds users that these flags They are reset to their default values with each Safari updateand that the default settings represent how most users will see your content.
In addition to these tools, Apple maintains detailed release notes for Safari and WebKit at webkit.org, "What's New in Safari" articles for each major release, and in-depth documentation for the Web Inspector. To learn exactly what each version of Safari supports, It is recommended to consult caniuse.comAnd if you want to always be ahead, download Safari Technology Preview from the official website.
Advanced Safari settings for developer and privacy
Safari's advanced settings include several useful options for both developers and advanced users. For example, you can configure the Smart Search field to display the full URL of the site instead of just the domainThis is useful when you want to quickly see complete routes like www.apple.com/es/safari/ instead of apple.com/es.
You can also define a minimum font size for web page text, which prevents tiny fonts that strain the eyes. Apple suggests values such as 12 or 14 points If you have any doubts, be aware that this setting may change the appearance of some sites.
Another interesting option is to allow the Tab key to cycle through all interactive elements on a page (links, buttons, etc.), which is key for Improve keyboard navigationIn terms of privacy, you have tools to apply advanced anti-tracking and fingerprint protection measures, either only in private browsing or throughout all browsing, limiting the tracking ability of third parties.
Safari also has fine-tuning settings related to Apple Pay and Apple Card, allowing compatible websites to check if the user has Apple Pay set up on their Mac, iPhone, or Apple Watch, or if they have an Apple Card. All of this can be revoked from Settings > Advanced by unchecking the box next to "Allow websites to check if Apple Pay and Apple Card are available," thus maintaining clear control over what data the browser exposes.
Other advanced controls include the complete blocking of cookies (although this may break functionality on many sites), the ability to anonymously share featured URLs with Apple to improve products, automatic saving of articles for offline reading, the use of a custom stylesheet instead of the site's, the choice of default encoding to avoid corrupted text, and the configuration of proxies to access the internet through corporate firewalls.
By combining all these capabilities—extensions, app integration APIs, inspection tools, next-generation CSS support, continuous media improvements, and a host of advanced tweaks and experimental flags—Safari and WebKit put powerful tools in developers' hands. a very complete ecosystem for designing, testing and refining high-level web experiences within the Apple universe, with a constant focus on performance, accessibility, and user privacy.
