CSS and design systems people - BlogFlock

Site Updates Feb 2026 - Adam Argyle

2026-02-08T06:36:42.000Z

Site Updates

Deno KV social data caching
new Codepen 2.0 editor support
UI fixes
Notebook update (added Color Picker)
Server analytics added to Notebook
Server page views and active users added to UI

WWW Ep230 We Accidentally Deleted Programming - Adam Argyle

2026-02-06T00:39:55.000Z

Ep #230
We accidentally deleted programming

Robbie and I dig into the shift from code-first to spec-first development, whether TypeScript still matters in an AI-driven world, the rise of agency over specialization, and why the future might belong to prompt-driven tinkerers instead of traditional developers.

⤷ whiskey.fm · youtube · spotify · apple

Nice Select - Adam Argyle

2026-02-03T17:17:50.000Z

This post pushes customizable <select> to an extreme. I think it turned out nice.

It's mostly CSS! A li'l JS sprinkle just to position the ::picker() and the selected option together; the JS is nice to have, CSS does the real work.

superellipse forced colors light/dark theme slick scrollbar scroll driven animations scroll-state stuck query scroll-state scrollable query overscroll behavior smooth scroll RTL support text-box trim spring easing anchor & anchor fallbacks color-mix()

Chrome only atm, and I keep mobile with the native select. Still cool!

Try it

Core Architecture #

This component builds on the new appearance: base-select foundation, combining native accessibility with sweet visual control. Progressive enhancement ensures the custom experience only loads on capable devices.

The examples in this post just look like regular select elements in Firefox and Safari. Firefox is working on it though!

appearance: base-select
unlocks full customization of native <select> elements while retaining browser controlled accessibility and keyboard navigation
Conditional enhancement
Only enables custom styling for devices with hover and fine pointer (@media (hover) and (pointer: fine))
JavaScript + CSS hybrid
JS calculates an anchor offset for alignment while CSS handles all visual presentation and animation

Alignment & Positioning #

Anchor positioning plus some special JS sauce to write an inline CSS variable unlocks the picker to position near the selected option (obviously this can't work at the viewport edges). This creates a pleasant morphing effect that feels connected.

Maybe I should have used AIM?

CSS Anchor Positioning
Picker uses anchor(start) to position relative to the trigger button
Selected option alignment
When dropdown opens, the currently selected option aligns vertically with the button text via --_select-anchor-offset custom property
Syncs transform-origin
With 50% var(--_select-anchor-offset) ensures scale animations line up better with the selected option's position
Anchor fallbacks with position-try
flip-block, flip-inline automatically repositions the anchor position if the picker would overflow the viewport

Animation & Transitions #

Scale effects with spring physics to scroll-driven option reveals, every interaction respects user motion preferences while providing rich feedback.

@starting-style
Defines entry animation initial state for the popover
Spring easing
Uses Open Props --ease-spring-3 for playful, physics-based motion on scale and rotation
Discrete property transitions
display and overlay use allow-discrete for proper ::picker() popover animation support
Chevron rotation
::picker-icon rotates 180° on open with spring easing
Scroll-driven option fade-in
Options animate in from the bottom using animation-timeline: view()
Respects reduced motion
Animations and transitions wrapped in @media (prefers-reduced-motion: no-preference)
Button press feedback
Active state scales down to 0.98 for tactile feedback
Open state button feedback
Select scales up to 1.04 when :open, scaling back down on close with a soft bounce

Theming & Color Handling #

Automatic light/dark adaptation leverages system colors and modern color functions for seamless theme switching. Definitely check the support for light/dark forced colors too, a really great way to debug spacing and skeletal aspects of the UI.

color-scheme: light dark
Enables automatic system color adaptation
light-dark() function
Used for backgrounds that need different light/dark values
System colors
Canvas, CanvasText, Highlight, HighlightText for semantic, colors
color-mix()
Creates semi-transparent overlays and borders
Data URI icons
Chevron and checkmark icons embedded as SVG data URIs with variants for each color scheme
Forced colors support
@media (forced-colors: active) provides high-contrast mode adaptations (even the sticky scroll state respects this!)

Layout & Spacing #

Logical properties enable true internationalization with automatic RTL support, while text-box trim delivers pixel-perfect vertical alignment. Custom properties create a flexible design token system.

CSS Custom Properties design tokens
All spacing, sizes, and timing values defined as --_select-* variables
Logical properties throughout
inline-size, block-size, inset-block-start, margin-inline, padding-block for full RTL support
text-box: trim-both cap alphabetic
Precise vertical text alignment in legends
Flexible option content
Options use flexbox with gap for icon + text layout
Checkmark auto-positioned
order: 2 and margin-inline-start: auto pushes checkmark to end of option

Scrolling & Overflow #

Scroll-state queries dynamically detect when content is scrollable and when sticky headers become stuck. Custom scrollbar styling and smooth scrolling enhance the browsing experience within long option lists.

Container scroll-state queries
container-type: scroll-state enables @container scroll-state(stuck) detection
Sticky legends
Group headers stick to top when scrolling, with color change when stuck
Custom scrollbar styling
scrollbar-width: thin and scrollbar-color with fade on hover-out
Scroll containment
overscroll-behavior-block: contain prevents scroll chaining
Smooth scroll
scroll-behavior: smooth for programmatic scrolling (motion-safe)
Dynamic scrollable detection
JS adds .scrollable class when content exceeds max height, CSS adjusts padding accordingly

Customizable Select Features #

New pseudo-elements provide surgical styling control over picker components, while superellipse corners deliver the modern aesthetic popularized by iOS. State selectors enable precise targeting of open and selected states.

::picker(select)
Pseudo-element for styling the dropdown picker container
::picker-icon
Pseudo-element for the dropdown chevron indicator
::checkmark
Pseudo-element for the selected option indicator
<selectedcontent>
Native element that mirrors selected option content in the button
Squircle corners
corner-shape: superellipse(1.25) for modern rounded rectangles (with fallback)
:open pseudo-class
State selector for when picker is visible
:checked on options
State selector for selected option

Accessibility & UX #

Accessibility is built-in with proper focus indicators, keyboard navigation, and semantic markup thanks to the web platform. Touch-friendly targets and overflow handling ensure the component works elegantly across all input methods.

Focus ring styling
Distinct :focus (subtle) and :focus-visible (prominent)
Disabled option support
option[disabled] styling and hover prevention
Text overflow handling
text-overflow: ellipsis in button display
Minimum touch target
36px item height matches mobile guidelines
Hidden option support
JS skips [hidden] options in offset calculations
RTL example included
Arabic language demo validates bidirectional layout

Performance Optimizations #

Careful optimization strategies keep animations smooth while minimizing layout thrash. Smart caching and compositor hints ensure the component performs well even on lower-end devices.

will-change: scale
Hints to browser for compositor optimization (also fixes text shift bug)
WeakMap offset cache
Avoids expensive DOM measurements on every interaction;
auto-garbage-collected
Hardcoded layout constants
Avoids getComputedStyle forced reflows during initialization. Tried dynamically computing these in a hidden instance, but couldn't get it as close as just "hardcoding / speficying them ahead of time" in a config
Background clip
background-clip: padding-box prevents background bleeding under border
Parallel icon variants
Pre-defined black/white SVGs avoid runtime color manipulation

Example Variations #

The component architecture supports diverse use cases, from simple toggles to rich content pickers. Each variation demonstrates how the base patterns adapt to different content and interaction models.

Toggle with status indicators
Colored dots (green/red/gray) for on/off/disabled states
Avatar select
Circular images with person names
Multi-line options
Title + description layout for status picker
Grouped options
Fieldsets with sticky legend headers
Label above value
Color space picker with small label text above the selected value
Flag emoji select
Country picker organized by region

Try It #

Experience the component in action on CodePen:

See the Pen by Adam Argyle (@argyleink) on CodePen.

Wrapping Up #

There's room for improvement, please fork and offer feedback!

I tried many variants of animation, trying to reduce some of the shift of the positioning, but never found something that worked across all the variants. Help me?! 🙏

This select component intends to showcase what's possible when we combine modern CSS features with thoughtful progressive enhancement. The appearance: base-select property provides the foundation, while anchor positioning, scroll-state queries, and entrance animations create a polished, accessible experience.

The real power lies in how these features compose together—each enhancement builds on platform primitives rather than fighting against them. The result is a component that's maintainable, accessible, and ready for the next generation of web interfaces.

Most importantly, this approach lets us create custom experiences without sacrificing the keyboard navigation, focus management, and screen reader support that come free with native elements.

For more, checkout nice details!

March Mad CSS Md - Adam Argyle

2026-02-02T04:02:44.000Z

This week I compete in Syntax's March madCSS; me against 16 other badass devs in CSS & UI challenges 😅

Wish me luck 🤞

Anchor Interpolated Morph (AIM) - Adam Argyle

2026-01-23T17:04:10.000Z

It's more natural when animations start near the trigger point, this CSS technique makes it easy. AIM animates from any element, and to any element.

Thanks to anchor(), anchor-size(), @starting-style, and interpolate-size.

All together they can create an anchor interpolated morph: an interruptible contextual transition from where a user invoked it.

That's a popover=hint + interestfor,
no JS CSS transition. Try it

This is a very powerful and capable feature combination.

Similar results are visually possible with child elements using their parent as the anchor, but:

What if they're not ancestors?
What if one is in the :top-layer?
What if you want semantic HTML and a healthy accessibility OM?

AIM is the remedy.

FLIP #

This technique is inspired by Paul Lewis's coined animation technique called FLIP (First, Last, Invert, Play).

The gist of FLIP is to use JS to calculate the difference in positions/size/whatever of an element, before and after some DOM change.

AIM #

The gist of AIM is to use CSS to access properties from where another element is (first), to where natural render is (last), and let transition handle invert and play.

First: anchor(), anchor-size() & @starting-style
Last: interpolate-size: allow-keywords & auto

The roles where JS was accessing properties, measuring natural sizes, and calculating the differences… are now handled by CSS. Definitely not 100% like FLIP 😅 but hopefully you see the connection.

Here's a less designed example (so there's less CSS to sift through) that's a <dialog> element:

Try it. You can uncomment a top-left position example too!

How it works #

1: The anchor-name property is used to identify the element that the element is morphing from.

button {
  anchor-name: --⚓︎-morph; 
}

Can you believe this one line of CSS enables any other element to observe the height, width, and position of this element 🤯

Want more about that emoji naming convention?

2: Link up the dialog with that anchor.

dialog {
  position-anchor: --⚓︎-morph;

  /* adjust position as desired */
  left: anchor(left);
  top: anchor(top);
}

3: Enable transitioning to auto width/height.

dialog {
  interpolate-size: allow-keywords;
}

4: Enable transitions for all properties you want in the morph.

dialog {
  @media (prefers-reduced-motion: no-preference) {
    transition:
      display var(--_speed) allow-discrete,
      overlay var(--_speed) allow-discrete,
      height  var(--_speed) var(--ease-3),
      width   var(--_speed) var(--ease-3),
      left    var(--_speed) var(--ease-3),
      top     var(--_speed) var(--ease-3);
  }
}

5: Now we can use @starting-style to apply the styles from the anchor to the dialog before it opens. I call this "enter stage from" styles, and you can apply as many of the anchor values as you want.

I specify all corners here and setup a mask system to allow the dialog to transition to fit it's content, from the anchor size, without distorting the dialog contents.

dialog {
  @starting-style {
    &[open] {
      left: anchor(left);
      top: anchor(top);
      right: anchor(right);
      bottom: anchor(bottom);
      width: anchor-size(width);
      height: anchor-size(height);
    }
  }
}

Notice anchor-size() for height and width, this combined with height and width auto and interpolate-size: allow-keywords will allow the dialog to transition to its natural size from the anchor with a nice reveal.

And for exit out on the dialog, it's similar as enter stage in my example but you could easily transition a different way or to a different element.

dialog {
  &:not([open]) {    
    left: anchor(left);
    top: anchor(top);
    right: anchor(right);
    bottom: anchor(bottom);
    width: anchor-size(width);
    height: anchor-size(height);
  }
}

That's it for a dialog!

See the Pen by Adam Argyle (@argyleink) on CodePen.

AIM can be used for:

Dialogs
Popovers
Tooltips
Page preview
Fullscreen takeover (go big!)
Quick actions
Disclosures
Submenus
Hovercards
Particles? add some CSS random()
Other overlay components?

Here's the popover from the video at the beginning. It's using all the above techniques, plus some extras, precise timings, easings and intentionality.

See the Pen by Adam Argyle (@argyleink) on CodePen.

View Transitions #

What about view transitions and morphing, don't they do that too?

Yep! They do, and can do some neat morphing tricks. Here's a view transitions demo I called "anything to anything".

See the Pen by Adam Argyle (@argyleink) on CodePen.

But… that requires JS, is always a straight line and is not elegantly interruptible.

"always straight lines"… once you notice it you can't unsee it. View transitions can't curve or swing to a new destination.

Here's some slides I made using the Astro Morphull repo I made that use no JS view transitions so content morphs: https://cascadiajs-2025.netlify.app.

Spatial Continuity #

Traditional transitions often appear out of thin air or fade in from a generic center point. By leveraging anchor() and @starting-style, we can let CSS tell a story about where an element came from.

We're telling a story about where an element came from and why it’s there.

Go forth and make more natural transitions that feel spatially contextual. Stop letting your elements "teleport" into view, start letting them grow, stretch, and evolve directly from the components that triggered them.

Your users (and their muscle memory) will thank you. Speaking of, don't forget to gate the motion behind a prefers-reduced-motion media query (test the dialog and popovers).

Hot tip: You could easily morph to a different element than the invoking element, anchor() doesnt care.

Summary checklist for AIM:

Set the Anchor:
anchor-name on the invoking element to create a spatial reference.
Set "Enter From" and "Exit To" styles with anchor():
Use @starting-style to declare the entry and exit properties relative to the anchor.
Transition:
Orchestrate transition properties to allow the browser to interpolate the path, shapes and colors between the anchor point and the final layout.

People not people - Robin Rendle

2026-01-10T03:20:16.000Z

I can’t stop thinking about a series of blog posts by Eleanor Janega I read a couple of months ago. The first is called There’s no such thing as the ‘Dark Ages’, but OK, where she writes:

The medieval period was not a period of stagnation, it was a time of progress.

Wait, what? That’s not what I thought! This is novel information! Tell me more...

The actual phrase ‘Dark Ages’ itself derives from the Latin saeculum obscurum, which Caesar Baronius – a cardinal and Church historian – came up with around 1602. He applied the term exclusively to the tenth and eleventh centuries. However, and very significantly in his use of the term, Baronius was not decrying a state of scientific malaise, or a particularly turbulent political period – he’s talking about a lack of sources surviving from that time. Indeed, Baronius sees the cut off point for the dark ages to be the Gregorian reforms of 1046, following which we see a massive increase in surviving documentation.

So:

Is there a time that historians use the term ‘Dark Ages’? Yeah, we do use it to talk about source survival rates. It’s not a term we use as a value judgment, however. We just mean that we don’t have a lot of evidence to go off of.

This whole time I’ve been using “Dark Ages” and I didn’t realize that it’s a slur. I had sort of believed in the propaganda that when the glorious Roman Empire fell, all of Europe slipped into some dystopian nightmare where progress was halted for more than a thousand years out of sheer stubbornness. But wait...wasn’t the Roman Empire, ya know, an Empire? Are those typically...good?

Late last year Eleanor argued that this weird belief in the Roman Empire is a contrarian history, despite being popular. In the post, she replies to a reply-guy in her comments:

It is contrarian to argue in defence of a system which steals from workers to give to a vanishingly small segment of a wealthy population. It is contrarian to refuse to learn about a subject and still think your opinions on it are valid. It is contrarian to ignore experts when they correct your profound and deep-seated misunderstanding.

However this man, and the legions of those who will go to bat for a violent and oppressive Empire, do not see themselves as contrarian because they are not engaging with actual history, they are engaging with a hegemonic historiography. They believe in the glory of the Roman Empire and its inherent good because they themselves currently live inside a violent empire that exists to funnel money to a wealthy elite. If you begin to question whether Rome was bad for the average person – if you start to ask why there was money for some people to have underfloor heating, while there wasn’t enough to adequately feed the population of Brittania – you may start asking questions about what is happening around you.

Through these posts I felt like a sprawling network of rusty, spider-webbed cogs had begun to turn in my mind. Someone had planted these ideas in my head about the Roman Empire and the Dark Ages when I was a kid, but I’d never thought about the people who were ruled beneath and lived through it. Along the way I had internalized some propaganda and never questioned it, propaganda that made me think less of people—seeing them as sub-human dummies. That’s millions of people over thousands of years! And what? They were willing to let their cities go to hell and forgo all the wonders of Empire because of laziness?

This reminds me of a great lil book I read recently by Becky Chambers called The Long Way to a Small, Angry Planet. The novel is set hundreds of years into the future, humanity is a spacefaring civilization and works alongside dozens of alien species. The world isn’t perfect and there’s all sorts of petty conflicts and problems, but that’s not the word folks use—alien—to describe their compatriots in the stars. They call them people. Everyone is people.

There’s no us, there’s no them. There’s just people.

4 CSS Features Every Front-End Developer Should Know In 2026 - Adam Argyle

2026-01-07T07:01:00.000Z

2026; I think every front-end developer should know how to query scroll states, trim typographic whitespace, stagger with sibling-index(), and use type safe attr().

This is only some of the CSS that shipped in 2025 you need to know.

This post is a themed post!
Check out 2023, 2024 and 2025.

sibling-index() and sibling-count() #

Earlier this year these were just experiments, now they're available in stable Chrome and Safari!

They let you use an element's position relative to its siblings as values in calculations. For example, you can stagger elements with a transition delay based on their sibling-index().

A nice trick is to subtract 1 so the first element starts immediately:

li {
  transition: opacity .3s ease;
  transition-delay: calc((sibling-index() - 1) * 100ms);
}

Stagger enter stage animations easily by combining with @starting-style!

li {
  transition: opacity .3s ease;
  transition-delay: calc((sibling-index() - 1) * 100ms);

  @starting-style {
    opacity: 0;
  }
}

See the Pen by Adam Argyle (@argyleink) on CodePen.

You can rotate hues in oklch, automatically number elements, and all sorts of fun things.

Resources

@container scroll-state() #

These features fit nicely into progressive enhancement, similar to scroll driven animations, as they're enhancements rather than requirements. IMO at least.

Three states of a scroller are now queryable:
stuck, snapped, scrollable and scrolled.

To start, you need the element that's stuck, snapped, or scrollable to have container-type: scroll-state. Then, a child can query it with @container scroll-state().

An element cannot query itself, but its pseudo elements can!

stuck #

Perfectly know when position: sticky elements are stuck.

/* when .outer-navbar is stuck */
@container scroll-state(stuck) {
  .inner-navbar {
    box-shadow: var(--shadow-3);
  }
}

Use this to help users understand an element will now be overlaying their scroll content.

snapped #

Perfectly know when scroll-snap alignment is active.

/* when <li> parent is snapped */
@container scroll-state(snapped) {
  .box {
    scale: 1.1;
  }
}

/* or not snapped! */
@container not scroll-state(snapped) {
  .box figcaption {
    translate: 0 100%;
  }
}

Great for highlighting the item, or demoting every other item.

scrollable #

Perfectly know when content overflows its container, and in which direction(s).

@container scroll-state(scrollable) {
  .scroll-hint {
    opacity: 1;
  }
}

Use this to toggle hints, scroll indicators, or adjust padding to signal more content.

scrolled #

Perfectly know when content is scrolled in a direction.

@container scroll-state(scrolled: bottom) {
  translate: 0 -100%;
}

Use this for sticky headers or navbars that showy hidey based on scroll direction.

Resources

text-box #

text-box lets you slice half-leading right off a text box!

Web font rendering includes whitespace above and below glyphs for "safe spacing", but sometimes you want pixel-perfect alignment to baselines or x-heights.

Achieve the above image with:

h1 {
  text-box: trim-both cap alphabetic;
}

That one-liner trims spacing above cap height and below alphabetic baselines.

Learn more in my interactive notebook

Perfect for type and grid alignment nerds. I think it'll become the default.

Resources

typed attr() #

There's an advanced version of attr(); type-safe and more powerful.

It allows using HTML attributes directly in CSS with type checking and fallbacks.

Pass colors:

<div data-bg="white" data-fg="deeppink"></div>

.theme {
  background: attr(data-bg color, black);
  color: attr(data-fg color, white);
}

Pass numbers:

<div class="grid" data-columns="3">…</div>

.grid {
  --_columns: attr(data-columns number, 3);

  display: grid;
  grid-template-columns: repeat(var(--_columns), 1fr);
}

This creates a powerful bridge between HTML and CSS.

Here's a scroll snap example where CSS basically controls the enums and HTML must pass valid values to get the desired snap results:

<li scroll-snap="start"></li>
<li scroll-snap="center"></li>
<li scroll-snap="end"></li>
<li scroll-snap="nothing"></li>

[scroll-snap] {
  scroll-snap-align: attr(scroll-snap type(start | center | end));
}

The type() function validates attribute values against allowed keywords. Invalid values fall back gracefully.

Try it on Codepen

Resources

CSS rules.

Now let's laugh at this hilarious obvious AI generated nano banana image I made about us having our cake and eating it too.

Still can't do hands lol

v19 - Robin Rendle

2026-01-06T04:27:44.000Z

Watch out: a new website appears! Yesterday I published the ninenteeth official version of this website and this time round it’s inspired by the work I’ve done on developer tools these last few years. It’s my own personal IDE: you can navigate files, open up folders, and see how I’d organize an operating system.

My favorite bit of the new update is what I’ve done with Photos. For a good long while I’ve felt that I need a somewhat-private space to develop my photo skills, but I don’t want to be tied to anyone else’s platform. I don’t want to think about Likes, man. So for now I’ve uploaded just a few things to test the layout system out.

This redesign also reminded me just how powerful the web is now. Perhaps not a shocker to a lot of folks, but even humble tools like the details element and CSS Grid can be used in ways that are genuinely breathtaking. What would have taken me hours to figure out a few years ago was just a few click-clack lines of CSS yesterday.

Next steps? Tweak the 11ty image plugin for sure. There’s some problems I’ve introduced with it, even though the plugin is genuinely magic and ultimately will improve everyone’s experience of clicking around. Maybe I could add more typography and layout options, too? Oh and keyboard shortcuts. Oh, oh, oh and add a feed for photos. And maybe a books section? And and and…yes yes yes...

Games Of December 2025 - Adam Argyle

2025-12-27T06:12:36.000Z

Some people read about the hero, some people play as the hero. If you don't play video games, you have 2 choices:

Suffer through my ramblings
Realize you're missing out and give one of these a try

Here's what we've been playing:

Skate Story #

You're a glass skateboarder stuck in the Underworld who has to skate to (get out?). A rad soundtrack, interesting visuals, and a weird story.

Steam

Wheel World #

Ride a fixie through cell shaded worlds to a chill beat. Race others, discover stuff, collect things, and just take in the atmosphere.

Steam

Lego Voyagers #

We loved Lego Builder's Journey, and this one has local co-op (our favorite). Play as 2 little Lego's who admire rocket ships and want to build one. Use your building skills and unravel the visually engaging and beautifully lit story.

Steam

Bubble Bobble Sugar Dungeons #

We love retro games around here and got super pumped when we saw they were making a 2025 version of Bubble Bobble. BUT, we played Sugar Dungeons a few times and were disappointed it was single player. While it's fine… it's lacking some soul. It's just a bit bland and doesn't really tickle the nostalgia bug like we hoped.

Steam

Dorf Romantik (the Boardgame) #

This house has played a lot of Dorf Romantik the video game. Everyone, young to old, feels satisfied with the cozy yet solitaire-like experience you get from this game. The board game does an AMAZING job of capturing the charm of the video game while combining it with the limitations of a board game.

The board game is beautifully done, creating a compelling campaign arc, unlocks, and other exciting elements.

Board Game

Ball Pit #

Whelp, we got super addicted to this one. Very arcade-like, super fun roguelike-style gameplay, and a fun gameloop. Super fun 5-20 minute sessions.

Steam

Just Shapes and Beats #

Connect up to 4 controllers and dodge the shapes as they react to the beat. Each level is a full on custom visual beat experience to a track from a rad retro-bit playlist. All you gotta do is dodge stuff, you can move a stick right?

Steam

Curse Of The Dead Gods #

Mix a little Hades with FTL and you've got yourself this roguelite. See how far you can get, do your best not to get hit, get some synergy in a sweet build, hack and slash your way to freedom.

Steam

Bring The Color - Adam Argyle

2025-12-16T07:05:00.000Z

Bring the color in at gradient.style

So Many Websites - Robin Rendle

2025-12-14T18:06:50.000Z

I’ve been thinking about the web and how it’ll change with the increasingly…uh…worrying decline of search. It feels like the order of their results can no longer be trusted, the web no longer reliably scraped. Instead, this essential tool we’ve relied on for more than two decades has halted all progress, reversed course. In a heart beat I would pick the search engine of 2014 over the one I use today.

So there’s a lot of anxiety out there about how this fundamentally changes the economics of the web. Folks are worried that without search functioning properly then the web itself is fading away, becoming irrelevant, or already even broken beyond repair. But I disagree! The premise at the heart of these conversations is that websites deserve and require a mass readership to be important or worthwhile. But what if they don’t?

Sure, a lot of businesses were built around the economics of search and ten billion people looking at a block of text imprisoned by a swamp of ads for cars and questionable dietary supplements. Although, that doesn’t mean the web itself requires that specific business model to thrive, to still be worthwhile, to still be important. My hot take here is that ugly business models created ugly websites, but I digress.

This idea has been rolling around my head since I started reading So Many Books by Gabriel Zaid where he writes: “It is worth asking, in the first place, whether all books need or deserve a mass readership.” Yikes! Whoa! This line hit me like a ton of bricks because most business models on the web have assumed a mass readership is out there—but what if it isn’t? What if the web, and most websites besides the few obvious exceptions, were instead more like book publishing? A few thousand dedicated readers out there, at best.

I can feel the disappointment in the conversations I’ve been listening to, as if the whole point of the web is to exist at bewildering, eye-watering scale. A million clicks is so lame, man, when compared to a billion. Heck, your website only gets fifty trillion clicks a day? Is there a point to publishing that dinky website if it’s so small?

But perhaps the death of search is good for the future of the web. Perhaps websites can be free of dumb rankings and junky ads that are designed to make fractions of a penny at a time. Perhaps the web needs to be released from the burden of this business model. Perhaps mass readership isn’t possible for the vast majority of websites and was never really sustainable in the first place.

And perhaps we should let our websites be small and private things once again.

CSS Text Grow - Adam Argyle

2025-12-05T06:34:16.000Z

Fit width text in 1 line of CSS:

h1 {
  text-grow: per-line scale;
}

Prototype available in Canary 165

Codepen · CSSWG · Explainer · Prior Art

On The Ux Show - Adam Argyle

2025-12-02T00:29:57.000Z

Was on The UX Show with Yash Raj and Victor Sanchez 🤓

Watch it on YouTube

Using CSS to fix the irradiation illusion - Adam Argyle

2025-11-29T21:47:37.000Z

Ever noticed how white text on a black background looks thicker than black text on a white background, even though the weights are the same?

This post teaches you how to account for this and adjust perceived font weight for dark mode without layout shift, with variable fonts and the GRAD axis.

g…RAD! 👈😎👈

Feel out the problem space #

Test your eyes and feel the problem space with the following demo
(def open it up larger):

See the Pen by Adam Argyle (@argyleink) on CodePen.

To test:
Flip between light and dark. Look closely at font weights in the "un-adjusted" and "adjusted" example content.

The goal:
The visual weight to not perceptively change when switching between light and dark. This means, when in dark mode, using a negative value for GRAD to reduce the perceived thickness.

Some play:
In dark mode, use the slider to adjust the GRAD axis to see how it changes the perceived weight of the font in the adjusted example. Feel free to fine tune the slider to find the perfect balance for your eyes, flipping back and forth, adjust the slider until you see no weight change when flipping themes.

I think it's easier to notice the difference in the paragraph text than the heading text, but you find which is easier to notice for yourself.

It's subtle:
Don't expect this to jump out at you, but you'll struggle to unsee once you see.

Irradiation illusion #

Humans perceive white on black vs black on white differently. We learned it from the world, the way shadows and light have given us biases and expectations. Our squishy human eye has been through some things you know?

GRAD in variable fonts to the rescue #

Before variable fonts, font weight was the only way to adjust the perceived weight of a font, but this changes the glyph size. This can cause accidental layout shift, aka a janky experience.

GRAD stands for "grade", and it's a variable font axis that allows us to adjust the perceived weight of a font without changing the glyph size.

Fixing bold link hovers #

Here, you'll recognize this classic issue. Hover the links in the below demo to see a small preview of the type of layout shift that can occur.

See the Pen by Adam Argyle (@argyleink) on CodePen.

With variable fonts, we can use the GRAD axis to adjust the perceived weight of a font without changing the glyph size.

This allows us to adjust the perceived weight of a font without causing layout shift. That's what the "fixed" example is using.

One step further #

So far we've only adjusted the perceived weight of a font in dark mode with a negative value for GRAD, and for links being hovered that use a positive value for GRAD, but we can go even further:

See the Pen by Adam Argyle (@argyleink) on CodePen.

This allows us to adjust the perceived weight of a font based on the users contrast preferences.

If the user prefers more contrast, without layout shift, we can use a positive value for GRAD to increase the perceived thickness. In dark mode, we can use a negative value for GRAD to reduce the perceived thickness while still maintaining their preference.

body {
  --GRAD: 0;
  font-variation-settings: "GRAD" var(--GRAD);
}

@media (prefers-contrast: more) { body { --GRAD: 700 } }
@media (prefers-contrast: less) { body { --GRAD: -50 } }

@media (prefers-color-scheme: dark)                              { body { --GRAD: -50 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: more) { body { --GRAD: 150 } }
@media (prefers-color-scheme: dark) and (prefers-contrast: less) { body { --GRAD: -150 } }

Users will never ask for something like this. They'll just be able to easily read the content in your design in a way that feels natural.

Time to check if your favorite font has a GRAD axis.

Midi Meets CSS At Beyond Tellerrand - Adam Argyle

2025-11-27T07:16:43.000Z

MIDI Meets CSS; out now on YouTube!

Beyond Tellerrand Talk Done - Adam Argyle

2025-11-07T02:56:09.000Z

My talk Midi Meets CSS is done! Had a blast bein a high energy nerd on stage blastin banjo and beats from a K.O. II.

Marc, BTconf; you rock. Day 1 of the talks have been so inspiring. Stoked for day 2.

On General Musings With Kevin Powell About Interviewing For Frontend Roles In 2025 - Adam Argyle

2025-10-31T14:48:48.000Z

I was on the General Musings show with Kevin Powell 🤘🏻💀

We chat front-end job hunting in 2025, the misalignments between the technical interviews and the roles they were looking to fill, the overall state of the industry and hiring processes and how to distinguish yourself from the crowd.

Audio · Video

Web components know about the user, device, variables, layout and more - Adam Argyle

2025-10-30T23:51:37.000Z

Since I've tried and failed like 3 times to try and write a blog post on "sector driven design" or "smart components," this post is just gonna try and elaborate on what Miriam Suzanne kids a li'l and says "components know stuff."

This is huge though, for development and design.

Components can own all their presentation aspects for nearly any scenario now. They can feel like magic, perfectly adapting to wherever the component author or designer has condoned.

A new one that not enough people talk about is, CSS named container queries. A component can easily know if it's in the sidenav, footer, article area, callout, whatever!

@container --some-area {
  …
}

That's amazing.

No more chasing down all the styles and variations that scatter across your application.

Components are aware of it's user, device, variables, layout and more. In an attempt to get y'all stoked too, here's a list of all the "stuff" that components know.

What kind of stuff? #

Let's create the ultimate list of all the rad "stuff" that components know:

the users preferences
(dark/light, reduced motion, forced-colors, etc)
the users writing and reading preferences
(rtl, lrt, etc)
the user's device size, orientation, and capabilities
(color, pointer, etc)
the app's design system
(colors, spacing, etc)
where they are in the app
(container name queries)
how much space they have
(container size queries)
how many items they contain
(quantity query)
what kind of items they contain
(:has())
what the value of a variable for them is
(style query)
whats in or out of view
(scroll animations)
whether its scrolling or not
(scroll-state)
is the user hovering, focusing or activating elements
whether there's focus within or not
(focus-within)
if there's valid in invalid form inputs
(validity)

Let me know in the comments what I missed.
I'll give ya a shout for your recommendation 🤘🏻💀

An Abundance of Inspiration - Robin Rendle

2025-10-28T16:21:49.000Z

Redesigning this website over the weekend gave me a curious feeling. It was a deeply cozy one, as if my work sits on a continuum of all the other websites and books every made. As if my work is a link in a long chain through time. You’ll likely spot the inspiration right away: this redesign took an LLM copyright approach to Tschichold’s work and his rather beautiful designs for Penguin Books that are still iconic almost a century later.

There’s other inspirations in here, too. Little details, like the code blocks from Chase McCoy’s website which give an air of confidence to an otherwise empty, sad little box of code. Or you can peek under the hood into the code itself and find snippets like this one, the full-bleed CSS utility by Andy Bell:

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

However, the redesign of this website has always been inspired by a new font release and this time Edgar was the one that caught my eye. It’s stately and elegant and sick. Tobias Frere-Jones and Nina Stössinger made a system that’s clearly bookish yet without feeling prudish or uptight about it.

But reading Edgar’s design notes you can follow my inspiration back and connect the dots to other sources of inspiration, too:

“Looking at Caslon again, I realized this wasn’t just some historical artifact. There was something deeper — something still very present and alive,” says Frere-Jones, who felt “an unexpectedly strong reaction” as he pored over the letterforms more intensely. “It was a kind of strange resonance, like when you play a certain note on a speaker and the windows rattle.”

That’s what inspiration is: finding an old thing and watching it move once again, discovering something else in there that you can remix. Or perhaps even rescue.

At the Art of Manga exhibition at the de Young Museum last week I could hear that same hum. With my nose smushed against the glass, zooming in as far as I could to the beautiful sketches and drawings, I could see how all this work was connected: thousands upon thousands of hours. And all of it stacked on top of more work that I couldn’t see underneath with references and inspirations looted from somewhere else then tweaked and applied in strange new ways.

Speaking of which, I’ve been reading William Gibson’s novel Neuromancer lately and it feels as if I’ve found some holy text, the source of truth for all modern sci-fi. Going in I knew the book was an inspiration to dozens of books and videogames and movies but I hadn’t quite grasped the full extent of it:

He’d operated on an almost permanent adrenaline high, a by-product of youth and proficiency, jacked into a custom cyberspace deck that projected his disembodied consciousness into the consensual hallucination that was the matrix.

I gasped as I discovered how throwaway lines or concepts that the novel introduces for a gentle dose of color and world-building have inspired enormous universes of fresh new stories: Night City, decks, eddies, “jacking in”, chrome, corpos, and the goddamn matrix just to name a few.

This was how I felt redesigning my website this time round as there was just so much inspiration that it’s become overwhelming. I want to steal basically everything from anh’s new homepage or bottle up the typographic confidence of Naz’s website. I want to distill the warm welcome of Doug’s and soak up all the the focus and sturdiness of Printing Films and then for good measure package up the ordered curiosity of Mandy’s website. And, of course, I want to put as much effort and energy into a thing as Lucas Pope put into modeling his beautiful boat.

For now this redesign will do. It’s still messy, unfinished in places. Dark mode needs a lot of work. Mobile styles look clunky, too. I’ll continue to polish the infinite-scrolling blog posts (or I’ll get sick of them in a week and quietly cut them). I might re-add an about page or more information about me since that feels a little stark and threadbare today. That stuff is always tricky to figure out though.

But this redesign was a good reminder that I’m always working amongst smart, inquisitive folks and all of them are taking inspiration from unlikely sources and adding their own thing to the mix. There is an abundance of inspiration out there—across media and genre and quirky publishing formats—and I just have to keep my eyes open to see it.

Beyond Tellerrand 2025 - Adam Argyle

2025-10-26T21:04:54.000Z

Stoked for my upcoming talk at Beyond Tellerrand in Berlin next month:

🎶 Midi Meets CSS 🎶

Most folks use WebGL to visualize their audio (and it's awesome) but that's not me, CSS is. I've taken a different approach…

Be there or be aspect-ratio: 1