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.
📝 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
The State of CSS survey is out! It's shorter this year! Please go take it! survey.devographics.com/en-US/survey...
State of CSS 2026
Take the State of CSS survey
survey.devographics.com
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! 😍
CSS by T. Afif@css-only.dev · 2mo ago💡 CSS Tip! Connecting two circles with a curved line using only CSS? Yes, it's possible! 🤩 css-tip.com/connected-ci... A demo powered by the future of CSS (border-shape, if(), anchor position, etc). Update your Chrome and play with it! Stay tuned for more complex connections 👀
if we make it to $100K before the campaign ends today I will shave my beard off on a livestream build.awesome.me
Build Awesome Pro
A better way to build web sites. Fast, flexible, and built to last.
build.awesome.me
💌 A once–weekly roundup of the best #frontend news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us
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
Build bulletproof color systems
YouTube video by Kevin Powell
youtu.be
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-...
