Tessera

🩺 Meet Your Users Where They Are with Obs.js csswizardry.com/2026/05/meet...

Harry Roberts@csswizardry.com · 3mo ago

An important update courtesy of @tunetheweb.com! csswizardry.com/2026/05/bett...

I’ve been working with a client who runs a lot of social media and ad campaigns, so we’ve been deploying the experimental `No-Vary-Search HTTP` header. It’s amazing to see it actually working! Read all about it here: csswizardry.com/2026/05/bett...

Show, don’t tell! A couple of years ago, I ran a custom INP workshop for a client, and built an interactive demo to show them what their site FEELS like. Today, I decided to polish it and publish it!

Better Browser Caching with No-Vary-Search – CSS Wizardry

No-Vary-Search lets HTTP caches ignore irrelevant query parameters such as UTM tags, while still keeping meaningful ones like product variants in the cache key.

csswizardry.com

‼️ BEWARE! `font-family` Doesn’t Fall Back the Way You Think: csswizardry.com/2026/04/font...

font-family Doesn’t Fall Back the Way You Think – CSS Wizardry

A quick but important reminder that font-family declarations don’t inherit fallback stacks the way many developers assume.

csswizardry.com

Harry Roberts@csswizardry.com · 4mo ago

Play with it here: jsbin.com/toriwawari/e...

JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

jsbin.com

PSA, this is why you keep seeing Times New Roman all over your site. #CSS #CLS #Typography

$/** * FONT-FAMILY * =========== * * font-family rules do not ‘inherit’ or fall back; they’re standalone * declarations. This means any emissions or errors in the current element’s * font-family declaration won’t fall back to a parent’s font-family, but to the * browser’s default for that element. * * This is why you’ll often see a flash of Times (New Roman) in place of * something more suitable. * * It’s vital that, in order to avoid layout shifts and unsightly fallbacks, you * should always specific a complete font stack for font-family rules, and not * just a single value. */ body { font-family: system-ui, sans-serif; } /** * INCORRECT * ========= * * While your custom web font is loading, the following does NOT fall back to * the parent’s font-family (system-ui/sans), but to the browser’s default font * family for this element (usually serif). */ h1 { font-family: Open Sans; } /** * CORRECT * ======= * * Delete the leading underscore. * * Now that we have a full font stack, the browser WILL fall back to * system-ui/sans while waiting on your custom font. No more flash of Times! */ h1 { _font-family: Open Sans, system-ui, sans-serif; }$

PSA, this is why you keep seeing Times New Roman all over your site. #CSS #CLS #Typography

🎨 I gotta say, my latest is a little treasure trove: what even is `contain`?! csswizardry.com/2026/04/what...

What Is CSS Containment and How Can I Use It? – CSS Wizardry

CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.

csswizardry.com

David Bushell 🪿@dbushell.com · 4mo ago

I miss #WebDayOut :(

reading: What Is CSS Containment and How Can I Use It? csswizardry.com/2026/04/what... — my prayers were answered! Harry explains all 🙏 for my next wish...

What Is CSS Containment and How Can I Use It? – CSS Wizardry

CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.

csswizardry.com

Barry Pollard @tunetheweb.com · 4mo ago

100% agree with this! Browsers are AMAZING at loading a page in mostly the right way by default. There are lots of extra options (fetchpriority, loading=lazy) to tweak that further if you know with reasonably certainly that they could benefit from those. If it’s ambiguous, then leave it be.

Harry Roberts@csswizardry.com · 4mo ago

🚫 When All You Can Do Is All or Nothing, Do Nothing For all you weekend warriors, advice for times of uncertainty. csswizardry.com/2026/03/when...

🚫 When All You Can Do Is All or Nothing, Do Nothing For all you weekend warriors, advice for times of uncertainty. csswizardry.com/2026/03/when...

When All You Can Do Is All or Nothing, Do Nothing – CSS Wizardry

If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all.

csswizardry.com

🇳🇱 Freshly back from a wonderful working week in The Hague. I shall never tire of this beautiful city.

Sunlit canal in The Hague with calm reflections, a white villa on the left, cyclists and parked bikes along the right-hand path, and a tram crossing a bridge in the distance under a clear blue sky

Well, Brighton, you’ve been stunning as always. Thank you so much to @adactio.com and the @clearleft.com team for having me at #WebDayOut, an invigorating and inspiring shot in the arm to kick conference season off proper.

Me gazing longingly at Jeremy while he introduces me on stage at Web Day Out.

Marc Thiele @marcthiele.com · 5mo ago

Me looking at standardised web APIs like… #WebDayOut

A photo of me on-stage taken from the vantage point of an audience member. I’m pulling a face that looks almost kind of lustful in a way. I’m actually glad you can’t see it—it isn’t flattering.

Hello and good morning from Brighton, where I attend #WebDayOut. If you want to follow along visually, here is my set of photos that document the day. More to follow. marcthiele.com/photos/web-d...

Web Day Out 2026 – Photos by Marc Thiele

This is my set of photos from Web Day Out 2026 in Brighton.

marcthiele.com

Slides from my #WebDayOut talk, ‘Build for the Web, Build on the Web, Build With the Web’. Incredibly proud of this one. speakerdeck.com/csswizardry/...

Build for the Web, Build on the Web, Build With the Web

Every layer of abstraction made in the browser moves you further from the platform, ties you further into framework lock-in, and moves you further away …

speakerdeck.com

And we’re off! #WebDayOut

Jeremy Keith on stage introducing Web Day Out.