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.
Frontend FocusMulti Author Blogsread at source
12 CSS features that can retire your dependencies
🚀 Frontend Focus #759 — September 23, 2026 | Read on the web 🧭 WebKit Features for Safari 27.0 — An epic set of release notes covers Safari 27's enhancements, including its new MCP server (let agents debug your work), scroll anchoring , the customizable element, a controls attribute for images in visionOS, sizes="auto" for images, and more. WebKit 💡 In related news, Xcode 27.1 Beta includes an iPhone Duo simulator if you want to see how things look on Apple's forthcoming foldable. Skeleton Loaders Are Just Slow Queries in Disguise — You add a skeleton loader to hide the wait. But that wait is a slow query, and it only grows with your data. TimescaleDB extends Postgres so the data behind your components returns fast at scale, no matter how big it gets. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor 12 CSS Features You Can Use Today with No Build Step — Highlights various CSS features that we can turn to now , retiring some toolchain dependencies in turn. Things like native nesting instead of Sass, :has() instead of wrapper-class hacks, and more. Flavio Copes Blurry Before Beautiful: Image Previews for the Web? — Having a 'blurry' version of an image load in before the full version isn't new, but the Edge team is proposing a previewsrc attribute so browsers can handle it natively. Patrick Brosset (Microsoft) ⚡️ IN BRIEF 🛠️ Chrome's latest DevTools update brings DevTools MCP server improvements, ad script tracking, more modern devices in Device Mode, and more. 🌏 A recent Edge update adds the OpaqueRange API for text-range UIs, component accessibility improvements, and the agent-ready WebMCP API. ☑️ Chrome 155 beta adds support for the CSS symbols() function, margin-trim , JPEG XL images, and more. 📙 Articles, Opinions & Tutorials The Root Scroller and How Not to Lose It — The ‘root scroller’ is the viewport’s scroll container and handles things like scroll restoration and collapsing mobile address bars. But common CSS patterns can hand scrolling to other elements and lose those features, as shown in this demo-packed explainer. Kilian Valkhof "AI, Make the Website Good" — Zach argues that, no matter the tools, caring about the quality of output matters more than ever. He amusingly illustrates this point by highlighting the front of house output of top AI companies. Zach Leatherman 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 19½ Things You Didn't Know About Accessibility in HTML and CSS — A neat slide-driven writeup of a StripeCon Europe talk rounds up lesser-known accessibility details. Manuel Matuzovic 'CSS Scroll-Triggered Animations Are Here, And I Completely Missed Them' — Scroll- triggered animations shipped in Chrome back in February. Cyd catches us up on how they differ from regular and scroll-driven animations, and looks at the timeline-trigger and animation-trigger properties specifically. Cyd Stumpel Responsive iframes in Chrome 154 — Landed in Chrome, and in preview in Edge, responsively-sized iframes are now a thing. You can set an iframe to be the size of its content, set which dimension that size is derived from, and tweak dynamically. The only catch is the embedded document must opt in. Sebastian Benz & Bramus van Damme A Decent Custom Checkbox Pattern for Until ::checkmark is Ready — Until ::checkmark reaches checkboxes, Andy lays a transparent native input over a custom box with an SVG tick. Andy Bell We Found a Fix for 'Wobbly Spinners' in Safari — CSS’s round() function came to the rescue here. Cody Olsen The Death of Web Development Education: Rescuing a Field From Disappearing Mathias Schäfer 🧰 Tools, Code & Resources Critical 9.0: Extract and Inline Critical Path CSS in HTML — A total rewrite of the popular critical CSS inliner, used to improve first render and LCP. Version 9 picks between two engines: a fast, browser-free one for prerendered HTML and a Playwright-based one for SPAs. Plus MCP support. Addy Osmani and Ben Zörb 📊 Plotly.js 4: A Major Update for the Popular Charting Library — It adds ‘quiver’ plots for drawing vector fields (with many fantastic examples in the post), accepts any CSS Color 4 color string, and removes the use of Mapbox GL in favor of MapLibre. Chris Parmer Build Forms That Fit Your Frontend—and Any Backend — Create custom themes for your form UI or use style adapters for Bootstrap, MUI, and Shadcn/UI. Dedicated npm packages for React, Angular, and Vue. SurveyJS sponsor Semfont: A Font That Reads What You Wrote — A small library that auto-styles text word-by-word, scoring each word (by sentiment, salience, and more) and then applying color, weight, and slant. Repo here . Rohan Adwankar Slidev: Presentation Slides for Developers — Uses a Vue-based tech stack, providing a developer-focused set of tools for creating Markdown-based slides for tech talks. Anthony Fu 🧪 ...and finally The Periodic Table of HTML Elements — Contains all 115 elements of the current HTML Living Standard. A modernization of Josh Duck’s version included in Brad Frost’s Atomic Design book. Alena Batitskaia
Frontend FocusMulti Author Blogsread at source
When CSS could run JavaScript
🚀 Frontend Focus #758 — September 16, 2026 | Read on the web CSS Curiosities of the Past — A wonderful tour of the non-standard CSS quirks developers used to make browsers behave, especially Internet Explorer . Covers the 'star hack', CSS expressions (JavaScript in your CSS!), IE's DirectX filters, the famous box model hack , and more. Declan Chidlow Your Users Filter Faster Than Your Queries Can Run — Zoom the chart, change the range, and the whole query reruns from scratch. TimescaleDB extends Postgres so those aggregations return instantly. Continuous aggregates pre-compute rollups so dashboards stay fast at scale. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor ✅ The Front-End Checklist — We've shared this before, but it's kept improving and now has almost 400 frontend quality rules covering accessibility, performance, security, SEO, and more. You can also now connect it to Claude, Cursor, and other AI tools over MCP so they review against the same standards. David Dias ⚡️ IN BRIEF 🧭 Safari 27 has shipped (alongside iOS, iPadOS, and macOS 27), bringing customizable elements, sizes="auto" on images, the :heading pseudo-class, alpha() , multi-color color-mix() , and more. 🤖 Apple has also shared details on how you can hook up an AI agent to Safari , as of Safari 27, for testing, debugging, etc. 🌐 Chrome 153 is out, adding single-axis scroll containers (in non-stable channels only) and the and elements. Chrome 154 is now in beta , too. 🤔 Last week, Automattic's board forced CEO Matt Mullenweg into a leave of absence , before Mullenweg declared that he was " back in control ". ✳️ We often share links to the helpful articles on CSS-Tricks , but it's gone quiet recently. Editor Geoff Graham sheds some light on why . 📙 Articles, Opinions & Tutorials Better Icon and Label Alignment — When text is just one line, an accompanying icon is nicely vertically centered, but when the text has multiple lines, the icon is still 'centered' but can look oddly misplaced… Ahmad explores a fix using CSS's lh unit. Ahmad Shadeed The Case Against JPEG XL (in the Browser) — With JPEG XL decoding making its way into Chrome and Firefox, an AV1 encoder developer who once backed the format argues it offers little advantage over AVIF for the web. Gianni Rosato How Sentry Application Metrics Caught a Broken AI-Written Estimator — Real files came out up to 83% bigger than predicted. Read how a few browser metrics surfaced it. Sentry sponsor WebKit Supports interactive-widget (and Hopefully Safari Will Too?) — WebKit recently gained support for interactive-widget , the viewport directive that controls how a page resizes when the virtual keyboard appears. Bramus built WebKit locally to test it and recaps the three modes with side-by-side visuals. Bramus Van Damme Sidenotes with CSS Anchor Positioning — A walkthrough of building Tufte-style sidenotes (margin notes instead of footnotes - as above ) with anchor positioning. It's JavaScript-free, multi-block, and degrades gracefully on narrow viewports and older browsers. Vincent Bernat WCAG 3: The Road to Hell is Paved with Supplemental Requirements — Accessibility expert Eric critiques the latest WCAG 3 draft's optional “Supplemental Requirements” and “Assertions,” arguing they'll see little uptake and proposing named, adoptable modules instead. Eric Eggert Animating CSS border-image — How to animate border styles (using an image or gradient) to create some interesting user interface effects. Preethi Sam A Deep Dive into StyleX — Here's a hands-on tour of Meta’s StyleX , a library which turns JavaScript style objects into plain atomic CSS at build time. Flavio also looks at why it can be a good fit for coding agents in particular. Flavio Copes Screen Readers Seem to Largely Ignore the headers Attribute on Table Cells Adrian Roselli Google and OpenAI Want Your Site to Talk to Agents Rachel Nabors ▶ WebMCP Is Here and You Should Care Syntax 🧰 Tools, Code & Resources Neat Annotations: Elegant Hand-Drawn Annotations with CSS — A lovely way to add some flourish to your content - think hand-drawn arrows and labels, all in CSS. Scroll down on the demo page to get the idea, or see the repo . Maxim Syabro rich-input >: A Rich Input Field — Acts like a regular input type="text" > but adds contextual keyword-based autocompletion and highlighting powered by datalist >, OpaqueRange and the CSS Custom Highlight APIs. Bramus Van Damme Your Agents Have Been Coding Blindfolded. Simulators Give Them Sight — Cloud Simulators give your agents the ability to see the mobile apps you are building. Join the waitlist . Cloud Simulator sponsor SnapDOM 3.0: Turn DOM Elements Into Images — A no-dependency html2canvas alternative with support for web fonts, pseudo-elements and Shadow DOM. v3.0 adds ‘incremental recapture’ for faster repeat captures, automatic web font embedding, and fromString() for turning raw HTML markup into images. Zumerlab ds.css: A Nintendo DS-Inspired CSS Framework — I also run a Nintendo newsletter , so this is like catnip to me. The DS was Nintendo's foldable, touchscreen handheld released in 2004. This framework attempts to recreate its pixelated charm. See a demo here . Perfect for a homepage! spiritov EaseMotion CSS: A Zero-Dependency, Animation-First CSS Framework — Includes animated buttons, cards, layout styles, and a full motion library with 20+ animations. The styles are easy to implement via human-readable class names and there's an integration layer for React. Try it here . Saptarshi Sadhu UI Skills: A Collection of Design-Engineering Skills to Help Humans and Agents Create Better Interfaces Interface Office 📰 Classifieds 📄 No more regex hacks for PDF data. Foxit's Extraction API reads tables, fields, and layout, then returns clean JSON. ⚡️ Add lightning-fast 1D/2D barcode scanning to your web app with STRICH , a lean JS SDK. Simple, predictable pricing. Free trial and demo! 😡 ...and finally Page Rage: Take Out Your Stress on a Web Page — Ever get a bit flustered when building a site? Work out some of that stress by destroying several pre-made pages here, or install the browser extension to smash up any web page to your heart’s content. Alex Reardon
Frontend FocusMulti Author Blogsread at source
What's new in HTML for 2026
🚀 Frontend Focus #757 — September 9, 2026 | Read on the web New Things You Should Know About HTML in 2026 — HTML moves a bit slower than CSS and JavaScript, but there's plenty of new features to keep up with. Chris runs through several, including the geolocation element, HTML-in-Canvas, camera and mic management via usermedia , and the model element. A great way to catch up. Chris Coyier The Best Dark Mode Toggle is Probably… None — We recently shared some thoughts from Lea on controls for switching between light/dark modes. After weeks of debate, including a rebuttal from Bramus , she returns to ask whether most sites need an always-visible toggle at all . Lea Verou Free Course: Build Ambitious Modern Interfaces Faster with OpenAI Codex — Join Katia Gil Guzman for this free Codex course and learn how agentic coding has changed frontend development. You'll cover setup, prompting, feedback, skills, automations, deployment and more. Master.dev sponsor Antiquated HTML Snippets and Artefacts — A tour of various snippets of code that commonly appear in HTML, but which are largely byproducts of a bygone era and are no longer needed. Conditional comments, X-UA-Compatible , and cleartype directives all make an appearance. Declan Chidlow 🗳️ W3C Opens Its 2026 Community Survey — The W3C has launched its 2026 community-wide survey to gather input from developers and stakeholders on the future direction of its operations and web standards work. W3C ⚡️ IN BRIEF 🎉 The team behind Tailwind CSS is joining Shopify but "nothing changes with Tailwind CSS or any of our other open-source projects." 📑 Interop 2027 proposals are open until September 23 — you can nominate the cross-browser gaps that most need fixing. 🗓️ As promised, Chrome has now moved to a two-week release cycle , with Firefox, Edge and Brave following suit. 🖼️ JPEG XL support will be enabled by default in Firefox 158 . 🕵️ Years ago, a developer noticed Chrome exempted Google's own sites from the setting that wipes site data on exit (Google fixed it). Now, he claims it's happening again as of Chrome 152 . 🏛️ InfoQ reflects on jQuery 1.0 turning 20 years old and why it remains heavily used across the Web. 📙 Articles, Opinions & Tutorials Creating a Custom Scrollbar Component in 2026 — How to approach building high-performance custom scrollbars, replacing heavy JavaScript arithmetic with modern CSS features and handling sizing and visibility entirely within the stylesheet. A clean, modern approach to a classic UI challenge. Alexander Inkin The Browser's Main Thread is Expensive — A thorough look, complete with demos, at spending your main thread time well, including splitting, batching, prioritizing, and deferring tasks, then how to get work off it entirely. Sunhyoup Lee The Loading State Isn't the Frontend's Fault — It's the query behind it. TimescaleDB extends Postgres so it returns fast as data grows. Get $1000 credit to start . Tiger Data (creators of TimescaleDB) sponsor Wiring Up Components with Typed attr() and Container Style Queries — Shows how to feed HTML attributes into CSS properties (like grid column counts or spacing units), then let style queries pass that state down to child components with no JavaScript state or utility classes required. Brecht De Ruyte CSS: The Weapon Inside Your Inbox — How CSS can be weaponized against popular webmail providers to do things it shouldn't be able to, like defacing the UI, bypassing image proxies, and building a keylogger. Gareth Heyes Testing Cookie Behavior Across Hundreds of Web Surfaces with an In-House Auditor — An interesting ‘big corp’ case study looking at tooling built to audit cookie behavior at scale across various web properties. Yasmin McDowell and Lawrence Good (Dropbox) .name Termination — Discusses the impending sunset of .name 's third-level domains and the implications for those using it for their online identity. Neil Fraser Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL Filip Kantedal (Codrops) 🦖 How the Chrome Dino Game Works: A Tour of Chromium's Source Alex Oliinyk Animating CSS Grid Layouts with CSS Anchor Positioning Bramus van Damme 🧰 Tools, Code & Resources Drawably: Hand-Drawn UI Controls — A collection of neat hand-drawn UI controls. The animated pen sketches even get drawn via seeded randomness. Zero dependencies, ~7 KB of JS gzipped and a 3 KB stylesheet. Repo here . Daniel White vgpu: Render WebGPU Shaders in the Browser or Node.js — Provides a way to use the same shader in the browser or render headlessly with Node (to a high-resolution PNG or MP4 video). WGSL modules import and export like TypeScript does. Vercel Sentry Says It Crashed. Datadog Says It's Slow. Expo Tells You Why — Expo Observe knows your release pipeline, so it ties a startup regression to the exact build or update that caused it. Expo sponsor WCAG Radar: Run Accessibility Checks on Pages You Have Open — A bookmarklet and browser extension that runs WCAG 2.1 and 2.2 AA checks against the page you’re on and marks up the results in place, all running locally. Note: 28 of the checks are free, but you get 18 additional checks with a paid upgrade. Proper Access B.V. Roux: A Boilerplate of Pre-Defined Native CSS Styling — This HTML/CSS starter provides a foundation of CSS files, variables, base styles, and HTML components. You can see it in action on the docs page . thoughtbot The Fixi Project: A Collection of Small Web Libraries by the Creators of htmx — All five libraries – each one a standalone script – are designed to be lightweight versions of their more popular offerings like htmx, Hyperscript, Idiomorph, etc. Source code . Big Sky Software 📰 Classifieds 📸 Scan barcodes, QR codes and others directly in the browser using STRICH , a lean JS SDK. Free 14-day trial, try the demo app today! 🔎 A Minimal Browser for macOS Confectionery: A Browser for Taking Cleaner Screenshots — A Mac-only browser with a stripped-back UI ideal for taking tidy screenshots with minimal browser clutter. Only a 2.9MB download too. Vadim Demedes