Tag: Css
Quick Hit #156
Chrome 150 implements comma-separated container queries as well as support for light-dark(), following Firefox support.
Quick Hit #155
Chrome 150 ships background-clip: border-area (supported by Safari already).
Quick Hit #154
Chrome 150 implements the AccentColor/AccentColorText system-color keywords, making them Baseline.
Progressively enhancing Grid Lanes
This post is a follow-up on my previous post. I was wondering whether it's safe to use Grid Lanes today. I came up with a solution I find okay, but there is a caveat.
Redecoration and un-Sassing my site
Over two months ago, I launched an update to my site. I would feel uncomfortable using the word redesign. Most of the work was behind the scenes.
Working with CSS Container Queries for the first time today, and they don't quite work how I expected them to work. It's leading to me having to declare selectors in ways that are not natural to me, although the selectors are working as expected. In short, it's making me think, harder than most days.
Quick Hit #153
Firefox 154 (Nightly) ships progress(), advanced attr(), and a UI for and .
Your Grid Lanes will likely fail WCAG 2.4.3
I saw a great introduction to CSS Grid Lanes, aka Masonry Layouts, by Patrick Brosset at CSS Day 2026. I liked the versatility of its use cases, but I was also concerned that it's inaccessible by default.
decoding=async can break multipage view transitions
Turns out optimizing for performance can actually harm user experience... Did you know that decoding "async" can break multipage View Transitions? When a view transition is triggered, the browser captures a snapshot of the new page to animate from. If an image is still decoding asynchronously at tha...
Quick Hit #152
Chrome 150 (Beta) and Firefox 154 (Nightly) trial the alpha() relative color CSS function.
Setting the width of selects to the width of the selected option
The field-sizing property is coming to Firefox 152, making it available across all major engines. It allows you to control the sizing behavior of elements with a default preferred size, such as form elements.
Quick Hit #151
Safari TP 246 becomes the first to trial the alpha() relative color CSS function.
Quick Hit #150
Safari TP 246 trials scroll-state queries and word-break: auto-phrase (lacks Firefox support).
Quick Hit #149
Safari TP 246 adds support for values in light-dark() and three or more values in color-mix() (lacks Chrome support).
Quick Hit #149
Safari TP 246 adds support for values in light-dark() and three or more values in color-mix() (lacks Chrome support).
Contextualism Talk At CSS Day 2026
✅ talk "Contextualism" at CSS Day 2026 Slides · Prop For That
CSS Day 2026
🛬 Landed and stoked for CSS Day 2026! 💀 Tattoo scheduled 🤜🤛 Excited to see fellow CSS nerds 🎁 Have a special surprise at the end of my talk that I can't wait to reveal
The Programmer’s Fulcrum: 5 June, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. The big news this week was obviously The European Commission's European Technological Sovereignty Package....
"Every Layout" Mixins
Every Layout is a collection of composable CSS layout patterns. Here's how I've extracted them into a reusable pattern library I can use in any project.
Flex Wrap Balance
I wished for this last year .flex-container { display : flex ; flex-wrap : balance ; } now it's headed to Chrome 🤘🏻
Just Submitted My State Of CSS 2026 Survey
Just submitted my State of CSS 2026 Survey.
Relative Alpha
Would use: CSS relative alpha . button { border-color : alpha(from hotpink / calc (alpha * .25) ); }
The Programmer’s Fulcrum: 22 May, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. As usual, we aim to provide actionable content you can use to destroy Techno...
The Programmer’s Fulcrum: 15 May, 2026
This article originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. As usual, we aim to provide actionable content you can use to destroy Techno...
Améliorer l’accessibilité des commentaires
un peu de code pour améliorer la lisibilité des commentaires du plugin ActivityPub de WordPress
CSS Color Picker Now Available As A Figma Plugin
You can now use my <color-input> as a Figma plugin : HDR Color Picker
Fresh Pixels
Status updates and enforcing the crispiest-possible 88x31 badges across the web
The Programmer’s Fulcrum: 08 May, 2026
This post originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. There is a lot of coverage of the shitshow that is ShitHub this week....
On Podrocket About Why AI Sucks At Frontend
Was on PodRocket to chat about my post Why AI Sucks At Front End : Watch it here or listen
Tiny toggle
Switching between light and dark as lazily as possible.
Cooler theme palette
I updated the blob light and dark themes to use a cooler color palette.
CSS Tips Part 2 - text-wrap: pretty will make your text feel intentional
Go beyond balance. Learn how text-wrap: pretty improves readability, reduces awkward breaks, and makes your UI feel more polished.
CSS Recently In All Browsers
New CSS you feel like you could use today
Adding an animated card border glow with CSS
today iain learned: How to add an animated card border glow with CSS
Light and dark themes for my blog
I added light and dark themes to my blog along with some responsive fixes on smaller screens with a little help.
The Programmer’s Fulcrum: 17 April, 2026
This article originally appeared on The Fulcrum. Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each...
box-shadow is no alternative to outline
People like to use the `box-shadow` property for styling focus outlines, but that can be bad for accesssibility.
The Fulcrum 10 April, 2026
Welcome to this week's The Programmer's Fulcrum. It's your weekly review of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism. We aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional benefit of...
Why AI Sucks At Front End
How can it generate 3D worlds, videos, images and entire web pages, but still suck at front-end?
Redesigning a Blog with AI Design Tools
I used Claude Code's impeccable skill to bring visual cohesion to a blog that had been through four migrations. What worked, what didn't, and what still needs a human eye.
Don't pass className to your components
Why className and style props make your life harder, not easier
Better code blocks with the Astro Expressive Code integration
today iain learned: How to build better and more accessible code blocks with the Astro Expressive Code integration
Pretext review
Another distraction from improving user experience