# safari Published articles for safari. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Safari 27's Web Platform Test progress compared with Firefox and Chromium DevFeed: [Safari 27's Web Platform Test progress compared with Firefox and Chromium]() Original publisher: [Read original article]() Author: Alex Russell Published: 2026-07-06T00:00:00Z Content type: opinion Language: en Sources: [Alex Russell]() Topics: [browser](), [Web platform](), [Chromium](), [Firefox]() Tags: [browsers](), [chromium](), [competition](), [firefox](), [openweb](), [safari](), [test](), [web-platform](), [webdev]() ### AI overview An opinion article argues that Safari 27's quality and Web Platform Test improvements should be assessed against its slower release cadence and compared with Firefox and Chromium. It says Safari's time-weighted rate of improved tests is lower than those competitors. ### Source excerpt It's perilous to disagree with someone as wise and thoughtful as Jeremy, but for the past fortnight his post in response to Apple's iOS 27 marketing invades my quiet moments like a cricket in the attic. "Why", I ruminate, "should someone who understands the state of play give Apple credit for doing less than the minimum while rubbishing those who have consistently done more?" Contents Redux Features Over Tests Focus Areas Consequences You Do Not Have To Hand It To Them Everywhere You Turn Quality Has A Quality All Its Own Redux Like Apple's previous marketing of Safari 16.4 and Safari 26, the conjoined September release of Safari and iOS 27 documents an achingly slow release cycle. It would be one thing if the features or spec conformance were world-beating, but looking closely at the release notes, Safari 27 is set to deliver fixes for issues that, by and large, competing engines didn't suffer.1 Don't get me wrong: it's great that Apple is focusing on quality; it remains a persistent issue for Safari. But how much relief should long-suffering web developers expect? The best comparative measures come from the communal Web Platform Tests project. Comparing the current experimental builds with stable channel releases can illuminate the scale of change we can expect when the next major version of each browser launches:2 WPT Test Pass Rates (%) 90% is the minimum Apple requires across all WPT tests for competitors' engines in the EU and Japan where it has been forced to allow them (in theory). Safari barely clears the bar. Source: wpt.fyi It would appear that Safari is closing on Firefox, but this is misleading. Apple managed seven releases over the past year, or a roughly eight week cadence. Mozilla and Chromium, meanwhile, have released 12 versions to stable, or one a month. These serve as denominators (7.4 weeks vs. 4.3) when calculating rates of improvement. Safari's larger increase in passing tests between nightly and stable versions (1558 vs. 990 for Firefox) look ## A beginner-friendly guide to view transitions in CSS DevFeed: [A beginner-friendly guide to view transitions in CSS]() Original publisher: [Read original article]() Author: yash-raj-bharti Published: 2025-10-09T00:00:00Z Content type: tutorial Language: en Sources: [MDN Blog]() Topics: [view transitions](), [CSS](), [Web Development](), [browser](), [Single-page application (SPA)]() Tags: [beginner](), [chrome](), [css](), [edge](), [firefox](), [guide](), [how-to](), [navigation](), [safari](), [user-experience](), [view-transitions](), [web-development]() ### AI overview A beginner-friendly tutorial on using CSS view transitions to add smooth animated navigation between pages in multi-page applications. It explains how the View Transition API and CSS view transitions support progressive enhancement across modern browsers, including Chrome, Edge, Safari, and developing Firefox support. ### Source excerpt Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages. ## CSS random() DevFeed: [CSS random()]() Original publisher: [Read original article]() Author: Erik Runyon Published: 2025-10-08T00:00:00Z Content type: article Language: en Sources: [Erik Runyon]() Topics: [CSS](), [WebKit](), [Front end](), [JavaScript]() Tags: [css](), [frontend](), [javascript](), [safari](), [web-development]() ### AI overview The article examines Safari's non-standard CSS random() function, describing its random(min, max, step) syntax and current limitations. It explains that the function supports numeric and color contexts but not selectors or string values, and discusses possible uses such as random dimensions, collection items, images, and displayed random numbers. ### Source excerpt Safari recently implemented a non-standard (yet?) CSS random() function (currently only in WebKit, and not yet part of any CSS specification). Since many recent CSS features are directly aimed at replacing common JavaScript functionality, I expected this function to do the same. While it has some neat use cases, it doesn't cover most of the scenarios where I currently use JavaScript's Math.random(). What it does The basic format of the function follows the pattern "random(min, max, step)". For instance, if you want to assign an element a random height between 50px and 200px, you would use "height: random(50px, 200px)". You can also include a "step" value like so "height: random(50px, 200px, 50px)" where the values will always be a multiple of 50. You can see more examples on the WebKit post "Rolling the Dice with CSS random()" and Frontend Masters "Very Early Playing with random() in CSS". What it doesn't Currently, random() can only be used in numeric or color contexts -- not in selectors or string values like URLs or text content. I have two primary use cases, and one just for fun. All three are marked-up as I would expect to use them if they were supported in the CodePen below. Random items from a collection A common pattern on many Notre Dame sites would be to show a random item from a collection. These could be content such as faculty spotlights, recent publications, or student profiles. We always know how many we're choosing from, and they're always contained to a specific section. So being able to use CSS to show a random child using ":nth-child" would be fantastic. Random images Less common is showing random images. This could be in a feature area on the homepage, or even a decorative background image. This would require the ability to concatenate a string with the random number. Random numbers A "just for fun" feature would be displaying the value from the random() function. My initial thought would be a CSS only dice roller. The demo in the pen would requir ## Up and Coming ARIA DevFeed: [Up and Coming ARIA]() Original publisher: [Read original article]() Author: John Northup Published: 2025-05-30T18:19:41Z Content type: tutorial Language: en Sources: [WebAIM Blog]() Topics: [aria](), [Accessibility](), [Web Accessibility (a11y)](), [Web]() Tags: [accessibility](), [android](), [aria](), [browser](), [chrome](), [edge](), [firefox](), [ios](), [macos](), [safari](), [uncategorized](), [web](), [web-accessibility](), [windows](), [windows-11]() ### AI overview This article surveys emerging ARIA 1.3 features, including aria-errormessage, aria-description, aria-details, and aria-keyshortcuts. It explains their intended uses and reports varying support across browsers, screen readers, and operating systems tested in May 2025. ### Source excerpt If you work in web accessibility, you've probably spent a lot of time explaining and implementing the ARIA roles and attributes that have been around for years--things like aria-label, aria-labelledby, and role="dialog". But the ARIA landscape isn't static. In fact, recent ARIA specifications (especially ARIA 1.3) include a number of emerging and lesser-known features that [...] ## Sending to MacOS, iOS Safari using FCM JS SDK DevFeed: [Sending to MacOS, iOS Safari using FCM JS SDK]() Original publisher: [Read original article]() Author: Kai Wu Published: 2023-08-01T00:00:00Z Content type: tutorial Language: en Sources: [Firebase Blog]() Topics: [Firebase](), [push-notification](), [SDKs](), [web applications](), [iOS](), [macOS](), [browsers]() Tags: [api](), [browsers](), [cloud-messaging](), [firebase](), [ios](), [js](), [js-sdk](), [macos](), [push-notification](), [safari](), [sdk](), [tutorials](), [updates](), [web](), [web-applications]() ### AI overview This Firebase tutorial explains how to use the FCM JS SDK to send web push notifications through Safari on macOS, iOS, and iPadOS. It covers the required setup, including Safari Push API interaction, manifest configuration, adding the app to the Home Screen on iOS and iPadOS, and requesting notification permission. ### Source excerpt News, tutorials, and updates from the Firebase team. ## CSS only floating labels DevFeed: [CSS only floating labels]() Original publisher: [Read original article]() Author: Stanko Published: 2023-07-05T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [CSS](), [HTML](), [Code](), [Demo]() Tags: [code](), [css](), [demo](), [focus](), [html](), [input](), [safari](), [state]() ### AI overview This tutorial explains how to use the CSS :placeholder-shown pseudo-class and :not() to detect whether an input is empty or has a value without JavaScript. It demonstrates floating labels and conditionally displayed clear buttons, and notes a Safari requirement for the placeholder attribute. ### Source excerpt I recently learned about the pseudo CSS class :placeholder-shown. Obviously, it is a class that is added only when input placeholder is shown. But what that also means is that the input is empty: /* Input is empty */ input:placeholder-shown By negating it with :not() we can detect if the input has value: /* Input has value */ input:not(:placeholder-shown) I created a demo that uses these two CSS snippets to highlight input's current state. There is no JavaScript involved. Input has value Input is empty Focused Real world use cases # I recently used this to conditionally display a clear button next to an input. But it can also be used to create floating labels. However, it's important to note that anything you want to style based on the input's state needs to be positioned after the input element. Floating labels # For a floating label, the HTML structure should look something like this: The floating label needs to be repositioned in two scenarios: when the input is focused and when it has a value. /* Input has value */ input:focus + label, input:not(:placeholder-shown) + label { /* Move the label above the button and scale it down */ transform: translateY(-100%) scale(0.75); } Clear button # Similarly, we'll put the clear button after the input: and hide it when input is empty: /* Input is empty */ input:placeholder-shown + button { /* Hide the clear button */ display: none; } Demo # Focus an input to make its label float, and type something to make the clear button appear. Name Email You can also play with the code on CodePen. Safari gotcha # Be aware that in Safari the :placeholder-shown pseudo class will only be added if the input has the placeholder attribute explicitly defined. Which means that we have to define it, but if we don't need the placeholder, we can easily hide it using CSS: input::placeholder { color: transparent; } ## macOS Security Bugs Exposed Safari History and Device Location to Unauthorized Apps DevFeed: [macOS Security Bugs Exposed Safari History and Device Location to Unauthorized Apps]() Original publisher: [Read original article]() Published: 2023-04-04T18:00:00Z Content type: article Language: en Sources: [Rambo Codes]() Topics: [macOS](), [Security](), [Vulnerabilities](), [Reverse Engineering]() Tags: [cve](), [cves](), [macos](), [macos-security](), [reverse-engineering](), [safari](), [security]() ### AI overview This article examines Apple operating-system security vulnerabilities, including CVE-2023-23506/28192, involving improper validation of clients by XPC services. It explains how assumptions about local XPC service isolation can fail and discusses the potential exposure of sensitive data. ### Source excerpt Gui Rambo writes about his coding and reverse engineering adventures. ## Using color-mix() to create opacity variants DevFeed: [Using color-mix() to create opacity variants]() Original publisher: [Read original article]() Published: 2023-03-31T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [color](), [Web Development](), [browsers]() Tags: [browsers](), [chrome](), [css](), [demo](), [experimental](), [firefox-nightly](), [guide](), [safari]() ### AI overview This tutorial explains how CSS color-mix() can create semi-opaque variants of brand colors by mixing them with the transparent color value. It also discusses browser support, color spaces, and a related DevTools demo. ### Source excerpt Build an alpha color system without splitting out channels using this one neat trick. ## Safari 16.4 Adds Long-Delayed Web Platform Features DevFeed: [Safari 16.4 Adds Long-Delayed Web Platform Features]() Original publisher: [Read original article]() Author: Alex Russell Published: 2023-02-22T00:00:00Z Content type: opinion Language: en Sources: [Alex Russell]() Topics: [WebKit](), [browsers](), [Web platform](), [PWA]() Tags: [browsers](), [competition](), [components](), [compression](), [css](), [pwa](), [reporting](), [safari](), [wasm](), [webdev](), [webrtc]() ### AI overview This commentary reviews Safari 16.4's web-platform additions, including PWA, Web Components, CSS, Web Codecs, WASM SIMD, compression, reporting, Canvas, and WebRTC changes. It argues that many features arrived years after Chromium implementations and notes some improvements remain limited to macOS and iPadOS. ### Source excerpt If you're a web developer not living under a rock, you probably saw last week's big Safari 16.4 reveal. There's much to cheer, but we need to talk about why this mega-release is happening now, and what it means for the future. Contents WebKit's Roaring Twenties Good Things Come In Sixes What Changed? Headcount Is Destiny Early Innings But first, the list! WebKit's Roaring Twenties Apple's summary combines dozens of minor fixes with several big-ticket items. Here's an overview of the most notable features, prefixed with the year they shipped in Chromium: 2015: Web Push for iOS (but only for installed PWAs) 2020: PWA Badging API (for unread counts) and id support (making updates smoother) 2015: PWA installation for third-party browsers (but not to parity with "Smart Banners") A bevy of Web Components features, many of which Apple had held up in standards bodies for years1, including: 2019: Constructable Stylesheets (important for performance) 2019: Form participation and default ARIA role 2021: Declarative Shadow DOM for "SSR" Myriad small CSS improvements and animation fixes, but also: 2018: CSS Typed OM for faster styling from JavaScript 2020: CSS Custom Properties can now be animated 2019: