💌 A once–weekly roundup of the best #frontend news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us
Frontend Focus 🚀
@frontendfocus.bsky.social
HTML, CSS, web platform, and browser tech news + demos, tricks, and tips (via the Frontend Focus newsletter) 👋 Curated by Chris Brandrick.
Interop 2027 prep is now. Want to help? 1. Go to developer-signals.rviscomi.workers.dev 2. Sign-in using GitHub 3. Find features you need 4. Click the comment icon, add your use case 5. Submit There aren't many ways to tell browsers what you need and why you need them. That's a very effective one.
Hover Proximity Using Modern CSS You can always easily style :hover, but what if you want the NEXT item to have styling too? Or, just a smidge harder, the PREVIOUS item. How about multiple in any direction?
Hover Proximity Using Modern CSS
You can always easily style :hover, but what if you want the NEXT item to have styling too? Or, just a smidge harder, the PREVIOUS item. How about multiple in any direction?
blog.master.dev
We've given our online CSS selector specificity calculator some nice upgrades! - Improved resolution of function nested specificity - Highlighting parts while you type (using OpagueRange + Highlight API) - Explore your selector by hovering over each part Check it out: polypane.app/css-specific...
✍️ New Article: Balancing flex items with flex-wrap: balance I explored flex-wrap: balance and flex-line-count and really enjoyed using them. I even made a masonry layout by mixing flex-line-count, round, clamp, and container queries units! 😀 ishadeed.com/article/flex...
Balancing flex items with flex-wrap: balance
A look at how flex items wrap and how to balance them across lines.
ishadeed.com
When you scroll a 2D scroller on the web, the browser may ignore some minor scroll deltas in the non-main scrolling axis when the user’s intent was to scroll only one axis. Sometimes this “railing” gets in the way … and with `scroll-axis-lock: none`, you can soon remove it 😊 brm.us/scroll-axis-...
My talk on pragmatic browser support at the @pixelpioneers.co conference is now live www.youtube.com/watch?v=uOtx... I talk about Baseline, polyfills, progressive enhancement, and cover a bunch of interesting web platform features along the way.
A Pragmatic Guide to Browser Support - Rachel Andrew - Pixel Pioneers 2026
YouTube video by Pixel Pioneers
youtube.com
📝 New CSS Article! You know the <img> element, right? It's one of the most-used elements, and yet it hides a secret. 🤫 What kind of secret? Read my latest article to know about it (You will be surprised!) master.dev/blog/somethi...
Something Nobody Told You About The Image Element (It Can Overflow!)
You normally don't think of images as overflowing themselves, nor can you put anything else inside to make it overflow, but actually...
master.dev
🔥 New blog post: In defense of polyfills A highly influential spec editor expressed the opinion that polyfilling is harmful. I beg to differ. lea.verou.me/blog/2026/po...
In defense of polyfills • Lea Verou
An influential spec editor thinks polyfilling is harmful. I think blaming polyfills for compat accidents is like blaming car crashes on the ambulances that show up — and the alternative is a stagnant ...
lea.verou.me
What's new in Edge for web developers: our new series to learn about the newest features in Edge (and Chromium), experiments you can test now, and highlights from the broader ecosystem. In this issue: CSS gap decorations, focusgroup, PWA migration, and more! ➡️ blogs.windows.com/msedgedev/20...
New in Edge for developers – Style layout gaps, improve keyboard accessibility and migrate your PWA to a new origin
Welcome to New in Edge for developers, a new series featuring recent web platform updates in Microsoft Edge that help web developers build better sites and apps. In this first edition, we'll look at ...
blogs.windows.com
📝 New CSS Article! I wrote about border-shape. A super powerful feature! You might think I'm exaggerating but I am not. css-tricks.com/get-ready-fo... This is just a tiny overview of its potential. Stay tuned for more articles/demos that will blow your mind (I am still not exaggerating!)
Get Ready For the Powerful CSS border-shape Property!
We recently got the shape() function and corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property!
css-tricks.com
Just published a blog post about the new CSS Anchor Positioning API! ⚓ I’ve been learning about it over the past few weeks, and it’s friggin’ great, but it also took me a minute to really get the hang of it. My goal in this post is to share the most useful bits, so you can start using it today. 🔥
Getting Started with Anchor Positioning • Josh W. Comeau
For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a...
joshwcomeau.com
This was a really fun article to write/experiment to do! I messed with how things were rendering across browsers for... far too long. AI could never! cassidoo.co/post/radial-...
An animated radial gradient mask over text in CSS
Here's a technical walkthrough of how I made a fun little demo to mask some text in a clever way with CSS.
cassidoo.co
There's an ideal set of sizing constraints for custom <select>, but the CSS is a bit tricky. Here's how to make it work, and a tour of new CSS features along the way. jakearchibald.com/2026/goldilo...
The Goldilocks customizable select height
The 'ideal' sizing is more complicated than you think…
jakearchibald.com
🤘new post🤘 Modes and Themes That Stick - Building a Persistent Toggle Solution I walk us through a three-layer, progressively enhanced, approach to mode and theme switching. https://www.alwaystwisted.com/articles/modes-and-themes-that-stick-building-a-persistent-toggle-solution 🙏🖤
Modes and Themes That Stick - Building a Persistent Toggle Solution
Build a theme toggle that persists user choices, respects system preferences, and works without JavaScript. A layered approach to handling mode and theme selection across sessions.
alwaystwisted.com
I spent the last month obsessed with finding colors that can't be displayed on a conventional screen. This is what I found. moultano.wordpress.com/2026/06/19/w...
Where to Find the Colors Your Screen Can’t Show You
An atlas of the vibrance of the real world
moultano.wordpress.com
Reminder: The State of CSS Survey is closing *SOON*, so **NOW** is the moment to complete it. stateofcss.com/en-US/ This survey directly influences efforts like Interop and feature planning, so this is **YOUR** moment to let browser vendors know what you find missing on the web!
Quick SVG survey 🗳️ What are your pain points with SVG? What features are missing? What bugs matter the most?
Using Scroll-Driven Animations for Opposing Scroll Directions by @silvestar.codes css-tricks.com/scroll-drive...
The Chrome DevTools team are doing a "papercuts" sprint where they try to address lots of small, irritating bugs and annoyances. Reply with crbug.com links (no bug, no fix—that's the deal!) and will see what we can do. No promises though as some may be features/too big/unclear how to solve.
Chromium
crbug.com
Storied Colors is a catalogue of 250 named colors, from pigments, chemical formulas and dyes to a few digital hues, each tied to documented evidence for its name and history. You can browse all the colors, or simply check the color of the day. storiedcolors.com/
Does anyone have any experience taking the website remnants from the Wayback Machine and rebuilding that website? As a kind of preservation/memorial?
This excellent post from @vale.rocks takes a deep dive into the web browsers found within various game consoles.
Web Browsers on Video Game Consoles
A comprehensive history of web browsers on video game consoles. From the CD-i to modern systems, exploring the evolution of the web on consoles in detail. Covering bespoke iterations, releases by PlanetWeb and NetFront, contemporary engines across Sega, PlayStation, Nintendo, and Xbox platforms, and other details.
vale.rocks
Cross-document view transitions bring app-like page transitions to any classic website, one CSS rule, no JavaScript. www.rotecodefraktion.de/en/blog/css-... #CSS #Frontend #HTML #WebDevelopment
CSS Can Now Animate Between Pages: View Transitions Without JavaScript
Cross-document view transitions bring app-like navigation to classic multi-page sites — with a single CSS at-rule and no framework at all.
rotecodefraktion.de
Just realized that one of my favorite easter eggs I made while at Stripe is still on the /jobs page… The monitor in the photo mimics everything you do on the page itself. 🥚💅 (only visible on Firefox because it uses an experimental feature)
And learn more watching Learn CSS Grid Lanes at #WWDC26! youtu.be/NDwoB2PpwgY #css #gridlanes #cssday #thewebyouwant
WWDC26: Learn CSS Grid Lanes | Apple
YouTube video by Apple Developer
youtu.be
Interested in CSS Grid Lanes? We just launched the Field Guide to Grid Lanes! gridlanes.webkit.org It’s got everything you need in a fun interactive playground + tons of demos. (And read about the Field Guide at: webkit.org/blog/18098/i...) #CSSDay #wwdc26 #CSS
The Field Guide to CSS Grid Lanes
Learn Grid Lanes to create masonry layouts in pure CSS. Absorb the possibilities with the Field Guide’s interactive playground. Return to the cheat sheet. Get inspired by six real examples with dozens...
gridlanes.webkit.org