--- title: "CSS, but make it random" publication: "Frontend Focus" issue: 740 published_at: "2026-05-06" canonical_url: "https://frontendfoc.us/issues/740" --- Plus, 9 times the web platform borrowed from popular libraries, Chrome 148, and the media query range syntax. Together with [![Tiger Data logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_282/e_make_transparent/co_white,e_outline:30/px1u7kjyvz7xnbm6ytir.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) 🚀 **Frontend** Focus #​740 — May 6, 2026 | [Read on the web](https://frontendfoc.us/issues/740) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/hgysom9pnrtl4dvtu2ds.jpg)](https://ishadeed.com/article/range-syntax/) [How to Use the Media Queries Range Syntax for Better Breakpoints](https://ishadeed.com/article/range-syntax/) — Set `min-width: 300px` and `max-width: 300px` at exactly 300px and both rules fire. Ahmad's solution? [Ranged media queries](https://webstatus.dev/features/media-query-range-syntax). The syntax is widely supported, can also be used for container queries, and is easier to read and debug. Ahmad Shadeed [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/0d3f2139.png)](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) [Fast Dashboards Start with Fast Queries](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) — When dashboards outgrow vanilla Postgres, most teams add a second database. Pipelines, stale data. TimescaleDB extends Postgres so analytics stays fast on live data. Hypertables, 95% compression, continuous aggregates. [Start with a $1000 credit](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter). Tiger Data (creators of TimescaleDB) sponsor [9 Times the Web Platform Was Influenced by Libraries](https://jadjoubran.io/blog/web-platform-influenced-by-libraries) — Highlights how various libraries often do the “_R&D work in production_” for various web platform features that eventually end up as native APIs. A walk down memory lane for many, no doubt. Jad Joubran [Using `safe-area-inset` to Build Mobile-Safe Layouts](https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/) — The ‘safe area’ is the portion of the viewport guaranteed to be free from being obscured by system UI, notches, etc. and `safe-area-inset` lets you use values in your CSS to avoid content falling into such areas. Polypane ⚡️ IN BRIEF - 🧰 [Here's what's new in Chrome 148](https://developer.chrome.com/blog/new-in-chrome-148?hl=en) and [in the DevTools](https://developer.chrome.com/blog/new-in-devtools-148), including support for name-only `@container` queries, lazy loading for video and audio elements, and the [Prompt API](https://developer.chrome.com/docs/ai/prompt-api). - 🤖 A more critical take on [Chrome installing a 4GB on-device AI model file](https://www.thatprivacyguy.com/blog/chrome-silent-nano-install/) without asking (the _Gemini Nano_ model used with the Prompt API, as above). - 🙅 Mozilla has [pushed back](https://www.theregister.com/software/2026/04/30/mozilla-pushes-back-against-googles-prompt-api/5223409) on Google's AI API plans. Jake Archibald [notes on Bluesky](https://bsky.app/profile/jakearchibald.com/post/3ml6gf7d77s25) that others have concerns too. - ⏱️ Chrome is launching an origin trial [for the Container Timing performance API](https://developer.chrome.com/blog/container-timing-origin-trial). - 🪐 [Astro 6.2 is now available](https://astro.build/blog/astro-620/), adding more control over SVG optimization and logging. 📙 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1778061069/rdyoelcgnaxl3g3abjgh.png)](https://frontendmasters.com/blog/css-n-of-selectors-for-conditional-validation/) [CSS '`n of`' Selectors for Conditional Validation](https://frontendmasters.com/blog/css-n-of-selectors-for-conditional-validation/) — Preethi looks at the lesser known `n of` syntax in CSS’s `:nth-child()` selector and pairs it with `:has()`, creating a clever form validation system, all without using JavaScript. Preethi Sam [Build Any Web Layout, with Confidence](https://thelayoutmaestro.com) — A practical, written CSS course that teaches you how to think, build, and debug web layouts. Use the code `FFOCUS` for 10% off. The Layout Maestro sponsor [The Importance of Native Randomness in CSS](https://css-tricks.com/the-importance-of-native-randomness-in-css/) — The “_deterministic by design_” nature of CSS means that achieving true randomness requires workarounds (like JavaScript, preprocessors, or server-side work). This post looks at the options, and makes the case for native variation tools that can take CSS from just a styling language into a generative layout system. Alvaro Montoro [Trustworthy JavaScript for the Open Web](https://hacks.mozilla.org/2026/05/trustworthy-javascript-for-the-open-web/) — Web Application Integrity, Consistency and Transparency (WAICT) is an emerging spec for verifying that the JavaScript running in a browser actually matches what the site published ([here's a deeper explainer](https://blog.cloudflare.com/improving-the-trustworthiness-of-javascript-on-the-web/)). A prototype is now live in Firefox Nightly behind a flag. The Firefox Security Team (Mozilla) [Open Web vs AI: What Can W3C Do?](https://hidde.blog/web-ai-breakout/) — A write-up of a recent W3C Advisory Committee meeting where discussions were held on the threats the open web faces and what to do about it. Hidde de Vries [Warning: Containment Breach in Cascade Layer!](https://dbushell.com/2026/04/15/containment-breach-in-cascade-layer/) — A PSA from David here: “_I discovered a whole new level of specificity hell_.” David Bushell [Making Dark Mode Play Nicely with the Back/Forward Cache](https://guilhermesimoes.github.io/blog/making-dark-mode-work-with-bfcache) — The so-called [bfcache](https://developer.mozilla.org/en-US/docs/Glossary/bfcache) enhances browser performance, but it can also throw up some challenges. Guilherme Simões [We Needed a Screenshot Pipeline; We Got a Design QA Tool Instead](https://calibreapp.com/blog/screenshot-pipeline-qa-review) — A good reminder that zooming out for a high-level overview can often help! Ben Schwarz [ARIA Roles Explained: A Practical Guide for Web Developers](https://www.levelaccess.com/blog/aria-roles-explained-a-practical-guide-for-web-developers/) Level Access [AI Doesn't Fix Accessible Systems. It Depends on Them](https://annaecook.com/writing/2026/ai-doesnt-fix-accessible-systems-it-depends-on-them) Anna E. Cook 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/qrhtlsnyevw4hwpfuwtk.jpg)](https://css-generators.com/fancy-frame/) [Fancy Frames: A Pure CSS Generator for Squiggly/Wavy Frames](https://css-generators.com/fancy-frame/) — You probably haven’t seen a CSS generator like this one. It allows you to customize the size of the 'wavy' portion (the frame), along with radius, horizontal/vertical granularity – all based on `clip-path` syntax. Temani Afif [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1777466941/jzq4il2xbqtqfamkmcd8.png)](https://misery.co/shaderpad/) [ShaderPad: Add a Shader to Your Website Without the Boilerplate](https://misery.co/shaderpad/) — A lightweight, dependency-free WebGL shader library for embedding “stunning creative effects” on pages. [Repo here](https://github.com/miseryco/shaderpad). _I gave it a go, creating this animated rocket_. Riley J. Shaw [Clerk CLI: Scaffold Auth and Manage Config from Your Terminal](https://go.clerk.com/UtqUc3F) — Run clerk init to scaffold auth, clerk config to manage sign-in methods in code, Clerk API to query users. Clerk sponsor [AddFox: A Browser Extension Development Framework Based on Rsbuild](https://addfox.dev/) — Has support for Firefox and Chromium browsers, and has lots of developer-oriented features like HMR, test flows, works with any framework, and lots more. [GitHub repo](https://github.com/addfox/addfox). AddFox [StyleBop: A Native Visual CSS Editor for macOS](https://bendansby.com/apps/stylebop.html) — A visual CSS editor for Mac. You can browse your stylesheets as node diagrams, edit variables and properties, and more. Ben Dansby [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1778061560/sjgfd3d4wkioza4rirh4.png)](https://www.nicbarker.com/virtual-scrolling) [Virtual Scrolling](https://www.nicbarker.com/virtual-scrolling) — A neat visual demo that shows one approach for handling a large list. Rather than processing all items, this ‘virtual scrolling’ approach only processes the items that are currently visible on screen. Nic Barker demo 📬 **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|*)