Sign in

Frontend Focus 🚀

@frontendfocus.bsky.social
2K followers 55 following 506 posts

HTML, CSS, web platform, and browser tech news + demos, tricks, and tips (via the Frontend Focus newsletter) 👋 Curated by Chris Brandrick.

PostsRepliesMedia
Reposted by Frontend Focus 🚀
Manuel Matuzović @matuzo.at · 23/09/2026
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!
21118
Reposted by Frontend Focus 🚀
Amit Sheen @amitsheen.bsky.social · 24/09/2026
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_...
26210
Reposted by Frontend Focus 🚀
Kevin Powell @kevinpowell.co · 28/09/2026
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.
developer.chrome.com
Responsive iframes in Chrome 154  |  Blog  |  Chrome for Developers
Chrome 154 adds support for responsively-sized iframes, letting an iframe size itself based on the intrinsic size of its embedded document.
2506
Reposted by Frontend Focus 🚀
Frontend Focus 🚀 @frontendfocus.bsky.social · 21/10/2024
💌 A once–weekly roundup of the best #frontend news, articles and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us
Screenshot of Frontend Focus email newsletter.
1222
Reposted by Frontend Focus 🚀
Patrick Brosset @patrickbrosset.com · 11/09/2026
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.
The website, showing a list of web features and a search tool. The title says Shape what browsers build next. The github sign-in button is highlighted as step 1. The speech bubble icon on one of the features is highlighted as step 2.The website, a feature has been selected, and the Provide developer signal dialog is displayed. The use case text input field is highlighted as step 3. The workaround text input field is highlighted as optional. And the submit button is highlighted as step 4.
32311
Reposted by Frontend Focus 🚀
Master.dev (Formerly Frontend Masters) @frontendmasters.com · 26/08/2026
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
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?
082
Reposted by Frontend Focus 🚀
Polypane. Browser for web devs @polypane.app · 26/08/2026
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...
1193
Reposted by Frontend Focus 🚀
Ahmad Shadeed @ishadeed.com · 25/08/2026
✍️ 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...
ishadeed.com
Balancing flex items with flex-wrap: balance
A look at how flex items wrap and how to balance them across lines.
36111
Reposted by Frontend Focus 🚀
Chris Brandrick @brandrick.bsky.social · 14/08/2026
this is very cool
youtube.com
A Walkable ASCII Cyberpunk City in One HTML File
YouTube video by Grow Now! Games
051
Reposted by Frontend Focus 🚀
Bramus @bram.us · 10/08/2026
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-...
28610
Reposted by Frontend Focus 🚀
Rachel Andrew @rachelandrew.co.uk · 11/08/2026
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.
youtube.com
A Pragmatic Guide to Browser Support - Rachel Andrew - Pixel Pioneers 2026
YouTube video by Pixel Pioneers
12414
Reposted by Frontend Focus 🚀
CSS by T. Afif @css-only.dev · 03/08/2026
📝 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...
master.dev
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...
1309
Reposted by Frontend Focus 🚀
videogame history @vghistory.bsky.social · 23/07/2026
macromedia shockwave, print ad (1999) archive.org/details/eu_W...
prominent text:
shockwave makes your website groovy, baby!
photo: austin powers and felicity shagwell back to back, holding pistols, smiling, against a shagadelic background of coloured flower outlines.
smaller text:
austinpowers.com uses
the shockwave player to deliver the
web's most shagadelic experience.
when you want more of the world to visit your site and return more often,
reach for the director 7 shockwave internet studio. it's the secret agent
of engaging and entertaining sites that add life to the web.
www.macromedia.com
add life to the web
3238671078
Reposted by Frontend Focus 🚀
Lea Verou, PhD @lea.verou.me · 13/07/2026
🔥 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...
lea.verou.me
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 ...
77024
Frontend Focus 🚀 @frontendfocus.bsky.social · 08/07/2026
🚀 Issue 749 of Frontend Focus is out now: frontendfoc.us/issues/749
Screenshot of email newsletter
020
Reposted by Frontend Focus 🚀
Patrick Brosset @patrickbrosset.com · 07/07/2026
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...
blogs.windows.com
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 ...
22112
Reposted by Frontend Focus 🚀
CSS by T. Afif @css-only.dev · 08/07/2026
📝 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!)
css-tricks.com
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!
1319
Reposted by Frontend Focus 🚀
Josh W. Comeau @joshwcomeau.com · 06/07/2026
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. 🔥
joshwcomeau.com
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...
918032
Reposted by Frontend Focus 🚀
Cassidy @cassidoo.co · 29/06/2026
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-...
cassidoo.co
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.
2112
Reposted by Frontend Focus 🚀
Jake Archibald @jakearchibald.com · 29/06/2026
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...
jakearchibald.com
The Goldilocks customizable select height
The 'ideal' sizing is more complicated than you think…
1331055
Reposted by Frontend Focus 🚀
Stuart Robson @sturobson.com · 30/06/2026
🤘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. www.alwaystwisted.com/articles/mode… 🙏🖤
alwaystwisted.com
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.
3176
Reposted by Frontend Focus 🚀
Ryan Moulton @moultano.bsky.social · 19/06/2026
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...
moultano.wordpress.com
Where to Find the Colors Your Screen Can’t Show You
An atlas of the vibrance of the real world
471129379
Reposted by Frontend Focus 🚀
Bramus @bram.us · 22/06/2026
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!
Promotional Image for the State of CSS Survey 2026
1159
Reposted by Frontend Focus 🚀
Patrick Brosset @patrickbrosset.com · 22/06/2026
Quick SVG survey 🗳️ What are your pain points with SVG? What features are missing? What bugs matter the most?
161613
Reposted by Frontend Focus 🚀
CSS-Tricks* @css-tricks.bsky.social · 22/06/2026
Using Scroll-Driven Animations for Opposing Scroll Directions by @silvestar.codes css-tricks.com/scroll-drive...
0173
Reposted by Frontend Focus 🚀
Barry Pollard @tunetheweb.com · 19/06/2026
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.
crbug.com
Chromium
45720
Reposted by Frontend Focus 🚀
Stef Walter @stephaniewalter.bsky.social · 17/06/2026
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/
Screenshot of a storied colors website showing the color Claret on a deep red background, with navigation links, a large title, meta data explaining the color was first documented in the 17th century, it's sourced from plants, originates from Bordeaux, France, and has been used from x. 1600 to the present days, hex 7F1734.
0317
Reposted by Frontend Focus 🚀
Drew Mackie @drewgmackie.bsky.social · 10/06/2026
Does anyone have any experience taking the website remnants from the Wayback Machine and rebuilding that website? As a kind of preservation/memorial?
293
Reposted by Frontend Focus 🚀
Chris Brandrick @brandrick.bsky.social · 11/06/2026
This excellent post from @vale.rocks takes a deep dive into the web browsers found within various game consoles.
vale.rocks
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.
011
Reposted by Frontend Focus 🚀
rotecodefraktion.bsky.social @rotecodefraktion.bsky.social · 06/06/2026
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
rotecodefraktion.de
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.
191
Reposted by Frontend Focus 🚀
Jonnie Hallman @jonnie.com · 09/06/2026
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)
737235
Reposted by Frontend Focus 🚀
Jen Simmons @jensimmons.bsky.social · 10/06/2026
And learn more watching Learn CSS Grid Lanes at #WWDC26! youtu.be/NDwoB2PpwgY #css #gridlanes #cssday #thewebyouwant
youtu.be
WWDC26: Learn CSS Grid Lanes | Apple
YouTube video by Apple Developer
0122
Reposted by Frontend Focus 🚀
Jen Simmons @jensimmons.bsky.social · 10/06/2026
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
gridlanes.webkit.org
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...
814230
Reposted by Frontend Focus 🚀
Una Kravets @una.im · 01/06/2026
The State of CSS survey is out! It's shorter this year! Please go take it! survey.devographics.com/en-US/survey...
survey.devographics.com
State of CSS 2026
Take the State of CSS survey
0149
Reposted by Frontend Focus 🚀
CodePen @codepen.io · 28/05/2026
"Moon Picker" by Michael Gehrmann codepen.io/editor/g12n/...
081
Reposted by Frontend Focus 🚀
CSS by T. Afif @css-only.dev · 28/05/2026
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! 😍
713220
Reposted by Frontend Focus 🚀
Zach Leatherman @zachleat.com · 28/05/2026
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.me
Build Awesome Pro
A better way to build web sites. Fast, flexible, and built to last.
153111
Reposted by Frontend Focus 🚀
Patrick Brosset @patrickbrosset.com · 18/05/2026
❓ 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
292418
Reposted by Frontend Focus 🚀
Kevin Powell @kevinpowell.co · 13/05/2026
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
youtu.be
Build bulletproof color systems
YouTube video by Kevin Powell
1405
Reposted by Frontend Focus 🚀
Patrick Brosset @patrickbrosset.com · 13/05/2026
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-...
0154
Reposted by Frontend Focus 🚀
Jen Simmons @jensimmons.bsky.social · 11/05/2026
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...
webkit.org
WebKit Features for Safari 26.5
Safari 26.5 is here, delivering 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...
1010112
Reposted by Frontend Focus 🚀
Nik Gadermann @nik.digital · 27/04/2026
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...
nik.digital
Compositing & Blending • Niklas Gadermann
Exploring the math and intuition behind blend modes in the browser
37419
Reposted by Frontend Focus 🚀
Josh W. Comeau @joshwcomeau.com · 13/04/2026
✨ Have you ever heard of Disney’s 12 Basic Principles of Animation? The very first rule, “Squash and Stretch”, can make motion feel *way* more satisfying. I just dropped a brand-new blog post that shows how I’ve been using this technique in my own work: www.joshwcomeau.com/animation/sq...
427527
Reposted by Frontend Focus 🚀
Bramus @bram.us · 02/04/2026
So, I’ve written a bunch of things on how to do certain things with View Transitions, such as optimizing the keyframes or driving a VT by scroll. I noticed I repeat a lot of code throughout those experiments … so I bundled that all up in a package for you. 👉 chrome.dev/view-transit...
chrome.dev
View Transitions Toolkit
A collection of utility functions to more easily work with View Transitions.
36614
Reposted by Frontend Focus 🚀
Chris Bolson @cbolson.bsky.social · 02/04/2026
To celebrate the launch of Artemis II 🚀, I put together a #cssonly scroll-driven animation. Powered by animation-timeline: scroll — no JavaScript, just modern CSS. Still WIP, but already a fun experiment. Full demo on @codepen.io ✨ codepen.io/cbolson/full... #artemis
1115
Reposted by Frontend Focus 🚀
David Aerne @meodai.bsky.social · 07/04/2026
I wanted a way to explore Unicode by visual similarity, not just by name or codepoint, so I built Charcutrie. It lets you browse characters that look alike, search across scripts and symbols, and even sketch a shape to find matching glyphs. (pretty badly for now :D) charcuterie.elastiq.ch#U+221E
17540106
Frontend Focus 🚀 @frontendfocus.bsky.social · 08/04/2026
CSS or BS? www.keithcirkel.co.uk/css-or-bs
keithcirkel.co.uk
CSS or BS?
Think you know CSS? We'll show you a property name. You decide: real CSS, or complete BS. It starts easy. It does not stay easy.
000
Frontend Focus 🚀 @frontendfocus.bsky.social · 02/04/2026
Good issue this week, with plenty to dive into. Includes links from @csswizardry.com, @html5test.com, @meodai.bsky.social, @rachelandrew.bsky.social, @jakearchibald.com and others! ⭐️ frontendfoc.us/issues/735
Screenshot of email newsletter
063
Reposted by Frontend Focus 🚀
Keith Cirkel @keithamus.social · 01/04/2026
Rather than the same old boring internet pranks, I thought I'd build something more fun this April Fools. CSS or BS. Can you tell your CSS properties names from BS? www.keithcirkel.co.uk/css-or-bs
keithcirkel.co.uk
CSS or BS?
Think you know CSS? Real property or made-up nonsense? 20 rounds. No mercy.
2322382
Reposted by Frontend Focus 🚀
Frontend Focus 🚀 @frontendfocus.bsky.social · 25/03/2026
Web Rewind: An Interactive Journey Through 30 Years of the Web - www.web-rewind.com
web-rewind.com
Web Rewind
An interactive journey through 30 years of the web
021