Best of Safari2025

  1. 1
    Article
    Avatar of hnHacker News·37w

    Apple has a private CSS property to add Liquid Glass effects to web content

    Apple has developed a private CSS property called `-apple-visual-effect` that enables Liquid Glass effects in web content within iOS apps. The property supports various system materials including the new glass effects from iOS 26, but requires enabling a private WKPreferences setting called `useSystemAppearance`. While this feature can't be used in App Store apps due to its private nature, it suggests Apple is using webviews with native UI integration in their own applications without users realizing it.

  2. 2
    Article
    Avatar of webkitWebKit·49w

    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.

  3. 3
    Article
    Avatar of webkitWebKit·34w

    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.

  4. 4
    Article
    Avatar of hnHacker News·23w

    Introducing CSS Grid Lanes

    CSS Grid Lanes is a new layout feature available in Safari Technology Preview 234 that enables masonry-style layouts using `display: grid-lanes`. It leverages CSS Grid's column/row definition syntax to create flexible, responsive layouts without media queries. Items automatically flow into lanes based on available space, similar to traffic changing lanes. The feature supports spanning items across lanes, explicit placement, bidirectional layouts (waterfall or brick), and includes an `item-tolerance` property to control placement sensitivity. Grid Lanes makes complex layouts like photo galleries, article grids, and mega menus significantly easier to implement with minimal CSS.

  5. 5
    Article
    Avatar of bramBram.us·33w

    What’s New in View Transitions (2025 Update)

    View Transitions have evolved significantly since their initial release in Chrome in 2023. The 2024 updates introduced Cross-Document View Transitions, view-transition-class, and View Transition Types, with Safari joining the support ecosystem. A comprehensive overview of 2025 developments is available on the Chrome developer blog.

  6. 6
    Article
    Avatar of css_tricksCSS-Tricks·35w

    Touring New CSS Features in Safari 26

    Safari 26 introduces 75 new web platform features including major CSS additions like anchor positioning for tooltips and modals, scroll-driven animations that link CSS animations to scroll position, the progress() function for mixed unit calculations, and self-alignment in absolute positioning. New features also include contrast-color() function for automatic text color selection and improved text-wrap: pretty for better typography. These additions bring Safari closer to feature parity with Chrome and support the Interop 2025 initiative for cross-browser compatibility.

  7. 7
    Article
    Avatar of omgubomg! ubuntu!·42w

    Orion Browser for Linux Gets Exciting Progress Update

    Kagi's privacy-focused Orion browser for Linux reaches Milestone 2 with significant progress including working tabs, bookmarks, session persistence, and performance parity with other WebKitGTK browsers like GNOME Web. Built using GTK4/libadwaita and WebKit engine, the browser now supports tab dragging, bookmark organization, browsing history, and WebExtension API. Milestone 3 will focus on advanced tab management and extension installation. Public testing remains limited to paid subscribers initially, with free availability planned once stable.

  8. 8
    Article
    Avatar of webkitWebKit·48w

    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.

  9. 9
    Article
    Avatar of omgubomg! ubuntu!·1y

    Kagi is Bringing Orion Web Browser to Linux

    Kagi, known for its private search engine, is bringing its Webkit-based Orion web browser to Linux. Orion touts features such as zero telemetry, built-in ad and tracking blocking, lower memory usage, faster page speeds, and better battery efficiency compared to other browsers. Currently available on macOS and iOS, Kagi aims for feature parity on the Linux version by next year. While not initially open-source, Kagi is working towards open-sourcing many of its components.

  10. 10
    Article
    Avatar of webkitWebKit·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.