--- title: "The select element, sized just right" publication: "Frontend Focus" issue: 748 published_at: "2026-07-01" canonical_url: "https://frontendfoc.us/issues/748" --- Plus Chrome 150, animated radial gradient masks, WebGL with no GPU, and the colors your screen can't show you. Together with [![WarpStream\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_1280,h_215/e_make_transparent/co_white,e_outline:17/wjyfnbcwhpwpyfcknxgi.png)](https://developers.webflow.com/?utm_source=cooperpress-newsletter&utm_medium=email&utm_campaign=fy27-cooperpress-newslettter&utm_content=frontend-focus) 🚀 **Frontend** Focus #​748 — July 1, 2026 | [Read on the web](https://frontendfoc.us/issues/748) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1782904196/tjmlfqnyyznp1pq3cu0a.png)](https://jakearchibald.com/2026/goldilocks-select-height/) 🥣 [The Goldilocks Customizable Select Height](https://jakearchibald.com/2026/goldilocks-select-height/) — Jake walks through getting the sizing of customizable <`select`> elements _just right_. He lands on a `calc-size()` solution that respects intrinsic sizing while capping dimensions. A practical deep-dive with demos, CSS code examples, and fallbacks. Jake Archibald [Introducing the <`usermedia`> HTML element](https://developer.chrome.com/blog/usermedia-html-element) — Shipping in Chrome 151, this replaces the `getUserMedia()` prompt for controlling camera and microphone access. It also introduces a way to let users change their mind on blocked permissions, without the need to dig into browser settings. Viana and Le (Google) [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/e3fc73c1.png)](https://developers.webflow.com/?utm_source=cooperpress-newsletter&utm_medium=email&utm_campaign=fy27-cooperpress-newslettter&utm_content=frontend-focus) [Webflow for Developers](https://developers.webflow.com/?utm_source=cooperpress-newsletter&utm_medium=email&utm_campaign=fy27-cooperpress-newslettter&utm_content=frontend-focus) — APIs, SDKs, and Code Components for building sites on Webflow. Bring your own code, deploy apps on Webflow Cloud, build custom integrations, publish to the app marketplace, or build with agents via the MCP server. Webflow sponsor [The Shifting Line Between CSS States and JavaScript Events](https://css-tricks.com/css-states-and-javascript-events/) — A tour of the (more than you’d think) CSS pseudo-classes that can stand in for JS event listeners, plus a look at the experimental/future `event-trigger` syntax. Daniel Schwarz ▶[Modern UI Patterns](https://www.youtube.com/watch?v=8FSLsVAJj2w) — A talk from the recent CSS Day conference in which Una dives into some of the newest updates in CSS and the web UI space, and also shares a UX framework of 5 principles to frame your design decisions through a modern UI lens. Una Kravets ⚡️ IN BRIEF - ✏️ Chrome 150 is rolling out, so [Rachel Andrew takes a look](https://developer.chrome.com/blog/new-in-chrome-150) at what's new, including `text-fit` property support and a way to create native gradient borders. - 🗺️ [Here's a cool DIY project](https://eduardoboucas.com/posts/2026-06-29-wall-map/) in which Eduardo Bouças lit up a wall-mounted LED world map with live CDN traffic from the Netlify Edge network. - 👾 Version 7.3.0 of Font Awesome [has arrived](https://fontawesome.com/changelog), complete with a nice new (Pro+) set of [200+ retro Pixel icons](https://fontawesome.com/icons/packs/pixel). - 📡 It's [13 years since Google Reader closed](https://bsky.app/profile/zachleat.com/post/3mplrk6xttc2l). Here's [our feed](https://frontendfoc.us/rss/) if you want it. - 🤚 [Pointer Events Level 3 is now a W3C Recommendation](https://www.w3.org/news/2026/pointer-events-level-3-is-now-a-w3c-recommendation/). 📙 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1782917838/w6osacoeypvyo5zjzmdh.png)](https://cassidoo.co/post/radial-mask-text-css/) [An Animated Radial Gradient Mask Over Text in CSS](https://cassidoo.co/post/radial-mask-text-css/) — Cassidy shows us how she replicated a neat radial rings effect, using the CSS `mask` property along with a repeating radial gradient. [Demo here](https://codepen.io/cassidoo/pen/QwdMQVm). Browser support isn’t universal, but the journey she takes is interesting. Cassidy Williams [Dark Mode with Web Standards](https://olliewilliams.xyz/blog/dark-mode/) — A good technical overview on how to implement a robust dark mode for your site — one that respects OS-level preferences, but also provides a manual override. Ollie Williams [Your Agent Builds the Frontend. What About the Database?](https://ghost.build/?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) — _ghost_ gives it a Postgres fork per task, like a scratchpad. Spin up, throw away, no project limits. [Try for free](https://ghost.build/?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter). ghost sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1782907455/nydsaac0z11wcjcp2xvf.png)](https://www.youtube.com/watch?v=TUcWdCrITdw) ▶[Supercharge Web UX with View Transitions](https://www.youtube.com/watch?v=TUcWdCrITdw) — In this 50-minute talk Bramus starts off with a clear introductory overview of how View Transitions work, before “_turning it up to 11_” and really getting into the detail of what we can achieve with this API. Bramus Van Damme [WebGL Without a GPU](https://microlink.io/blog/webgl-without-a-gpu) — How do you render WebGL on a fleet of Linux boxes with no graphics card? A look at the CPU-emulation chain that’s available, and a Chrome flag that sped up taking a screenshot by 4x. Kiko Beats [Modes and Themes That Stick: Building a Persistent Toggle Solution](https://www.alwaystwisted.com/articles/modes-and-themes-that-stick-building-a-persistent-toggle-solution) — A three-layer, progressively enhanced approach to mode and theme switching. Stuart Robson [Streaming HTML with `textStream()` in Chrome Canary](https://olliewilliams.xyz/blog/streaming-html/) Ollie Williams [Using Scroll-Driven Animations for Opposing Scroll Directions](https://css-tricks.com/scroll-driven-animations-opposing-scroll-directions/) Silvestar Bistrović [The Web is Being Made Accessible for AI, Not People](https://www.techpolicy.press/the-web-is-being-made-accessible-for-ai-not-people/) Zong & Elavsky 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1782903970/rdevuzmmk76hqyczgazw.png)](https://slimselectjs.com/) [Slim Select 4.0: An Advanced Select Dropdown Control](https://slimselectjs.com/) — A feature-rich select dropdown component with no dependencies. The recently released [v4.0](https://github.com/brianvoe/slim-select/releases/tag/v4.0.0) adds a _modal mode_ for mobile-friendly picking. Brian Voelker [FixCSS: A Library to Rectify Mistakes in the Design of CSS](https://tangled.org/vale.rocks/FixCSS) — TIL that the CSS Working Group has [a list of ‘mistakes’](https://wiki.csswg.org/ideas/mistakes/) made in the design of CSS. This library sets out to rectify these failures, as [explained here](https://vale.rocks/micros/20260701-0400). Declan Chidlow [One Session Left: Agentic Debugging with Sentry MCP and Seer](https://sentry.io/resources/201-series/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=brand-fy27q2-201workshop&utm_content=newsletter-sponsored-link-register) — Build agentic debugging with the Sentry MCP, CLI and Seer. Catch it before it's done. Sentry sponsor [`` 2.0: Web Component for Generating QR Codes](https://github.com/educastellano/qr-code) — A recently modernized, decade-old solution to display QR codes on the Web in PNG, SVG, and HTML formats (so you can style them entirely to your liking). [Demo.](https://educastellano.github.io/qr-code/demo/) Eduard Castellano [Snipgrapher: CLI Tool to Generate Images of Code Snippets](https://github.com/mcollina/snipgrapher) — Whether from code files, stdin, or an inline source. It uses the powerful [Shiki](https://shiki.style/) syntax highlighter, but with a built-in fallback option. Matteo Collina 💡 If you'd prefer a Web-based tool for creating syntax highlighted screenshots of code, [Carbon](https://carbon.now.sh/) remains a great option. 📰 Classifieds 📸 Scan barcodes, QR codes and others directly in the browser using [STRICH](https://strich.io/?ref=frontend-focus), a lean JS SDK. [Free 14-day trial, try the demo app today!](https://strich.io/?ref=frontend-focus) 🦜 ...and finally [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1782305009/ihheeh0bkjqhiahtjkis.png)](https://moultano.wordpress.com/2026/06/19/where-to-find-the-colors-your-screen-cant-show-you/) [Where to Find the Colors Your Screen Can’t Show You](https://moultano.wordpress.com/2026/06/19/where-to-find-the-colors-your-screen-cant-show-you/) — We may now have fancy displays and a slew of expanding color capabilities at our disposal (P3, OKLCH, `color()`), but there are still real-world colors screens can’t reliably reproduce. Ryan takes us on a fascinating journey of just what those colors are: “_There are around 500 species of birds with colors outside the sRGB gamut_”. Ryan Moulton 📬 **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|*)