Frontend Focus 🚀

💌 A once–weekly roundup of the best #frontend news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us

Did you know the State of HTML 2026 survey is currently open? Go take it and brush up on new (and old) browser APIs! survey.devographics.com/en-US/survey...

JPEG XL vs AVIF for web use-cases. Jake Archibald benchmarked both: AVIF produces smaller lossy files for photos, screenshots, and transparency, while JPEG XL wins at lossless. His default is AVIF 4:4:4 at high effort. #image #performance jakearchibald.com/20...

More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value. curve, wave, zig-zag, arc ... Which one do you prefer? css-tip.com/shaped-range... 0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!)

"Scroll-triggered animations: Variable Font: expand, shrink, squoosh" by utilitybend codepen.io/editor/utili...

Have you been making websites for years? How are you feeling about the current state of things?

Yesterday, the CSSWG accepted my proposal for mesh gradients and diffusion curve gradients! Want to make gradients like this natively in CSS? Well, we've started the work on it. It's coming! Here's the Explainer: github.com/w3c/csswg-dr...

Need sortable tables? My table-sortable web component adds accessible, customizable sorting to ordinary HTML tables—and they still work when JavaScript doesn’t. www.aaron-gustafson.com/notebook/sor...

A candidate for Interop 2027: Scroll-Triggered Animations, the missing key to scrollytelling in CSS. I wanted to create demos showing how to wire them up and easily create fun effects (especially with typography). To be complete, I also added syntax info, tips, and tricks. Happy scrolly!

The CFP is open for 10 more days. So far, I have only 11 submissions, but I need at least 24. So, please share your ideas! First-time authors are very welcome!

Wavy illusion 〰️ The cyan and magenta lines are the same length and do not change at all. 😵 (CSS only) 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

Excited to see we'll eventually have responsive iframes. It's a one-liner in CSS with `frame-sizing: content-height;` but it does require a meta tag to opt-in from the embedded doc as well. Currenly only behind a flag in Chrome, but will be nice to have once it starts landing.

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?

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...

this is very cool

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.

📝 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...

macromedia shockwave, print ad (1999) archive.org/details/eu_W...

🔥 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...

🚀 Issue 749 of Frontend Focus is out now: frontendfoc.us/issues/749

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 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!)

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. 🔥

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-...

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...

🤘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 🙏🖤

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...

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.

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.

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

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

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 State of CSS survey is out! It's shorter this year! Please go take it! survey.devographics.com/en-US/survey...

"Moon Picker" by Michael Gehrmann codepen.io/editor/g12n/...

What about a straight line that bends when the circles get closer and stretches when they get farther. It's surely not possible using pure CSS, right? Right!? 👀 css-tip.com/bending-line/ Probably my new favorite demo, powered by the modern features. CSS is awesome! 😍

if we make it to $100K before the campaign ends today I will shave my beard off on a livestream build.awesome.me

❓ A question for web developers ❓ If you do layout in CSS, what's missing? I'm especially interested in hearing about use cases that aren't yet solved by existing CSS layout features. #css #webdev

contrast-color() is Baseline Newly Available, so I took a look at the basics of how it works, and a fun way to use it with color-mix() and light-dark() youtu.be/JEJbSGtZxOw

Little side project! ⌨️ wf: a little command line tool to search for web features and associated data like browser compat/Baseline, docs, links to bugs, and more 📖 Install and learn more at www.npmjs.com/package/web-...

Safari 26.5 is here! It includes the :open pseudo-class, the element-scoped keyword for random(), color-interpolation for SVG gradients, the ToggleEvent.source property for popovers, and the Origin API. And a ton of polish and fixes. webkit.org/blog/17938/w...

New blog post: Compositing & Blending! 🥳 I spent the last few months reading all about blend modes so you don't have to: You'll learn what compositing and blending are, and what is actually going on under the hood when you apply blend modes in CSS 🎨 nik.digital/posts/compos...