iiinova — where your digital self keeps evolving

I took a short break, but now it's Web Weekly time again! 🥂 I'm just about to write edition 200. 😱 If you're into WebDev, Frontend work, and browser "stuff", you should check it out. 👇 webweekly.email

3254

Stefan Judis @stefanjudis.com · 15/09/2026

The HTML `head` is often forgotten and barely touched. Manuel has some good stuff to include in his 2026 boilerplate. matuzo.at/blog/2...

070

Stefan Judis @stefanjudis.com · 15/09/2026

If you're dealing with AI slop replies, you might appreciate these links. 👇 www.rickmanelius... dontpastetheai.com

AI;DR - abbr. AI; didn't read. Reply earned when AI-written text is sent with zero human-editing.

1150

Stefan Judis @stefanjudis.com · 14/09/2026

Quick reminder, if you're working on a SaaS product that requires a login, please check if you've defined the well-known URL to change passwords. Password managers will check `/.well-known/change-password` to offer a quick way to change passwords. www.w3.org/TR/ch...

Code: GET /.well-known/change-password HTTP/1.1 Host: example.com HTTP/1.1 302 Found Location: https://example.com/account/security/password

617919

Stefan Judis @stefanjudis.com · 14/09/2026

With Firefox 155, released September 1st, the `progress()` CSS function became Baseline newly available. 🎉 developer.mozill...

Support matrix for Firefox 155 showing that `progress` went into baseline.

0170

Stefan Judis @stefanjudis.com · 11/09/2026

Have you seen all these new HTML elements entering the platform? There's `<geolocation>`, `<usermedia>`, and `<install>`, just to name a few. Granted, many of these are Chromium-only, but I like where we're heading. blog.master.dev...

Code: <usermedia id="media-ctrl"> <button>Enable camera and microphone</button> </usermedia>

091

Stefan Judis @stefanjudis.com · 11/09/2026

Here's Jake sharing yet another detail about custom properties that I'm sure not many people know about. It's funny how many footguns can show up in a "simple variable system". Jake's article is great. I'm sure you'll learn something! jakearchibald.co...

Code: <div></div> <div class="second-item"> <p>…</p> </div> .second-item { --index: sibling-index(); & > :first-child { /* 👇 what's `scale`? */ scale: var(--index); } }

261

Stefan Judis @stefanjudis.com · 10/09/2026

Interop for 2026 is in full swing. Chromium is leading and has almost finished all its 2026 promises. We're in September, so that's cool. Firefox and Safari aren't that far behind. We can now all submit focus areas for next year. wpt.fyi/interop-...

Graph showing the support of interop features across browsers. Chrome/Edge are leading, followed by Firefox and Safari.

1140

Stefan Judis @stefanjudis.com · 10/09/2026

The CSS working group came up with a new way to select prefixed classes. The Class Prefix Selector `.btn-*` matches `btn-primary`, `btn-secondary`, and whatever `btn-` class comes next. www.bram.us/2026...

Code: /* Matches `btn-primary`, `btn-secondary`, ... */ .btn-* { /* ... */ }

3182

Stefan Judis @stefanjudis.com · 09/09/2026

And the new Web Weekly is about to hit all the inboxes. 🫣 This time, it includes Interop 2027 focus areas, lots of new HTML elements, an explanation of ESM resolution, and the `progress()` CSS function going Baseline. Enjoy! webweekly.email/archive/web-...

Web Weekly 199

- Server-timing
- Interop 2027 focus areas
- Class Prefix Selector (.prefix-*)
- ESM resolution explained
- New HTML elements
- @property computation

0154

Stefan Judis @stefanjudis.com · 09/09/2026

`autocorrect` is Baseline Newly available! It accepts "on", "off", and "" (same as "on"). Browsers default to "on", so it's mostly a matter of turning it off. Doesn't apply to URL, email, and password inputs. developer.mozill...

Code snippet: A text input for a username with autocorrect="off" and a textarea for a biography with autocorrect="on", each with a label. A "Newly available" Baseline badge sits in the top right corner.

0144

Stefan Judis @stefanjudis.com · 07/09/2026

I'm just about to sit down to finalize Web Weekly 199. 😱 If you're into WebDev, Frontend work, and browser "stuff", you should check it out. 👇 webweekly.email

0132

Stefan Judis @stefanjudis.com · 25/08/2026

HTML reminder: if you're dealing with elements that shouldn't be accessible or reachable at all, the `inert` attribute helps out! developer.mozill...

Code snippet: a div with the inert attribute containing a label and a button that says I am inert

2304

Stefan Judis @stefanjudis.com · 24/08/2026

I'm pretty sure I read this post years ago (seems to have been extended since) and I'm still following some of these rules. Perfect stuff for people that don't have an eye for design... 😅 anthonyhobday.co...

Text: Visual design rules you can safely follow every time. You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are safe to follow every time.

090

Stefan Judis @stefanjudis.com · 24/08/2026

There's nothing to see here, it's just a browser running in your browser. 😅 developer.puter....

Firefox running inside a browser window.

49215

Stefan Judis @stefanjudis.com · 21/08/2026

Have you ever noticed that "things become unclickable" when a view transition is running? You can work around this behavior with some CSS or scoped view transitions... 👇 master.dev/blog...

Code snippet: CSS disabling view-transition-name on :root and setting pointer-events none on ::view-transition

0151

Stefan Judis @stefanjudis.com · 21/08/2026

Here's Temani yet again doing Temani things explaining how to tweak and adjust the overflow of individual images using `object-fit` and `object-position`. It's a great read to understand `img` fundamentals. master.dev/blog...

A container with a red border showing that an image can overflow.

0104

Stefan Judis @stefanjudis.com · 20/08/2026

If you're intimidated by the Chrome DevTools performance tools, you'll like this one. It's a nice explainer about all the details you need to know! perf.reviews/pro...

0100

Stefan Judis @stefanjudis.com · 20/08/2026

I'd say I was pretty aware of all the possibilities and information my browser shares about me, but it's still wild to see all this data in black and white. :/ kuber.studio/cookie

Text explaining that websites can fingerprint and identify you even after declining cookie banners because modern browsers don't need cookies anymore.

0165

Stefan Judis @stefanjudis.com · 19/08/2026

I dig this a lot! Edge now ships an experimental feature that warns you about and monitors network activity that isn't optimized, like uncompressed assets or large images. www.debugbear.co...

Code snippet: Document-Policy and Reporting-Endpoints headers configuring network efficiency guardrails

061

Stefan Judis @stefanjudis.com · 19/08/2026

I really like this comparison. Daniel put CSS states (`:focus-visible`, `:popover-open`, `:fullscreen` etc) next to possible JavaScript implementations. He also went into the fairly new `event-trigger` CSS props and that's some fancy stuff! css-tricks.com/c...

Code snippet: a focus event listener checking if event.target matches :focus-visible

052

Stefan Judis @stefanjudis.com · 18/08/2026

And the new Web Weekly is going out in a few minutes. 🥂 This time it includes the Git `history` command, Edge's new network efficiency guardrails, CSS gap decorations, and some `img` element magic. Enjoy! webweekly.email/archive/web-...

Web Weekly 198

- object-fit & object-position
- Unblocking view transitions
- Gap decorations
- @keyframes in the cascade
- The experimental history command
- The inert attribute

0164

Stefan Judis @stefanjudis.com · 17/08/2026

I'm just about to sit down to finalize the next Web Weekly edition. It'll hit tonight. 🥂 If you're into WebDev, Frontend work, and browser "stuff", you should check it out. 👇 webweekly.email

0141

Stefan Judis @stefanjudis.com · 13/08/2026

Guess what you'll find at clickclickclick.click I can't help it; I just love people who put out silly things on silly domains. ❤️ clickclickclick....

2101

Stefan Judis @stefanjudis.com · 12/08/2026

Here's a quick party trick: did you know that you can use Intl to format numeric values with their units? Yes, I'm fun at parties... 🫣 www.stefanjudis....

Code snippet: new Intl.NumberFormat('fr-FR', { style: 'unit', unit: 'kilobyte', unitDisplay: 'long' }).format(123456) returns '123 456 kilooctets'.

0161

Stefan Judis @stefanjudis.com · 12/08/2026

Well, that's what I call yet another fancy personal website. 👏 dustin.works

A classical operating system dialog showing different programs: blog, click, globe, etc.

6812

Stefan Judis @stefanjudis.com · 11/08/2026

Bramus is working on new ways to make view transitions easier to handle in an MPA scenario. This is in its very early stages, but look at this funky CSS. He's looking for feedback, too! www.bram.us/2026...

Code snippet: an @navigation CSS rule matching from --home to --about with a nested @view-transition block.

2265

Stefan Judis @stefanjudis.com · 11/08/2026

Here's a good explainer on the containertiming attribute, currently running as a Chrome Origin trial. If you're not knee-deep into perf topics, this post includes more than one rabbit hole to jump into. csswizardry.com...

Code snippet: an img element with elementtiming='product-image' and a section element with containertiming='product-summary'.

011

Stefan Judis @stefanjudis.com · 10/08/2026

I've heard about the text-scale meta element but the preferred-text-scale CSS env var was news to me. 🫣 Josh was involved in the spec and shares how a particular BBC problem led to this new font size approach. www.joshtumath.u...

Code snippet: .button { font-size: calc(16px * env(preferred-text-scale)); }

1141

Stefan Judis @stefanjudis.com · 10/08/2026

We're not entirely there yet in terms of browser support, but the new closedby property on the dialog element is already in Safari TP, so it's about time to look into it. developer.mozill...

Code snippet: a dialog element with the closedby=any attribute.

291

Stefan Judis @stefanjudis.com · 07/08/2026

Chrome 150 shipped the new text-fit property. There are no real MDN docs, and the spec would be the best we've got if it weren't for Krijn, who documented all the options with visual examples. krijnhoetmer.nl...

Code snippet: p { text-fit: grow per-line-all; }

0175

Stefan Judis @stefanjudis.com · 07/08/2026

How could you stack on top of an element with the highest possible z-index (2147483647)? Correct! You use CSS infinity to get on top of the highest stack. Adam lists some more creative infinity use cases. nerdy.dev/css-in...

Code snippet: .tippy-top-of-stacking-context { z-index: calc(infinity) }

1130

Stefan Judis @stefanjudis.com · 06/08/2026

With Chrome 151, soft navigations entered the mainstream. If you haven't heard the term, a soft navigation is anything that: - is initiated by a user action - results in a visible URL change - results in a visible paint developer.chrome...

Code snippet: const observer = new PerformanceObserver(console.log); observer.observe({ type: 'soft-navigation', buffered: true });

2175

Stefan Judis @stefanjudis.com · 06/08/2026

The "Await dictionary of Promises" ECMAScript proposal moved to stage three so that we'll finally be able to await objects. Can't wait! github.com/tc39...

Code snippet: const { shape, color, mass } = await Promise.allKeyed({ shape: getShape(), color: getColor(), mass: getMass() });

2272

Stefan Judis @stefanjudis.com · 05/08/2026

The State of Devs survey is open for participation. There's a lot of uncertainty and, frankly, occasionally I'm navigating a full-blown identity crisis. I'm very curious about whether I'm alone with these feelings and how bad the majority really feels... stateofdevs.com...

Pixel-art banner reading 'The State of Devs 2026', surrounded by icons and topic tags: Workplace, Career, Health, Hobbies, Mental State, Politics, AI, and Opinions.

3125

Stefan Judis @stefanjudis.com · 05/08/2026

And the new Web Weekly is about to hit all the inboxes. 🫣 This time it includes CSS `infinity`, the `closedby` attribute, measuring soft navigations, and recent ECMAScript updates. Enjoy! webweekly.email/archive/web-...

Web Weekly 197

- elementtiming & containertiming
- Promise.allKeyed()
- calc(infinity)
- env(preferred-text-scale)
- Measuring soft navigations
- closedby=any

1224

Stefan Judis @stefanjudis.com · 27/07/2026

I'm just about to sit down to write the next Web Weekly edition. 🥂 If you're into WebDev, Frontend, and browser "stuff", you should check it out. 👇 webweekly.email

061

Stefan Judis @stefanjudis.com · 20/07/2026

That's quite a journey to "improve" the sizing behavior of customizable selects (Chromium-only so far). Jake gets into anchor positioning, `stretch` and `fit-content`, and `calc-size`. jakearchibald.co...

Code snippet: .custom-select::picker(select) { min-block-size: calc-size(fit-content, min(size, 12em)); }

091

Stefan Judis @stefanjudis.com · 17/07/2026

If you're dealing with SVG icons you probably know the pain of overwriting colors. There's a new spec in the making that allows controlling CSS variables from "the outside". And it's shipping in Firefox already! drafts.csswg.org...

Code snippet: img { link-parameters: param(--color, green); } and .foo { background-image: url("image.svg", param(--color, green)); }

613725

Stefan Judis @stefanjudis.com · 16/07/2026

FYI, Chrome ships a new `usermedia` element. developer.chrome...

Code snippet: <usermedia id="media-ctrl"> wrapping a button labeled "Enable camera and microphone".

0102

Stefan Judis @stefanjudis.com · 16/07/2026

There's an unfortunate disconnect between `color-scheme` and the `prefers-color-scheme` media query. This tripped me up multiple times. So what do you do about it? Ollie's post has some web platform answers. olliewilliams.xy...

Code snippet: @container style(--dark: false) { .card { box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); } }

152

Stefan Judis @stefanjudis.com · 15/07/2026

I'm still wondering about anchor positioning use cases beyond the tooltip example. Emil explains how multiple anchors help out with creating clickable card overlays. Fancy stuff! thatemil.com/blo...

Code snippet: .card { anchor-name: --card; anchor-scope: --card, --card-actions; } with a nested .secondary-actions rule setting anchor-name: --card-actions.

161

Stefan Judis @stefanjudis.com · 14/07/2026

Safari shipped `display: grid-lanes` and Chromium's working on it. But what does it mean for accessibility when grid items reorder themselves? Can an adjusted `flow-tolerance` help? Manuel cautiously proposes a very interesting solution. matuzo.at/blog/2...

Code snippet: .grid-lanes { display: grid-lanes; grid-template-columns: repeat(3, 1fr); flow-tolerance: 0; }

061

Stefan Judis @stefanjudis.com · 13/07/2026

I tried to sit this out for as long as possible, but I'm now running Tahoe. After all this time, how can this border radius situation still not be fixed? I know it shouldn't, but this really really bugs me. 👀

Different border radius of overlapping apps.

370

Stefan Judis @stefanjudis.com · 13/07/2026

And the new Web Weekly is about to hit all the inboxes. 🫣 This time it includes lots of anchor positioning, customizable selects, and ECMAScript 2026 updates. Enjoy! webweekly.email/archive/web-...

Web Weekly 196

ECMAScript 2026
- Anchor positioning tricks
- Customizable selects
- <usermedia>
- TypeScript 7 is out!
- Linked CSS parameters

0196

Stefan Judis @stefanjudis.com · 13/07/2026

It's been a while, but another Web Weekly will hit all the inboxes tonight. If you're still into webdev and browser news, you should check it out. 🫣 webweekly.email

0141

Stefan Judis @stefanjudis.com · 26/06/2026

TIL recap: Did you know that container size queries can detect landscape and portrait ratios? www.stefanjudis....

An interactive component showing an image frame and a handle telling you to resize its container.

170

Stefan Judis @stefanjudis.com · 26/06/2026

I know many of my followers aren't big AI fans. Still, the new MDN MCP server is super handy for pulling up docs and browser support data. developer.mozill...

Claude conversation asking for browser support of container style queries.

161

Stefan Judis @stefanjudis.com · 25/06/2026

Here's the Baseline update from this week's Web Weekly. CSS `field-sizing` is finally baseline newly available with Firefox 152 supporting it now, and native CSS nesting is now widely available. Time flies! developer.mozill...

Code snippet: 'Newly available' card with `input, textarea { field-sizing: content; }`, and 'Widely available' card with CSS nesting.

030

Stefan Judis @stefanjudis.com · 25/06/2026

I've got no idea how I could have missed that, but streaming HTML might become a thing. Granted, it's very early days still but this is exciting. It's yet another example of framework patterns entering the web! developer.chrome...

Code snippet: <div> <?start name="another-placeholder"> Loading… <?end> </div> ... <template for="another-placeholder"> Here is some <em>HTML content</em>! </template>

3210