Safari and Web Technologies

What web technologies or APIs should new web developers learn to prepare for the future?

• Focus on the fundamentals: HTML, CSS, and JavaScript. Understand their core purpose and how they work together.
• Learn semantic HTML for better accessibility and declarative functionality, reducing reliance on JavaScript for basic tasks.
• Master CSS layout techniques for responsive design and progressive enhancement to ensure broad browser and device compatibility.
• Explore the evolving landscape of 3D and spatial web technologies like the <model> element and WebXR.
• Prioritize accessibility by using semantic HTML, which provides built-in robustness and accessibility.

Where do web extensions fit into essential web development skills for the future?

• Web extensions utilize core web technologies: JavaScript, CSS, and HTML.
• They can enhance browsing experiences and provide useful tools for users.
• Extensions can be ported between browsers, and efforts are underway to standardize Web Extension APIs for smoother cross-browser development.

What upcoming web standards is the team most excited about?

• Web Extensions Working Group: Excitement for formalizing specifications and improving interoperability across browsers.
• Random Item function in CSS: Allows for picking between different values for CSS properties, opening up new creative possibilities.
• Spatial CSS (proposal): Enables advanced 3D transformations — still a proposal with no shipping news; relevant for Apple Vision Pro and e-commerce.
• <model> element: Facilitates adding 3D models to websites, with potential for JavaScript manipulation and integration with Spatial CSS.
• install element, declarative partial updates, and Canvas are also on the team's radar.

How is it possible for Safari to sometimes be more performant than native apps in terms of UI/UX for a native app developer?

• WebKit is deeply integrated into Apple's operating systems, including JavaScriptCore, which powers JavaScript execution.
• WebKit is actively optimized for performance, handling content refreshes and other complex tasks efficiently.
• The <webkit> view in SwiftUI allows native app developers to seamlessly integrate web technologies into their applications.
• Users prioritize functionality over the underlying technology; they simply want their desired experience, regardless of whether it's native or web-based.

How should web developers advocate for desired web features, and what should they avoid?

• Advocate:
  • Use bugs.webkit.org to report bugs and suggest features.
  • Engage with evangelists on social media.
  • Clearly articulate use cases and the benefits of a feature for users.
  • Create demos that represent actual use cases, not just flashy examples.
  • Be vocal and share the needs through demos, JavaScript libraries, and social media.
• Avoid:
  • Assuming that a feature implemented in one browser is a web standard.
  • Overly aggressive advocacy without clear use cases.
  • Being unkind; remember that these are human conversations.

What are Apple's recommendations regarding web standards positions and developer advocacy?

• Apple prioritizes user safety, privacy, and ease of use in its standards positions.
• Developers should articulate their needs clearly, even if Apple has a different standards position.
• The web standards process is collaborative and can be slow, but it aims for well-designed, long-lasting APIs.
• Developers can find published standards positions on GitHub.
• Filing requests and articulating needs is vital for meeting user requirements, even if a specific feature isn't immediately supported.

Are there any improvements to cookie synchronization in WKWebView, or recommended approaches?

• Use WKHTTPCookieStore to observe and manipulate cookies for WKWebView.
• For detailed cookie handling, the developer forums are recommended as there are no specific experts on cookies present.

Are there plans to further close the gap in API support for Safari extensions compared to Chrome and Firefox, for example, tab group APIs?

• Yes, there are ongoing efforts to standardize Web Extension APIs and achieve parity with other browsers.
• Developers are encouraged to file bugs on bugs.webkit.org and clearly state the use case for desired APIs.
• The WebKit team is working hard in community groups to standardize APIs and ensure consistent behavior across platforms.

With spatial CSS, will we see 3D content from the web on Apple Vision Pro?

• Spatial CSS is currently a proposal, with no specific shipping news.
• The inline HTML <model> element already allows for 3D models (USD and other formats) on the web.
• Immersive environments enable viewing these models at full scale.
• Spatial CSS, combined with full accessibility trees and other features, is seen as the future for spatial web experiences.

Is there still headroom for web performance optimization?

• Performance optimization is an ongoing process.
• Developers are constantly working to improve JavaScript execution, image loading, and overall website speed.
• Battery life is a significant consideration for performance, especially on mobile devices.
• New technologies like WebGPU are developed to better match modern silicon and improve performance.
• The evolution of websites and user needs necessitates continuous optimization.

How large should web 3D models be?

• Models should be optimized and kept as small as possible, similar to images.
• For most content on a page, models around 10MB can achieve maximum visual quality.
• Larger models may be necessary for full-screen experiences, similar to large videos.
• Optimization involves managing texture sizes, geometry complexity, USDZ compression, AVIF textures, and future mesh compression.

How should developers think about permissions in Safari extensions compared to other browsers? Are there things Safari is more restrictive about?

• Safari's permission model prioritizes user privacy, giving users control over which sites extensions can access.
• Permissions are not automatically granted and require explicit user consent.
• Extensions can use the "active tab" permission to limit access to the current tab, avoiding broad host permissions.
• The goal is to protect user privacy and ensure transparency about extension access.

How does the immersive API interact with existing web content? If a user is in an immersive environment and something on the page needs their attention, how does that handoff work?

• The web page remains accessible within an immersive environment.
• Users can interact with the web page as needed.
• If switching to another application is required, it's a single-app experience; other apps may dim but can be restored.
• Pressing the Digital Crown restores the shared web view from an immersive environment.
• The web page can alter the immersive environment (e.g., change position, control animations) through UI elements.

With Customizable Select (shipping Safari 27), how much styling works out of the box versus what needs explicit reset?

• Customizable Select is the feature shipping in Safari 27.
• Appearance-based select is a separate spec still in progress and not shipping yet — don't rely on it today.
• Out of the box (Customizable Select):
  • The layout works correctly.
  • The font inherits from the website, unlike appearance: none.
• Developer control:
  • Pseudo-elements allow styling specific parts like the picker icon or dropdown menu.
  • When layering icons or custom styling, keep text content in the element for fallback and accessibility (progressive enhancement).
  • The goal is 100% interoperability and a consistent base for styling across browsers.

For a developer with an existing Chrome or Firefox extension, what's the realistic amount of work to get it into Safari, and where do manifest or API differences tend to bite people?

• The effort varies; some extensions may work with minimal changes.
• Safari has worked to reduce manifest differences and generally doesn't fail on unsupported keys.
• Test extensions temporarily in Safari via the developer menu.
• If API inconsistencies are found, report them on bugs.webkit.org or use Feedback Assistant.
• Contributions to WebKit are welcome for improving API support.

What should web developers know about the upcoming Safari/WebKit release?

• The Safari 27 release notes are exceptionally long due to extensive quality improvements and bug fixes. WebKit is committed to improving the browser engine and aligning with web standards.
• Web extension support is now integrated into WebKit, allowing developers to contribute directly to the codebase.
• Explore the <model> element to experience 3D on the web across different platforms.
• The web platform is powerful — a lot is achievable with minimal frameworks by leveraging web standards.
• Look for Safari-specific technologies like the random() function and filter functions that are web standards and will be available in other browsers.

How do <model> element loading states and errors work?

• Model loading is promise-based — listen for load completion via the promise.
• Show a spinner or placeholder while loading; distinguish fetch vs. decode phases in the UX.
• Procedurally generated models may need extra wait time before display.
• Handle load failures gracefully with fallback content.

How can a Safari extension with a SwiftUI window communicate with a native macOS app for SEO workflows?

• Extension popups can use web navigation APIs within the extension context.
• Native messaging bridges the extension and the macOS app for bidirectional communication.
• A SwiftUI window in the host app can display extension-driven UI or receive data from the extension.