---
title: "A new HTML element for installing web apps"
publication: "Frontend Focus"
issue: 741
published_at: "2026-05-13"
canonical_url: "https://frontendfoc.us/issues/741"
---

Plus Tailwind CSS 4.3, how Firefox got more installs thanks to the DMA, and a CLI tool for looking up web platform features.      

Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/interviewing-frontend-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=frontendinterviewprep)        

🚀 **Frontend** Focus 

#​741 — May 13, 2026 | [Read on the web](https://frontendfoc.us/issues/741)      

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/g2b0isbbxekey0t89nsl.jpg)](https://webkit.org/blog/17938/webkit-features-for-safari-26-5/)  

[Safari 26.5 Released: Here's the WebKit Features](https://webkit.org/blog/17938/webkit-features-for-safari-26-5/) — Beyond the usual polish, 26.5 includes support for the `:open` pseudo-class, improvements to the CSS `random()` function, anchor positioning fixes, support for `color-interpolation` in SVG gradients, and Origin API support. 

Jen Simmons  

🧭 In related Safari news, the latest Safari Technology Preview Release [is out now](https://webkit.org/blog/17953/release-notes-for-safari-technology-preview-243/).  [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/b8d3fcf9.png)](https://frontendmasters.com/courses/interviewing-frontend-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=frontendinterviewprep) 

[Prepare for Big Tech Frontend Interviews](https://frontendmasters.com/courses/interviewing-frontend-v2/?utm_source=email&utm_medium=frontendfocus&utm_content=frontendinterviewprep) — Join Evgenii Ray for this detailed video course and land that dream job. Work through complex JavaScript, TypeScript, and UI component challenges, learning strategies to approaching onsite and take-home assignments. 

Frontend Masters sponsor   

[Meet Your Users Where They Are with Obs.js](https://csswizardry.com/2026/05/meet-your-users-where-they-are-with-obs-js/) — [Obs.js](https://csswizardry.com/Obs.js/demo/) is a tiny inline script that reads browser signals (latency, bandwidth, Data Saver, battery, CPU, memory) and exposes them as classes on `<html>` (and via `window.obs`). You can use these to serve smaller images on weak networks, skip animations on low battery, and adapt to your users’ real-world conditions. 

Harry Roberts   

[Install Web Apps with the New `<install>` Element](https://developer.chrome.com/blog/install-element-ot) — A new HTML element is available for testing in Edge and Chrome (behind a flag) that renders a trusted 'install' button for web apps with no JS needed. This article digs into the details of how it works and how it compares to the [Web Install API](https://blogs.windows.com/msedgedev/2025/11/24/the-web-install-api-is-ready-for-testing/). 

Patrick Brosset     

⚡️ IN BRIEF 

- 📏 [Tailwind CSS v4.3 is out](https://tailwindcss.com/blog/tailwindcss-v4-3) with new scrollbar utilities, a new `@container-size` utility, `zoom-*` utilities, and more.
- 🇺🇸 If you're in the US, you can get a free [`*.city.state.us` locality domain](https://fredchan.org/blog/locality-domains-guide/).
- 🗓️ [Google's I/O conference](https://io.google/2026/) returns next week, with [the developer keynote](https://io.google/2026/explore/developer-keynote-1) taking place on Tuesday.
- ❓ Did you know [Firefox's DevTools has a `$$$` function](https://remysharp.com/2026/05/01/devtools-how-to-query-through-the-shadow-dom) for querying through the Shadow DOM?
- 🤖 Mozilla shares a behind-the-scenes look at [how Claude Mythos is helping to find bugs in Firefox.](https://hacks.mozilla.org/2026/05/behind-the-scenes-hardening-firefox/)      

📙 Articles, Opinions & Tutorials  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1778673310/ynlqo4me8mkownywovk3.png)](https://css-tip.com/speed-control/)  

[Controlling the Speed of Infinite Animations](https://css-tip.com/speed-control/) — Learn how to control the speed of infinite CSS animations on user interaction, allowing for accelerating, slowing down, stopping, or reversing animations with a CSS variable. 

Temani Afif   

[Soon We Can Finally Banish JavaScript to the _ShadowRealm_](https://css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm/) — Mat takes us through the _in-progress_ TC39 proposal for running JavaScript in an isolated ‘pseudo-realm’ with its own globals and intrinsics — handy for third-party code and anything you want to keep away from your global scope. 

Mat Marquis   

[Workshop: Debug Next.js Without Switching Tools](https://sentry.io/resources/nextjs-may-workshop/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=nextjs-fy27q2-nextjsworkshop&utm_content=newsletter-sponsored-link-register) — Hands-on Sentry workshop on debugging Next.js with high-context logs and distributed tracing. [Register today](https://sentry.io/resources/nextjs-may-workshop/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=nextjs-fy27q2-nextjsworkshop&utm_content=newsletter-sponsored-link-register). 

Sentry sponsor   

[Better Browser Caching with `No-Vary-Search`](https://csswizardry.com/2026/05/better-browser-caching-with-no-vary-search/) — `No-Vary-Search` is an HTTP response header that tells caches which URL parameters can be ignored when matching requests to cached responses. While [support is limited](https://caniuse.com/mdn-http_headers_no-vary-search) in browsers, for now, it's a general HTTP caching extension, so CDNs and shared caches can benefit too. 

Harry Roberts   

[Six Million Selections Later: How the DMA Is Giving People Browser Choice](https://blog.mozilla.org/netpolicy/2026/05/11/six-million-selections-later-how-the-dma-is-giving-people-browser-choice/) — Two years on, the EU’s Digital Markets Act has been beneficial for Mozilla: “_Firefox is selected through a DMA browser choice screen every 10 seconds. That adds up to more than six million Firefox selections_”. 

Gemma Petrie and Tasos Stampelos (Mozilla)   

[Testing Vue Components in the Browser](https://jvns.ca/blog/2026/05/02/testing-vue-components-in-the-browser/) — Julia sets up integration tests for her components that run entirely in the browser. She shares the issues she encountered while maintaining her approach of writing JavaScript for the frontend without using Node or server-side tooling. 

Julia Evans   

[On Rendering the Sky, Sunsets, and Planets](https://blog.maximeheckel.com/posts/on-rendering-the-sky-sunsets-and-planets/) — Beautiful, thoughtful, and detailed work with shaders. 
Maxime Heckel   

[Why Keyboard Users Can't Scroll Your Overflow Containers](https://css-tricks.com/why-keyboard-users-cant-scroll-your-overflow-containers/) 
Godstime Aburu   

[There Are Only Four Sensible Ways to Build a Website](https://www.jonoalderson.com/conjecture/four-ways-to-build-a-website/) 
Jono Alderson   

[Preserving DOM Changes Across Live Reloads](https://kittygiraudel.com/2026/05/01/preserving-dom-changes-across-live-reloads/) 
Kitty Giraudel    

🧰 Tools, Code & Resources  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/lbvqiow0m1v28khqndxx.jpg)](https://www.npmjs.com/package/web-features-cli)   

[wf: A CLI Tool for Looking Up Web Platform Features](https://www.npmjs.com/package/web-features-cli) — A CLI tool for looking up web platform feature support, bugs, and docs, from [Patrick Brosset](https://patrickbrosset.com/) of the Microsoft Edge team. You can install and run it as `wf` _or_ you can just run it with `npx` like so: `npx web-features-cli "fetch"` .. The data is fetched live, too, so it’s always up to date. 

Patrick Brosset (Microsoft)   

[Handsontable - Ship Faster with a Pre-Built Data Grid Component](https://handsontable.com/evaluation) — 45 days of full feature trial plus direct support that will help you build what you’re aiming for. 

Handsontable sponsor   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/jtuzetnfsmbiv0owbcam.jpg)](https://animejs.com/)  

[Anime.js 4.4: The Flexible Animation Engine for HTML Elements](https://animejs.com/) — At ten years old, the ‘animate anything from JavaScript’ library continues to get even better with a [new `scrambleText` effect](https://animejs.com/documentation/text/scrambletext/) and [auto-grid layout mode](https://animejs.com/documentation/utilities/stagger/stagger-parameters/stagger-grid) for stagger grids. The [docs](https://animejs.com/documentation/getting-started) for Anime are truly top-tier. 

Julian Garnier   

[Cascade: A Set of SVG & React Icons for CSS Properties](https://designsurface.dev/cascade) — A niche set of 97 icons specifically for representing CSS properties (e.g. a square for `display: block`, a two-column box for `display: flex`, and so on). Ideal if you're building design tools. [GitHub repo](https://github.com/andflett/cascade). 

Andrew Flett   

[visual-explainer: An Agent Skill That Turns Complex Terminal Output Into Styled HTML Pages](https://github.com/nicobailon/visual-explainer) — The idea here is to enable your agent to produce a more readable output than ASCII art or box diagrams, especially for more complex concepts like system architecture, diff reviews, and so on. 

Nico Bailon       

📰 Classifieds   

⚡️ Add lightning-fast barcode & QR scanning to your web app with [STRICH](https://strich.io/?ref=frontend-focus), a lean JS library. Simple, predictable pricing. [Free trial and demo!](https://strich.io/?ref=frontend-focus) 

--- 

🔎 Detect, Highlight, Fix Accessibility - Test for WCAG & ARIA in the browser! Get [A11yInspect Pro](https://www.barrierbreak.com/gaad-2026-a11yinspect-pro/?utm_source=FF+Newsletter&utm_medium=Email&utm_campaign=GAAD26&utm_id=GAAD26) Free for 1 year - A developer friendly tool. [Join the waitlist](https://www.barrierbreak.com/gaad-2026-a11yinspect-pro/?utm_source=FF+Newsletter&utm_medium=Email&utm_campaign=GAAD26&utm_id=GAAD26).      

🔠 Putting Fonts Face-to-Face  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1778673556/nthyhjq4syimzq08yrzy.png)](https://www.findfont.co/)  

[Find Font: A Web Tool to Browse, Compare & Download Fonts](https://www.findfont.co/) — Includes a live comparison tool and an AI-powered font-pairing tool, with 5000+ free curated fonts to select from, in 50+ categories. You can view trending fonts, new additions, and compare up to 10 fonts on the same page. 

Kaan Asici    

📬 

**Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). 

--- 

**Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). 

--- 

**Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. 

--- 

Published by Cooper Press Ltd.
Curated by [Chris Brandrick](https://bsky.app/profile/brandrick.bsky.social) & [Peter Cooper](https://twitter.com/cooperx86).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom 

[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)
