Site Preferences

This website stores the browser data needed to provide a better experience and to analyze how the site is used. We do not use marketing tools, only Google Analytics to better understand our audience.

Skip to content

Blog

Container style queries and advanced attr(): rethinking how to wire up my components in CSS

Card components showing different density modes: compact, comfortable, and spacious

How do you handle the look and feel of a component when an element moves between contexts? In the past we relied on modifier classes or passing down framework props. But combining container style queries with the new advanced attr() capabilities gives us interesting ways to handle our CSS architecture: HTML attributes feeding directly into typed CSS variables, and components adapting themselves purely through CSS.

Read more about Container style queries and advanced attr(): rethinking how to wire up my components in CSS

Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS

A white line-art icon of an open book with CSS curly braces on its pages, three stacked layers beside it, and a dark badge reading SKILLS, on a blue and cyan gradient background

Modern Web Guidance is a set of skills from the Chrome and Edge teams that feeds expert-written platform guidance straight into your coding agent, with Baseline compatibility data baked in. It's good, but it also has no idea what your design system looks like. This post is about how it works, how I pair it with my own token skills, why fallbacks and polyfills matter, and the honest bits about data it keeps, the licence, and that whole you're just doing Google work for free argument.

Read more about Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS

AI Brains, CSS overload, writing. I need a break and I'm taking one!

An illustrated beach scene with a stylised human brain as the trunk of a palm tree. Text labels float around it reading CSS, AI, UI, Talks, Web, Writing, and Range.

It's that time of the year where I do the European thing, taking way too much holiday during summer. Yep, we're talking more than a week, this year even more than three, and to be honest, I kind of need it. How was my first half of the year? There is a lot to be said from a shift in my day job, to CSS, to web standards, to disturbances in balance and frustrations on a golf course.

Read more about AI Brains, CSS overload, writing. I need a break and I'm taking one!

Under my radar: the highlight API, text-indent and font-family: math

An abstract visual representation of modern CSS features including text highlighting, editorial indents, and mathematical typography in utilitybend's signature neon colors.

Between all the fancy features such as container style queries, contrast-color(), gap decorations, corners-shape... there are some features that became baseline available and we forgot about them. They are those little things that make life a bit easier. I wanted to search for the kinds of features that I don’t need on a regular basis, but am happy to know are available. This article is all about the CSS Custom Highlight API, text-indents and math.

Read more about Under my radar: the highlight API, text-indent and font-family: math

The death of Web UI? Bollocks! Geeking out on a better web and trying to make a difference.

A browser window displaying a skull icon on a light blue background against an orange gradient background

Maybe it's the amount of people from the UK that attended CSS Day this year, maybe I just wanted to use the word bollocks in an article, either way, It's my blog and I write what I want. I write on this thing called the web, which is for everyone and the web can be a really pretty place. Yep, in a world of AI making your half-baked design system we've all seen before, there is certainly a way we can do better. CSS Day showed me that the person orchestrating a Web UI will still triumph the "dude in garage with prompt machine" every time.

Read more about The death of Web UI? Bollocks! Geeking out on a better web and trying to make a difference.

AI or not, I’d hate to live in a world with boring UI. Building a ChatGPT App

OpenAI logo with Custom Apps text on a gradient background

It’s not secret that I love a bit of beautiful UI. The web is full of creativity, experiences that we start to miss out from when using AI to look up everything. Finding information for a Metal festival and reading it in a sans-serif black/white screen is not engaging, you lose every bit of feeling, the urge to go jump in the mosh pit. I felt I had to at least try to take a look at ChatGPT apps. Is this the way forward? Some thoughts...

Read more about AI or not, I’d hate to live in a world with boring UI. Building a ChatGPT App

CSS is filling the gaps with rules. A way to style gaps in grid and flex.

Colorful editorial poster introducing CSS gap decorations with a split grid layout and decorative rules

For a long time, if you wanted to style the space between items in a grid or flex layout, you had to fake it. Borders on child elements, extra pseudo-elements, background tricks, extra markup, etc. It worked... until it didn't. Responsive changes could break illusions, it always felt hacky, and in a few cases we'd end up polluting the DOM structure for something purely visual (Which I hate doing). An update that is long overdue, CSS is filling those gaps in our grid systems.

Read more about CSS is filling the gaps with rules. A way to style gaps in grid and flex.

The community has spoken, now we need browsers vendors to help: a <rangegroup> update

Open UI logo above a banner reading Multi-thumb range sliders, and a horizontal multi-segment range slider with draggable handles

About half a year ago I wrote about the idea to have multi-handle range sliders as a native HTML element. I asked for feedback, and the community delivered. The proposal has moved forward since then, but it needs more voices to get browser vendors on board. Here's what happened, what changed, and what you can do. This article shows some of the survey results, and is a big call for help.

Read more about The community has spoken, now we need browsers vendors to help: a <rangegroup> update