iiinova — where your digital self keeps evolving

Lea Verou, PhD @lea.verou.me · 05/10/2026

Correction: @janeori.propjockey.io posted an even earlier proposal for the same concept, 4 years before! I’ve now updated the data to include hers first:

Original proposal (as an ignore keyword) (by JaneOri)
Jul 14, 2020
Proposal (as a !revertable flag)
Jun 13, 2024
WG Resolution (as a revert-rule keyword)
Jan 31, 2025
Specced (by andruud)
Oct 28, 2025
Shipped in Firefox 150
Apr 21, 2026
Shipped in Chrome 148
May 5, 2026
Shipped in Safari 27
Sep 14, 2026

020

Lea Verou, PhD @lea.verou.me · 04/10/2026

Wow, I hadn't realized the CSS revert-rule keyword (a feature I originally proposed, albeit with a different syntax) is now Baseline, as of Sep 14! 😍 Only 2y4m from initial proposal to Baseline. 1y8m if you count from the WG resolution! Full timeline: lea.verou.me/specs/#rever...

Proposal (as a !revertable flag)
Jun 13, 2024
WG Resolution (as a revert-rule keyword)
Jan 31, 2025
Specced (by andruud)
Oct 28, 2025
Shipped in Firefox 150
Apr 21, 2026
Shipped in Chrome 148
May 5, 2026
Shipped in Safari 27
Sep 14, 2026

2241

Lea Verou, PhD @lea.verou.me · 29/09/2026

My favorite part of being in Japan is the breakfast. ❤️ You can find good Japanese food outside Japan, but I’ve never seen Japanese breakfast outside Japan. Highlight: I tried Shiokara for the first time! And I liked it! 🤤 (I do tend to like slimy salty umami things, so not a big surprise, heh)

1260

Lea Verou, PhD @lea.verou.me · 28/09/2026

*Rubs hands* this is going to be fun 😀

0100

Lea Verou, PhD @lea.verou.me · 16/09/2026

That particular one renders this: In my defense, it’s for a slide deck 😂

170

Lea Verou, PhD @lea.verou.me · 16/09/2026

Out of all the web components I’ve ever made, this must be the pinnacle 😅

3212

Lea Verou, PhD @lea.verou.me · 16/09/2026

image-orientation: auto; (My neck hurt trying to find my baggage belt 😂)

1150

Lea Verou, PhD @lea.verou.me · 15/09/2026

Whoa, folks… I knew there was a need, but this is unprecedented! In only 15h after I posted it, gamut mapping shot up to be the 4th most upvoted interop proposal¹! 🎉 It's also the #1 trending, but that's kind of expected given the fact above 😂 ¹ As of right now, note this is still very fluid

1131

Lea Verou, PhD @lea.verou.me · 14/09/2026

🎨 Ever wondered why oklch() is so odd? Why adjusting L doesn't produce good color ramps? And why TF is L=100% not white?! I just wrote a thorough explanation of why this happens¹: github.com/web-platform... 👍 Upvote if you want this fixed in browsers in 2027! ¹ Spoiler: it’s lack of gamut mapping

Illustration of the problem (screenshot from issue)

23013

Lea Verou, PhD @lea.verou.me · 13/09/2026

Okay, that’s it. I’ve seen enough, and I’m officially smitten. 😍 Am I a fool? Probably. I’m fully aware of all the reasons this is a terrible idea. But I still want it anyway 😅

New calendar event: iPhone Duo Pre-order start

3151

Lea Verou, PhD @lea.verou.me · 31/08/2026

❓Fun CSS trivia! What do you get if you use contrast-color() on an out of gamut color? 😀 😀 😀 😀 😀 1. Chrome: uses the clipped color, so the result is at least legible 2. Safari/Firefox: uses the original, so the result is ILLEGIBLE ❌ 3. Firefox w/ gamut mapping enabled: uses the mapped color ✅

1175

Lea Verou, PhD @lea.verou.me · 31/08/2026

If you ever find yourself wondering whether a browser implements gamut mapping, here's a testcase that makes it blatantly obvious: codepen.io/leaverou/pen... Left: Chrome, Safari Right: Firefox 154 with layout.css.gamut-mapping.method=1

272

Lea Verou, PhD @lea.verou.me · 30/08/2026

Well-meaning devs end up creating inaccessible UIs simply because the landscape is so baffling. In #StateofHTML "education" always comes up as the top a11y pain point. PSA: If getting educated in a technology is so hard, the problem lies with the technology. Web accessibility needs a DX overhaul.

1271

Lea Verou, PhD @lea.verou.me · 30/08/2026

Dear @vscode.dev, please consider at least all official themes when making UI changes? The recent restyle makes it impossible to tell which tab is active and which is inactive, at least in Solarized Light.

2250

Lea Verou, PhD @lea.verou.me · 23/08/2026

People often don’t believe me when I say you can take underwater photos with a modern iPhone. These are all taken with an iPhone 15, the one of me by Zoe and those of Zoe by me. #nofilter, very minimal editing for colors/definition.

Underwater pic of my daughter swimming with a full face snorkeling mask

3180

Lea Verou, PhD @lea.verou.me · 20/08/2026

I ran a prompt for a completely new website without specifying *anything* about client-side architecture, just "keep code lean, modern, and elegant", curious to see whether Claude would use React. Apparently, to Claude "lean, modern, and elegant" meant "use no frameworks". Interesting. 🤔

Screenshot where Claude recommends Vanilla ESM as the top option

8200

Lea Verou, PhD @lea.verou.me · 15/08/2026

Yup. That was my summary for color pain points but @sachagreif.com hasn’t gotten around to posting it yet:

In recent years, CSS has given us many ways to define colors, with perceptually uniform polar color spaces like oklch, and features like relative colors, light-dark() or contrast-color() bringing the holy grail of UIs that can be dynamically recolored closer.

Unfortunately, without gamut mapping, color modifications often produce colors out of gamut, which drops all guarantees. As a result, there are many complaints not just about the lack of gamut mapping itself, but also about its consequences, e.g. dynamic theming still being tough or oklch colors being unpredictable.

230

Lea Verou, PhD @lea.verou.me · 06/08/2026

That's exactly what Step 5 is! But the text should definitely be shorter…

100

Lea Verou, PhD @lea.verou.me · 06/08/2026

That's …a lot of UI complexity to avoid a single one-time click. Where would you put the reset in an actual in-header toggle like this one from @radix-ui.com?

130

Lea Verou, PhD @lea.verou.me · 06/08/2026

Oh but why stop there? 🤣

Radio button with "Random" selected and a slider labeled "Probability of dark" and value 50%

2440

Lea Verou, PhD @lea.verou.me · 04/08/2026

📊 For websites that use a tri-state dark mode toggle (system, light, dark), have you EVER clicked on the override that matches your current system theme? E.g. going from System to Light on a light OS (which produces no visible change). Experimentation aside obvs. Poll at github.com/LeaVerou/blo...

16234

Lea Verou, PhD @lea.verou.me · 01/08/2026

I was too quick to get excited. Safari being a killjoy as usual… 😭

120

Lea Verou, PhD @lea.verou.me · 27/06/2026

Did you know most emojis are perfectly valid CSS <ident>s? Meaning, this totally works in all browsers: --💩: oklch(50% .1 100); background: var(--💩, red); Oooh I’m gonna have a lot of fun with this 🤩 Testcase: codepen.io/leaverou/pen...

14914

Lea Verou, PhD @lea.verou.me · 26/06/2026

Just finished rewatching The Queen’s Gambit. Damn, what an absolute MASTERPIECE. Incredible cinematography, pacing, soundtrack, casting, acting, attention to detail. But my favorite part is how it rejects all modern storytelling tropes we’ve been trained on. 🧵👇

2310

Lea Verou, PhD @lea.verou.me · 25/06/2026

Got a demoralizing "top 100%" from #StateOfCSS? You’re not alone! I got @sachagreif.com to fix the bug, visit stateofcss.com/en-US to see your real percentile. And pssst, did you know you can go back and add pain points you forgot? 😉 Haven’t filled it out yet? Hurry, it closes TOMORROW!! 😱

Features Score: 425 points
Of the 46 features mentioned in the survey, you have used 39 and
heard of 7 more, which puts you in the top 1% of all respondents. Well
done!

240

Lea Verou, PhD @lea.verou.me · 25/06/2026

Was thrilled to see Chrome add vertical tabs, but now I’m struggling to get used to them. Intellectually, I still think they are a UX improvement, but damn, change aversion is real. Those of you who use vertical tabs, did you have a similar experience? How long did it take you to get used to them?

19241

Lea Verou, PhD @lea.verou.me · 22/06/2026

Just took #StateOfCSS, DAYS before closing! 😱 Take it now ➡️ stateofcss.com/en-US If you write CSS, this is your highest-ROI 30m this year: results feed directly into browser roadmaps! Partial responses ok. Can pause/resume across multiple devices. My looong wishlist below, for fun+inspiration 👇😅

130

Lea Verou, PhD @lea.verou.me · 22/06/2026

Zoe, 7 years old, at her first speaking gig at #CSSDay 2026, being interviewed by MC @ohhelloana.blog 😅🥹 Thanks everyone @cssday.nl for being so nice to her. She had a blast! Special thanks to @ohhelloana.blog and @sjoy.lol who are now some of her favorite people. ❤️

3532

Lea Verou, PhD @lea.verou.me · 22/06/2026

See how my Day 2 magenta dress looks brighter than my Day 1 turquoise dress? It wasn’t! RGB gamuts are wider at magentas than turquoises. Gamut mapping is the reason you can still see it was turquoise, even though you can't see the real color 😊 Pic: P3 gamut @ L=73% apps.colorjs.io/gamut/?color...

The P3 gamut at L=0.73, pic from https://apps.colorjs.io/gamut/?color=oklch(73%%200.22186%20201)

1102

Lea Verou, PhD @lea.verou.me · 13/06/2026

The people of #cssday have spoken: we want gamut mapping and we want it NOW!

134610

Lea Verou, PhD @lea.verou.me · 12/06/2026

As @una.im just mentioned in her #cssday talk, the CSS WG recently resolved to insert a ⓘ after EVERY SINGLE INTEREST INVOKER on touchscreens. Here’s a mock of what this would look like for bsky. This is the issue to let the CSS WG know what you think: github.com/w3c/csswg-dr...

78016

Lea Verou, PhD @lea.verou.me · 01/06/2026

Wow you two are early — my panicking is scheduled to start tomorrow. 😅 There:

Screenshot of Google Calendar with one item starting at 9am: CSS Day START PANICKING

1200

Lea Verou, PhD @lea.verou.me · 16/05/2026

The current state of AccentColor/AccentColorText: 4 browsers, 4 different color pairs From left to right: Chrome 148 (stable), Chrome 150 (canary), Safari, Firefox. Details in thread.

1385

Lea Verou, PhD @lea.verou.me · 02/05/2026

TIL crows only *look* black to us — they’re actually very colorful in ways human eyes are unable to perceive. 🤯 Remember that next time people can’t see your “colors”. Some colors just require different eyes.

1121233

Lea Verou, PhD @lea.verou.me · 26/03/2026

🚨 Want mixins in CSS? Help the CSS WG by telling us what feels natural to you! Look at the code in the screenshot. What resulting widths would *you* find least surprising for each of div, div > h2, div + p? Polls: ┣ Github: github.com/LeaVerou/blo... ┗ Mastodon: front-end.social/@leaverou/11...

@mixin --foo(--arg <length>) {
@result {
&, & > h2, & + p {
width: var(--arg);
}
}
}

div {
@apply --foo(10em);
font-size: 10px;
}
div > h2 {
font-size: 20px;
}
div + p {
font-size: 30px;
}

95124

Lea Verou, PhD @lea.verou.me · 18/03/2026

True, it’s not always WebKit that’s behind! In fact, here is some data: webstatus.dev/stats#missin... As of today, the number of features blocked by each browser is: - Safari: 55 - Firefox: 50 - Chrome: 12 I’ll let you draw your own conclusions…

1252

Lea Verou, PhD @lea.verou.me · 01/03/2026

With alt text (posted too soon!):

Me: ok yeah I think we'll need VTs after all
Claude: Before going with VTs — have you considered @property? Registering --tilt as <angle> would make it natively transitionable, and since both the parent and children read the same variable, they'd stay in sync (no double-animation issue like with raw transition: transform):

@property --tilt {
syntax: "<angle>";
initial-value: deg;
inherits: true;

Then just transition: --tilt .4s ease-out on .equation-display. Much simpler than VTs for this specific case. Or do you want VTs because other things should animate too (factors moving, etc.)?

080

Lea Verou, PhD @lea.verou.me · 01/03/2026

I’ve instructed Claude to question anything I ask it to do and to always use modern web technologies, and it’s glorious. 😀

61164

Lea Verou, PhD @lea.verou.me · 05/02/2026

Good news everyone: Style queries are coming to Firefox, making them finally Baseline!

211117

Lea Verou, PhD @lea.verou.me · 28/01/2026

🎉 Live from the CSS WG F2F: We just agreed to support multiple borders and outlines per element, comma-separated! But we can’t decide on the order: inside out or outside in? What feels more natural to you, A or B? (it needs to be the same across borders and outlines or different box-sizing values)

10214531

Lea Verou, PhD @lea.verou.me · 23/12/2025

Lea: Oooooh, import.meta.resolve() is writable! I wonder if… 💡 #JS engine: Nope! Just stop Lea 😒 😅

$let _resolve = import.meta.resolve.bind(import.meta); import.meta.resolve = function(specifier) { if (specifier === "foo") { specifier = "./foo.js"; } return _resolve(specifier); } console.log(import.meta.resolve("foo")); // works! import("foo").then(console.log); // nope$

4130

Lea Verou, PhD @lea.verou.me · 14/12/2025

🔥 Hot take: dashed borders should never be used as a design system default. Dashed lines tend to indicate that something is removable or not quite there. Using them as decoration is as confusing as making text blue and underlined as a stylistic choice. Pictures: dashed borders used correctly

5521

Lea Verou, PhD @lea.verou.me · 03/12/2025

💡 TIL: You can highlight a JS template tag as another language by prepending it with a comment like /* html */ in at least VS Code and editors wrapping it like Cursor. How did I find out? Cursor suggested it when I tried to do a more convoluted const html = String.raw; const template = html`…

8465

Lea Verou, PhD @lea.verou.me · 01/12/2025

Appception: British Airways’s app using a WebView to embed their website, which recommends installing the app I’m already on 😅

41477

Lea Verou, PhD @lea.verou.me · 24/11/2025

Just a reminder that what seems obvious now may not seem obvious in two weeks. Be better than past Lea. 🫠

2280

Lea Verou, PhD @lea.verou.me · 29/10/2025

The #JS utility you never knew you needed 😂 Create multiple Symbols in one go with this Proxy-based one liner.

// util.js
export const createSymbols = new Proxy({}, {
get (target, prop) {
return Symbol(prop);
},
});

// Use like:
const {a, b, c} = createSymbols;
console.log(a, b, c)
// Symbol("a"), Symbol("b"), Symbol("c")

3675

Lea Verou, PhD @lea.verou.me · 29/10/2025

In today’s episode of Useless Info I just learned about #JS: Turns out you cannot subclass Proxy (because it has no prototype). Nice try Lea 🥲

2230

Lea Verou, PhD @lea.verou.me · 27/10/2025

Yes, in all Safari the proxy is slower, though not tremendously so in desktop:

010

Lea Verou, PhD @lea.verou.me · 27/10/2025

After years of internalizing that JS proxies are suuuper slow, I was surprised to find that in Chrome, they seem faster for running function side effects than simply wrapping a function: jsbenchmark.com#eyJjYXNlcyI6...

4428

Lea Verou, PhD @lea.verou.me · 26/10/2025

When your context menu has this many options, it's time rethink your overall #UI

4491