iiinova — where your digital self keeps evolving

Reposted by Stefan Judis

Manuel Matuzović @matuzo.at · 28/09/2026

This advent calendar is your chance to share your knowledge with a large audience. You have 5 more days to submit your ideas. First-time authors are welcome!

01720

Reposted by Stefan Judis

Manuel Matuzović @matuzo.at · 17/09/2026

Friends, it's that time of the year: Once again, I'm asking you to help me create another amazing HTMHell Advent Calendar by writing about HTML. The CFP is open until October 3! docs.google.com/forms/d/e/1F...

docs.google.com

HTMHell Advent Calendar

Hello, my dear friends of high-quality markup! We're getting closer to the last quarter of 2026, which means that the HTMHell Advent Calendar is getting closer, too. Last year, once again, you contrib...

34936

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

Reposted by Stefan Judis

Andy Bell @bell.bz · 15/09/2026

I run @piccalil.li and having publications like CSS-Tricks around is really important. We all help and challenge each other and the result is a better ecosystem for everyone else. That's the whole point! I really hope this situation gets resolved, or CSS-Tricks gets a new owner that cares.

geoffgraham.me

Why CSS-Tricks Has Been Quiet Lately - Geoff Graham

Because I haven't published anything to it since August 31. And no one else has either. That's not a super long time to go silent but it is for a site that

18510

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

617918

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

Reposted by Stefan Judis

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

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

Reposted by Stefan Judis

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 · 18/08/2026

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

Reposted by Stefan Judis

Dan Moore is at Monktoberfest @mooreds.com · 11/08/2026

Looking to hear from more devs who write? @brittanyellich.com put together this starter pack: go.bsky.app/AnM2t7r

1245

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

Reposted by Stefan Judis

Andy Bell @bell.bz · 06/08/2026

It's been a while since I've done a people looking for work thread. If you're looking for work, put what you do and what you're looking for (full time, freelance etc) as a reply. Companies: get hiring people!

3610559

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

Reposted by Stefan Judis

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

Reposted by Stefan Judis

Sunkanmi Fafowora @sunkanmifafowora.bsky.social · 05/08/2026

Guysssssssssssss. What are the best web dev newsletters out there? Let's shout out our favs! They do deserve some appreciation in the comments section.💯

163

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

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)); }

613724

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

Heads up! The new `QUERY` HTTP method moved from `draft` to `proposed standard`. Protocol changes don't happen very often. www.rfc-editor.o...

180