Frontend FocusMulti Author Blogsread at source
Ten CSS features worth voting for
π Frontend Focus #β763 β October 21, 2026 | Read on the web Everyone's Interop 2027 Wishlists Last week we shared that you can now rank the Interop web platform proposals for 2027 . Since then, plenty of folks have shared their own rankings and explained their choices: β Josh Comeau's The Future of CSS β Josh's top ten, from CSS functions and corner-shape to anchored container queries and scroll-triggered animations, each with live demos, current browser support, and tips you can use today. A particularly good place to start. π Sara Soueidan's picks put accessibility first. It's a privilege, she notes, that we get to influence what browser makers work on. focusgroup is her top pick. βοΈ Declan Chidlow's 13 features β SVG improvements on top, followed by the CSS reading-flow and reading-order properties. π More picks from Stuart Robson , Eric Meyer , Ana Rodrigues , and Tyler Sticka , and π¦ this Bluesky thread has even more. Inspired to submit your own? Rank about ten proposals you'd like to see prioritized . The Firefox team says that's enough to provide useful input. Would You Let Your AI Agent Grade Its Own Homework? β Agents write code faster than ever. They even review their own work. But whoβs reviewing them? Dropbox, Notion & ElevenLabs donβt take the risk. With Meticulous, every change is exhaustively verified, with zero developer effort. Meticulous sponsor π³οΈ The State of HTML 2026 β The annual survey returns to measure the awareness and adoption of HTML features and browser APIs. This year covers Web Components, progressive enhancement, AI, and more. It takes less than 15 minutes and you can learn new things just by taking it. Devographics Safari Blocks 'Identity Resolution' Tracking Infrastructure β Cross-site cookies are long gone in Safari, so trackers moved to 'identity resolution' where third parties get the email address you type into forms and turn it into a cross-site, cross-device tracking ID. Safari now blocks them at the domain level. Wilander, Wolfe, and Finkel (WebKit) β‘οΈ IN BRIEF β οΈ If PHP runs anywhere behind your sites: PHP 8.5.12, 8.4.27, 8.3.36 and 8.2.35 fix two critical bugs that allow unauthenticated remote code execution. Update now, mod_php installs especially. π Chrome 157 is in beta with corner shorthands, a value for text-overflow , and anchor-valid . Chrome 156 went stable this week with CSS random() . π« Chrome has finished deprecating the unload event : handlers no longer fire by default, so use pagehide or visibilitychange instead. π Articles, Opinions & Tutorials JPEG XL vs AVIF for Web Use-Cases β Now that JPEG XL has landed in all major browsers, Jake took the format for a spin, benchmarking it against AVIF. There's a lot of detail here with some good takeaways. You might also be surprised at what you can cram in under 200 bytes with JPEG XL. Jake Archibald Embracing Playful Imperfection with CSS's random() Function β A look at how to approach adding some randomness into our projects, and whether it makes sense on the web. The demos here show off some ideas, like organic typography, bouncing letters, and splayed cards. Brecht De Ruyte Photorealistic 3D in the Browser Without the Rendering Overhead β Learn how radiance fields and spatial streaming bridge real-time photorealistic 3D to the web with just 2 lines of Three.js. Miris sponsor Fitting an Element's Height to Its Background Pattern with calc-size() β A repeating pattern cut off at the bottom is a classic annoyance. Ahmad uses calc-size() (Chromium only for now, Safari soon) with round() to snap an element's auto height to a multiple of the tile height. Ahmad Shadeed Core Web Vitals Now (Experimentally) Count Soft Navigations β Most sites wonβt notice, but navigation-heavy SPAs should see scores improve, with Search Console switching over when it goes stable next year. Annie Sullivan (Google) Using Math to Balance Your Heading Styles β Craig outlines a simple system for styling heading levels using a modular scale. Craig Abbott βΆ Do We Really Need alpha() ? β We now have three ways to lower the opacity of a color in CSS. Kevin has the details, highlighting what the alpha function brings to the table in particular. Kevin Powell WCAG 3: A Different Future for Accessibility β Why binary pass/fail made WCAG 2 a ceiling, and how WCAG 3 aims to make conformance a floor. LΓ©onie Watson (TetraLogical) Compression and Concatenation on the Web β A hands-on look at how gzip, brotli and zstd each cope with concatenation on the web. Phil Eaton Do Web Components Have a Future If Nobody is Writing Them? Nolan Lawson π§° Tools, Code & Resources π Chartist 2.0: This Lightweight SVG Charting Library Is Back β A freshly modernized SVG charting library that you style with CSS. It originally popped up in 2014, but "went stale" . It's back with a composable API, server-side rendering, and still remains small. There's a migration guide for existing users. Gion Kunz et al. A DevTools Extension for Debugging CSS Scroll-Triggered Animations β Adds a pane to Chrome DevTools that draws a scroll-triggered animation's activation and active ranges on a minimap, shows a live status light, and lets you edit the ranges in place. Chrome Web Store , or source here . Bramus Van Damme Mobile AI Infrastructure for Web Devs Who Code with Agents β Point the agent you use for the web at iOS and Android. Expo takes care of the native builds and the trip to the stores. Expo sponsor Pele: Mermaid Diagrams as Lightweight, Themeable SVG β A zero-dependency renderer for the Mermaid diagram syntax that outputs responsive SVG you can theme with CSS variables. It claims to be a sixth the size of Mermaid.js. You can try the playground here . Steph Ango (Obsidian) pour: A Free Accessibility Checker & WCAG Audit Tool β Available as a browser extension or bookmarklet. Run it on any page to see an overlay with violations categorized as critical, serious, moderate, minor, etc. David Yarham π€ Lighthouse for Claude Code: Turn PageSpeed Audits into a CLAUDE.md Fix Plan β Enter a URL and this tool will run a Google PageSpeed Insights and Lighthouse audit and generate instructions for Claude Code tailored to the audits. Baris Kocdur 3dsvg: The Easiest Way to Turn SVGs Into 3D β A web-based editor that takes an uploaded SVG, text, or drawing and renders the flat image as 3D. Exports in a 3D software compatible format such as GLB, STL, etc. Renato Costa π€ A font that annotates itself Furifont: A Japanese Font That Draws Its Own Furigana β Furigana, the small readings above kanji, usually mean using markup or JavaScript. Anthony's font does it with OpenType features alone! Repo here . Anthony Fu
Frontend FocusMulti Author Blogsread at source
The best way to use icons in Web UIs
π Frontend Focus #β762 β October 14, 2026 | Read on the web What the iPhone Duo Means for Web Development β The Duo is out next week, so Darius fired up the simulator to try the Device Posture and Viewport Segments APIs (both available behind a flag). Using Video.js components and CSS, he tried to recreate Netflix's folded-player UI, but Apple's fullscreen restrictions made things a tad interesting. Darius Cepulis (Video.js) The Best Way to Use Icons in Web UIs β Lea shows how to insert and tweak icons without touching any HTML, using --icon custom properties, @property , style queries, and mask . The result? A pure CSS icon system thatβs β more flexible and maintainable than what you've been using β. Lea Verou Become the TypeScript Expert on Your Team β Be the person your team trusts to review AI-generated TypeScript. Learn generics, conditional types, and discriminated unions in depth, then use that knowledge to catch subtle errors and steer AI toward cleaner types. Master.dev sponsor The 2027 Web Platform Feature Ranking Returns β Back for a second year, Firefox's ranker lets you sign in with GitHub, compare and rank the Interop 2027 proposals. Jake Archibald says last yearβs findings (taken from ~1,900 rankings) helped β prioritise a lot of work this yearβ , so it's worth having your say. Firefox β‘οΈ IN BRIEF π The results of the 2026 Stack Overflow Developer Survey are out. With over 30,000 responses, JavaScript came in as #1 language for the 12th year in a row. π¦ Mozilla now offers an Enterprise version of Firefox, focusing on things like compliance, regulatory requirements, security, and telemetry controls. π Starting February next year all new/renewed Let's Encrypt certificates will use a 64 day lifetime by default (down from 90). π§ Apple has shared a new page making their case for switching over from Chrome to Safari. π‘οΈ If you miss Arc, Crest is a new browser hoping to scratch a similar itch . It curiously offers both Chromium and WebKit rendering. π Articles, Opinions & Tutorials Lazy Loading Images and Media: How Far Ahead Browsers Fetch β Ben measures how far ahead Chrome, Firefox and Safari fetch lazy-loaded media. He also shares what we can lazy load (including video and audio in Chromium browsers), and covers where lazy , eager and fetchpriority fit. Ben Schwarz (Calibre) How Sindre Sorhus' Personal Site is Now Made in Swift β A prolific JavaScript developer explains why he dropped Astro and now builds his personal site, styling and markup included, with Apple's Swift language. Sindre Sorhus Agentic Mobile Development, from First Prompt to the App Store β Expo gives your coding agent the mobile infrastructure it is missing: native builds, store submits and live updates. Expo sponsor Recursion is DEAD and HTML Killed It β A fun, practical look at using Chromeβs new out-of-order HTML streaming (known as declarative partial updates ) to let the browser assemble nested comment threads for you. Chromium-only, but exciting. Dave Rupert πΌοΈ I Guess Iβm Using WebP Now β Itβs been 16 years since Google introduced the WebP image format, support is now widespread ( 97% ), and hey, maybe theyβre worth another look? Gavin Anderegg Scroll-Triggered Animation as the Missing Piece for Scrollytelling on the Web β A look at the CSS Animation Triggers spec, an Interop 2027 candidate, and how it kicks off an animation based on scroll position. Five demos show what it enables. Brecht De Ruyte Firefox 158 Enables JPEG XL by Default β Coming shortly after Chrome did the same, Firefox now supports JPEG XL by default, adding image/jxl to its image Accept header. Mozilla π In other browser news, Chrome 156 beta is out (stable next week) and adds support for CSS random() . Also, Safari Technology Preview 254 is out with both calc-size() and interpolate-size support. Fingerprints are the New Cookies β Several ways JavaScript and browser APIs can assign a unique identifier to you. Roy Fish How to Test an iframe 's postMessage Handler Keshav Malik π§° Tools, Code & Resources Bootstrap 6 Alpha β An early look at the popular framework's first major release since 2021. Modernization is the order of the day, with most Sass variables now CSS variables, ESM-only JS plugins, and it leans on more browser-native features. Mark Otto reseter.css 3.0: The Modern CSS Reset β v3 of this popular CSS reset is a major rework. Both the 'full' and 'mini' variants now ship wrapped in @layer reset for predictable overrides, use logical properties throughout, and are built with Lightning CSS. And all just ~1KB compressed. Krish Gupta Publish to Miris Straight from Adobe Substance 3D Painter β Stop sharing decimated 3D content. Stream your high-fidelity Adobe Substance 3D Painter assets via the Miris plugin. Miris sponsor ascii.rest: Animated ASCII Art for Web Pages β A collection of over 200 animated ASCII pieces, from lovely art pieces to more practical components like loaders, spinners, charts, shapes, etc. Shubham Kira Screen Ruler: Measure, Inspect, and Edit Web Pages β A popular Chromium extension for taking page measurements, CSS inspection, and live edits. Comes with an MCP server too. Myster Violets webvitals.fyi: Explore and Compare Every Performance Tool β Currently includes 29 tools, each given an opinionated rating, based on capabilities and role (e.g. frontend vs. performance engineer). Phil Gourley FontGlyph: Local-First Tool to Convert SVG & PNG Icons into a WOFF2 Icon Font cwittenberg Vite Plugin Registry: Discover and Compare Plugins for Vite, Rolldown, & Rollup VoidZero Lift HTML: A Tiny Library for Building HTML Web Components Yaroslav Lapin π° Classifieds Bring your wild ideas to Mozilla Festival . Gather and connect with other developers and creatives in Barcelona, Oct. 28-30. Get your badge . πΈ Add barcode scanning to your web app using STRICH , a lean JS SDK. Free 14-day trial, try the demo app today!
Frontend FocusMulti Author Blogsread at source
JPEG XL finally ships in Chrome
π Frontend Focus #β761 β October 7, 2026 | Read on the web How Fast is the Web? Exploring Billions of Real-User Measurements β A new free BigQuery dataset of anonymized real user Core Web Vitals from 10,000 large Cloudflare-fronted sites, updated daily and covering Safari/WebKit as well as Chrome. The post covers some of the initial findings, including how downloads are usually the smallest part of a slow LCP. Townsend & Jansma (Cloudflare) Would You Let Your AI Agent Grade Its Own Homework? β Agents write code faster than ever. They even review their own work. But whoβs reviewing them? Dropbox, Notion & ElevenLabs donβt take the risk. With Meticulous, every change is exhaustively verified, with zero developer effort. Meticulous sponsor Shipping JPEG XL in Chrome β Chrome 155, released yesterday , introduced support for JPEG XL ( .jxl ) images. They can offer 30-50% better compression than JPEG, HDR support, and more. Versari, Firsching, JΓ€genstedt (Chrome for Developers) πΊ If you're catching up on Chrome, βΆοΈ this video from Matthias Rohmer runs through DevTools changes across versions 151 to 153. The State of HTML 2026 Survey is Open β Devographicsβ annual look at how we use HTML, forms, web components and browser APIs is back, and should take 10-15 minutes. Browser vendors use the results to prioritize their roadmaps, so your answers help decide what ships next. Devographics β‘οΈ IN BRIEF π The site on reserved domain example.com has just been redesigned , including a new JavaScript file to serve multi-language content (and here's why ). π Rachel Andrew rounds up whatβs new to the web platform in September , a bumper month for Baseline with progress() , alpha() and revert-rule all now Newly available. βΏοΈ WebAIM's eleventh Screen Reader User Survey is out: 1,780 responses, JAWS back ahead of NVDA, and 68% saying web accessibility has stagnated or worsened in the past year. βοΈ SVG 2 has moved closer to becoming a formal W3C Recommendation , with an updated Candidate Recommendation focused on cross-browser consistency. π Articles, Opinions & Tutorials βοΈ Airline Sites are Slow, but They Donβt Have to Be β Some interesting analysis of the performance of over 100 different airline websites using real-user metrics. A massive ~95% fail the Core Web Vitals test on mobile. Ben Schwarz CSS Does Your Tooltip Positioning Now β Matt takes a look at CSS Anchor Positioning, namely anchor-name and position-anchor , and how to use them to build tooltips and dropdowns that hold their position through window resizes and page scrolls. Matt Smith π Meanwhile, Patrick Brosset digs into why title tooltips are so underused and floats the Edge teamβs proposed stylable ::tooltip . Your Agent Can Write a Mobile App. Expo Gets It onto Real Phones β Expo is mobile AI infrastructure: your agents build, test and ship iOS and Android apps, and you approve what goes out. Expo sponsor Why Donβt More Developers 'Use the Platform'? β Nolan, a big Web platform advocate, casts a thoughtful look at the common alternative, exploring why we often rebuild things platforms already give us in JavaScript and CSS. Nolan Lawson The Road to Dart Sass 2 β Sass may not be the default choice it once was, but the project keeps moving. Dart Sass 2.0 is now slated for release in December. Itβll turn most of 1.x's deprecation warnings into hard errors. Natalie Weizenbaum A Sustainable Web Career for When All This Blows Over β Itβs fair to say the industry is in a state of flux, and David offers a strongly opinionated take on the skills worth investing in, and the technologies and trends worth rejecting. David Bushell Understanding Bidirectional Text: A Guide for Developers Mojtaba Seyedi Implementing children-count() in Modern CSS Temani Afif How Do Passkeys Work? Andrew Lombardi π§° Tools, Code & Resources Panda CSS 2.0 β A major release of a popular CSS-in-JS library. 2.0 keeps the same css() API but gets a much faster compiler ( rebuilt in Rust ). Other new additions include publishable design systems, view-transition styling, an ESLint plugin, and a new typography preset. Adebayo, Adebesin, Adebayo (Panda CSS) Shaders: 190+ WebGPU Effect Components, Now Open Source β The rendering engine, framework bindings, and shader components from this WebGPU effects library are now MIT licensed. It's a visually striking collection of components for React, Vue, Svelte, Solid, and plain JS. Simon Le Marchant Build Forms That Look Native in Your Frontend β Customize SurveyJS built-in themes or use adapters for Bootstrap, MUI, and shadcn/ui. Self-hosted, backend-agnostic, JSON-driven. SurveyJS sponsor πΊ Video.js 10: Five Players Rebuilt as One β Sixteen years after helping move video off Flash, Video.js has been rebuilt from scratch, bringing in the teams behind Plyr, Vidstack, Media Chrome, and Mux Player. You get React and web components, a 60% smaller bundle, and skins you can make your own. Steve Heffernan CSS Doodle: A Web Component for Drawing Patterns with CSS β A way to use CSS as a language for drawing patterns, backgrounds, icons, and generative decorations. The site is packed with examples . Released this week, v0.55 adds numerous new tiling types. Yuan Chuan pure-web-bottom-sheet: A Bottom Sheet Built on CSS Scroll Snap β A performant, lightweight, and accessible bottom sheet web component powered by CSS scroll snap and CSS scroll-driven animations. Plenty of examples here . Vili Ketonen π° Classifieds πΈ Add barcode scanning to your web app using STRICH , a lean JS SDK. Free 14-day trial, try the demo app today! Donβt just codeβgrow as a technologist - Explore new technology, sharpen your existing skills and build new ones when you work in tech at Fidelity. π¨ One for fans of gradients Gradient Visualizer: Debug Multi-Layer CSS Gradients β Paste a background value made up of gradients and Ahmad's new tool pulls each layer apart so you can inspect it alone, view the stack in 3D, replay it as a timelapse, edit it and get fresh code back. Ahmad Shadeed
Frontend FocusMulti Author Blogsread at source
Why GitHub now ships more CSS, not less
π Frontend Focus #β760 β September 30, 2026 | Read on the web Improving Site Performance by Shipping More CSS β GitHub details how it spent three years purging styled-components and 'CSS-in-JS' from githubβ€com in favor of CSS Modules. The result? Shipping more CSS, but GitHub reports 55% less time to server-side render a page. Josh Black and Marie Lucca (GitHub) π‘ CSS Modules isn't a browser feature or standard, but a widely supported bundler convention where classes in a .module.css file get rewritten to unique names, scoping styles per file with no runtime cost. Reports That Time Out Aren't a Frontend Bug β The report worked in testing. In production, it scans months of rows and times out before it renders. That's not a frontend bug, it's the query behind it. TimescaleDB extends Postgres so that query returns fast at scale. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor EmDash 1.0: An Open Source CMS for Astro β Cloudflare's alternative to WordPress, first announced in April, has reached 1.0. Each site ships with an MCP server, meaning you can set an agent to work out of the box. To accompany the launch, plugins can now be submitted to its registry . Matt Kane How Anthropic Made Claude's Web App Faster β The tale of how a recent sprint (with Claude doing much of the work) cut Claude's time-to-typeable at the 75th percentile from 3.1s to 0.55s, from tracking layout shifts too small for CLS to flag, to a :root:has() selector costing 24ms per DOM change, and a jump caused by Chrome pre-rendering the page at the wrong height. Wang, Attard, and G (Anthropic) β‘οΈ IN BRIEF π Cloudflare has launched Turnstile Spin , a way to let AI agents set up Turnstile's protection on sites you're building. Cloudflare now also has a new cf CLI client which can work with all of its APIs (unlike Wrangler). π§ Safari Technology Preview 253 is out now , adding support for network throttling within the Web Inspector, amongst a huge number of fixes. π¦ Firefox 157 has a new look , which you can see in action here . π In response to recent chatter around the 'death' of web education , Andy Bell shares a bleak sketch of where things stand. π’ Version 31 of developer browser Polypane is out now , adding a new canvas layout, elements panel improvements, and an update to Chromium 155. π₯ Got something you want to say about HTML? Manuel MatuzoviΔ is seeking submissions for this year's HTMHell Advent Calendar . π Articles, Opinions & Tutorials Detect When Elements Overlap with CSS β A neat bit of CSS lateral thinking to detect when two elements get too close or overlap, no JavaScript needed. It combines anchor positioning, style container queries, and scroll-driven animations, using an overflowing 'measure' element as the trigger. Ahmad Shadeed Connection Allowlists: Lock Down Where a Page Can Connect β Chrome 152 adds support for a Connection-Allowlist header to tell the browser which servers a page is allowed to talk to (and block everything else). Benz & Zapata (Chrome for Developers) The Future of Frontend Is Agentic: Free OpenAI Course β Join OpenAI's Katia Gil Guzman and learn how to direct Codex through landing pages, dashboards, 3D interfaces, and shipping into an existing codebase. Master.dev sponsor Which Features Should Browsers Fix Together in 2027? β Ollie shares what features he believes the web platform should focus on next year, including the Sanitizer API , focusgroup , and grid-lanes , along with what early-stage things should be in consideration for the future. Ollie Williams Extracting Grid Information Using CSS β A neat CSS-only proof of concept technique where you can get information about a grid structure (number of columns/rows, where items sit on the grid, etc). The technique relies on scroll-driven animations, oddly enough. Temani Afif The Interface Cheat Sheet β A helpful illustrated list of good UI advice, touching on points from border radiuses and transitions to the use of color, scaling and accessibility. Jakub Krehel The Era of Agentic Mobile Development Is Built on Expo β Build with our CLI and dev tools. Test on our cloud simulators. And ship with the best CI/CD for mobile development. Expo sponsor Custom Attributes Polyfill β A polyfill for the proposed Custom Attributes spec, letting you attach reusable behaviours to any element via custom attributes with their own lifecycle hooks. Keith Cirkel Fluid Typography β Donnie argues that because container widths are unpredictable, using container queries to drive fluid font sizing isn't the right choice. He suggests we stick with viewport units to retain true control. Donnie DβAmato Stop Buttons Triggering Zoom When Theyβre Double Tapped Andy Bell Stop Treating CSS Container Queries Like Traditional Media Queries Victor Ayomipo Component Testing: A Practical Guide for Frontend Developers Storybook Blog π§° Tools, Code & Resources Transitions.dev: Essential UI Transitions for Web Apps β The home page shows a series of cards, each of which displays a CSS-based UI animation. You can also install the set as an agent skill for your AI coding tool. Some of the transitions are part of a "Pro" plan. Source code . Jakub Antalik Markuplint 5.0: An HTML Linter for All Markup Developers β This well-established linter recently hit version 5. The repo is here , and you can see things in action in the playground . Yusuke Hirao Make Your Logo Brighter Than White β If you've got an HDR display, this browser-based tool will quickly make its trick clear. Drop in your logo, choose which colors should glow, and get an HDR version ready to download. Claims to make things up to 7.5x brighter in Chrome and Safari. Chris Bennett π soundcn: A Curated Collection of Sound Effects for Modern Web Apps β A comprehensive set of 800+ sounds that's installable via the shadcn registry. You can browse them by category and test each one by hovering over its card. Pay attention to the licenses of sounds you use. GitHub repo . Kapish Dima π° Classifieds Balance build time with your time - Our technologists do meaningful work, and we give them the support to have a meaningful life, too. π¨ Our weekly JavaScript newsletter shares cool projects, news, and articles with over 150,000 developers. π ...and finally Here's a kinda crude font foundry that takes two web fonts and mixes their glyphs, with unsettling results. I mean, why not make a Times New Roman/Comic Sans hybrid to catch folks off guard? And, yes, you can download the end result.