DEV Community: Web Weekly

Web Weekly 171 — ::details-content goes baseline, the `closed-by` attribute, and `field-sizing: content`.

Stefan Judis — Tue, 21 Oct 2025 04:10:00 +0000

Guten Tag! Guten Tag! 👋

Do you know what core web vitals metrics work across browsers? Have you used the closed-by attribute? And is AI really saving time?

Turn on the Web Weekly tune and find some answers below. Enjoy!

Kate listens to "Dick Around" by Sparks and says:

"I'm not saying this is my work anthem, but every day, every day, every night, every night..."

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are five more songs left in the queue.

Last week, I opened Web Weekly with CSS functions (@function) and how they can be used to create a custom --light-dark() function. I learned some things from the reactions.

The existing light-dark() function only works with color values. Why's that?

Bramus blogged about it back in 2023 and the answer is to ship something. The main idea that led to light-dark() was to have a flexible schemed-value() function.

Specifications are complicated and folks preferred to ship light-dark() over figuring out how to have a highly dynamic function which might have taken "a while". If you want to follow further conversations, here's a spec issue discussing how light-dark() could work for images.

But are there other ways to change non-color styles based on the current color scheme? Ana advocated for a boolean toggle trick.

To be honest, I'm not the biggest fan of these because they're unreadable in my opinion, but hey... use what works for you.

If you enjoy Web Weekly, share it with your friends and family.

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

A quick "repost" really helps this indie newsletter out. Thank you! ❤️

Something that made me smile this week

I admire people that take the time and effort to create truly unique online portfolios. This post highlights 6 personal websites of which I really don't want to know how long it took to create them.

Stand out

No code

Are editor themes too "loud"?

I've been happily using the seti theme for years because it's colorful and bright. Niki argues that most themes out there highlight too much. And what should I say, I think he's right and I'll give another theme a try!

Calm your editor

`closed-by=any`

Adam argues that there aren't enough people talking about the closed-by attribute. And he's right!

closed-by is the declarative way to tell open dialogs when they should close. The property doesn't work in Safari yet, but you can bring in a short JS snippet.

Declare

When the virtual keyboard messes with your viewport

Maybe you know the problem, you're on your phone, want to edit some data, the virtual keyboard opens and whoops, important fixed-positioned elements are gone. Where did they go?

Bramus explained how the different viewports (yes, multiple!) are affected by the keyboard and how the fairly new interactive-widget meta element value can help.

Embrace the view(port)

`header` and `footer` elements change their roles

You're probably using header and footer elements to improve HTML semantics and accessibility, but do you know that the elements don't always get their initial ARIA roles assigned?

Give some structure

Wowza! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – spurious correlations

I've got nothing but love for the person maintaining this site highlighting correlations that don't look "quite right".

Check the numbers

`field-sizing` works for `input` and `select` elements, too!

Here's a quick one: have you heard about the field-sizing property? The new prop allows form controls to grow depending on their content. I thought this will only be about textareas, but it works for input and select elements, too!

Grow!

25 CSS you should know

Here's Adam giving a whirlwind tour about the latest and greatest CSS features. It'll be well worth your time!

Watch the talk Check the slides

Is AI really saving time?

Theoretically, this post belongs in the "No code" section but Hidde phrased all my thoughts way better than I could, so that I want to highlight it. If you question AI time savings, you should read it!

Evaluate

More perf metrics in more browsers!

When Google started pushing the Core Web Vitals metrics, they were pretty much a Chromium-only thing. Which was a bummer, because then we couldn't measure the experience of people using other browsers.

The competition is slowly catching up though! Let me share some web vitals news:

Firefox 144 shipped interactionId as part of the PerformanceEventTiming so that you can now evaluate the INP metric
Safari TP 229 supports INP
Safari TP 230 supports LCP

If you now want to gather all these metrics across browsers, use Google's web-vitals library which should work for all browsers. Happy measuring!

Yet another CSS reset

Paweł joined the club of people blogging about their CSS reset preferences (I'm still flying without... 🫣). The post includes some good opinions and lots of links to go deeper!

Reset

Random MDN – `Object.freeze()`

From the unlimited MDN knowledge archive...

Did you know that you can freeze JavaScript objects? Now you do. 🫵

Freeze!

New on the baseline

Did you already celebrate that ::details-content went into the baseline with Firefox 143? If not, now's the time!

Spice up all these details

Three valuable projects to have a look at

bodadotsh/npm-security-best-practices – How to stay safe from NPM supply chain attacks.
lirantal/npq – Safely install npm packages by auditing them pre-install stage.
bgreenwell/doxx – Expose the contents of .docx files without leaving your terminal.

A new Tiny Helper

I must admit, this one is really cool! You can enter "Make Graph" put some data in and get some graphs out. I can totally see myself using this to create visualizations without code or Excel!

Graph it!

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

You've probably noticed that I'm an RSS fan boy, so it's no surprise that Molly's post "Curate your own newspaper with RSS" was right down my alley.

Using RSS is a way to regain control over the information you read online.

Do you enjoy Web Weekly? | Did you learn something from this issue?

❤️ If so, join 25 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

🧢 Web Weekly newsletter 152 — Interop 2025, console.context() and Number.POSITIVE_INFINITY

Stefan Judis — Wed, 19 Feb 2025 04:14:43 +0000

Guten Tag! Guten Tag! 👋

What can we expect from Interop 2025? How can you give your console.log statements more context()? Is using gifs generally a good idea?

Turn on the Web Weekly tune and find all the answers below. Enjoy!

Pawel listens to “9th Wonder - LoveKiss”:

I can listen to this beat in a loop for the whole day. Just so good!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are three more songs left in the queue.

If you enjoy Web Weekly, let others know by reposting it on your favorite social network. It really helps me grow this newsletter into something "real". 🫣

🦋 Bluesky
🐘 Mastodon
💼 Linkedin

Thank you! 💙

The browser makers came together and decided on the focus areas of Interop 2025.

And if you now think, "Oh well... again, new stuff!?", I get it. However, the features included in Interop aren't browser APIs working in a single browser for the next decade. The promise is that all browsers support the listed features this year. These Interop features are supposed to enter the web soon'ish. For realz.

The Interop focus areas this year include:

CSS anchor positioning
Core Web Vitals
::details-content
import ... with { type: "json" }
CSS @scope
View Transitions
and many more things...

The "official Interop 2025 docs" are a good read, so check them out!

But what's the current state and where are we today?

Unsurprisingly, Chromium is leading the way in terms of new features, but I expect that things will move fast.

I'm quite happy with Interop 2025, but if you're game for some critical thoughts, of course, Alex Russel never disappoints and shares some spicy takes.🌶️

Something that made me smile this week

I resisted for over a year and didn't put stickers on my computer, but these are just too good!

Be a fake developer

New on the blog

TIL: How to iterate over TypeScript union types

Let's stop using animated gifs

Oldie but goldie: Martin makes some good points against using animated gifs.

Reconsider

LCP !== LCP

Did you know that not every element is considered a valid LCP element? Or are you aware that Chromium and Firefox evaluate the LCP elements differently? Matt explains the details.

Understand LCP

Why we should consider searchability

How do you search for things on a web page? You might CMD+f all the things. If you do, you've probably also encountered situations when a simple text search doesn't work.

Schepp explains how to make content findable for the built-in browser search and assistive technology using hidden="until-found" and some CSS trickery.

It's an excellent post, and I wonder if this approach will become a .sr-only class replacement.

Make things searchable

`console.context()`

Today I learned that the Chromium console includes a context() method that allows you to create loggers, which you can easily filter in the JavaScript console.

Filter your logs

You're halfway through! Would you enjoy getting Web Weekly straight to your inbox?

The wonderful weird web – Floor796

Floor796 is an absolute classic created in 2018, and the animated space station includes areas with a gazillion tiny details. The fun thing: the project is still being worked on and extended.

Discover things

Is AI hindering new tech adoption?

I'm really trying to lean into some AI coding features, but with all these new browser features shipping daily, I would be lying if I said I'm not concerned about the AI knowledge cut-off.

Be aware of the new stuff

Speculation rules on `google.com`

You might have heard of the Chromium-only Speculation Rules. They're supposed to be a prefetch / prerender alternative.

I learned that Google Search ships them in production, and their implementation includes many tips and tricks about things to consider. I mean look at this snippet, "anonymous-client-ip-when-cross-origin", what? 🤯

Speculate

A 💙 for CSS grid

I just love it when I see CSS grids being used for more than putting columns next to each other.

Power up your grids

A massive Node.js ecosystem update

This news might only be important for package maintainers, but after all these years of dancing the endless CommonJS vs ECMAScript modules dance, it's finally time to embrace modules.

Node.js 20 and higher versions can now require ECMAScript modules, which means that when Node.js 18 reaches the end of life in April, everybody can drop all these build steps compiling multiple module systems and "just ship" modules.

Go all-in with modules

Random MDN – `Number.POSITIVE_INFINITY`

From the unlimited MDN knowledge archive...

Here's one of the many famous JavaScript quirks: did you know there's a static data property called POSITIVE_INFINITY? Now you do.

Discover infinity

TIL recap – media query boolean contexts

Here's a trick question: what values will be matched for the prefers-contrast media feature query when you omit the value and use the so called "boolean context"?

Query features!

Find more short web development learnings in my "Today I learned" section.

New on the baseline — Styling scrollbars

Short'n'sweet: if styling the scrollbar is your jam, scrollbar-color and scrollbar-width work across modern browsers now!

Be on brand

Three valuable projects to have a look at

yassinebenaid/bunster – Compile shell scripts to static binaries.
GyulyVGC/sniffnet – Comfortably monitor your Internet traffic.
PatrickJS/awesome-cursorrules – A list of awesome .cursorrules files.

A new Tiny Helper

Addy continues his tooling journey! There are now a tool to remove backgrounds from images, a tool to compress images and the newest member — a tool to compress videos.

Compress your videos

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

In the spirit of the web platform, here's some wisdom from Harry:

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 from fast.

Did you learn something from this issue?

💙 If so, join 21 other Web Weekly readers and give back with a small monthly donation on Patreon or GitHub Sponsors.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

🧢 Web Weekly 151 — `popover` enters the baseline!

Stefan Judis — Wed, 12 Feb 2025 18:49:33 +0000

Guten Tag! Guten Tag! 👋

Do you know what the European Accessibility Act will mean to you? Are view transitions (SPA or MPA) ready for production yet? Have you heard that popover is now on the baseline?

Turn on the Web Weekly tune and find all the answers below. Enjoy!

Khaled listens to "Cinematic Orchestra feat. Patrick Watson - To Build A Home"

I listen to this song every now and then for about 14 years now!

Do you want to share your favorite song with the Web Weekly community? Hit reply; there are two more songs left in the queue.

I'm a day late, so I'll keep this week's intro short, but I want to welcome all the new subscribers who joined last week! 👋

It's great to see Web Weekly growing, and if you have any comments, questions, or want to send over "good web stuff"™, let me know!

I'm all ears (eyes? 🤷) and enjoy every bit of webdev chatter in my inbox!

With that — let's go!

Something that made me smile this week

I'm unsure if getting scared is the right approach to breaking social media addiction, but if you try TabBoo let me know how it went.

Break bad habits

New on the blog

The European Accessibility Act (EAA)

The European Accessibility Act will go into effect on June 28, 2025, and Martijn shares what you need to know.

Understand the EAA

On native CSS nesting

Andy argues that browsers shouldn't have shipped native CSS nesting because it's a solely developer convenience feature that also comes with some footguns.

I'm unsure if I agree with this statement, but the article includes wise words worth pinning on your monitor. When you write code, ask yourself:

Could a junior developer understand this code?

💯 Future me will smartass the heck out of this idea. Get ready!

Understand nesting

It's about people

This page isn't new, but it's so valuable. The WEC Web Accessibility Initiative put together user stories about making digital products more accessible.

Bookmark it for the next time when someone tells you that accessibility is "about X".

Build for people

How to favicon in 2025

It's the time of the year again when the wonderful Martians research how to load a favicon the best way. 👆 Do the necessary spring cleaning if your sites include more HTML than this to load a favicon.

Clean up your favicons

The wonderful weird web – Stripe's Black Friday stats

Stripe must be doing very well when they have the time and money to build info pages like this one. 👆 Either way, it's fun to play with all the Black Friday stripe transaction data.

Check the stats

Stripe also released this fabulous developer portal not too long ago.

Replace your animation libs with `startViewTransition()`

In my opinion, view transitions are the biggest update the web has seen in many years because we can build so many cool effects with so little effort now.

I used startViewTransition() to rebuild a navigation component that relied on a heavy JS animation lib with ~50 lines of CSS.

Read the post Watch the video

Get started with MPA view transitions

Cross-document view transitions allow us to animate and transition elements across good old HTML navigations. The new @view-transition at-rule has been supported in Chromium for a while, and Safari started supporting it last December.

If you want to spice up your static HTML sites, Kevin and Bramus live coding session will get you up to speed!

Transition across pages

Managing focus

Ollie explains the differences between :focus and :focus-visible, and why the focus() DOM method needs an update.

Focus!

Some WebDev Trivia...

I admit I've never thought about this and didn't know. But do you know?

Travel in time

How to start a blog

Unsurprisingly, blogging had a huge impact on my career (heck, my life even?).

Blogging helps me order my thoughts, learn new things, become a better writer, get invited to more job interviews, connect with people — the list goes on and on. I should probably blog about the benefits of blogging.

If that sounds convincing and you wonder how to get started, here's some solid advice.

And don't forget to send me your RSS feed if you kick things off and start a new blog.

Random MDN – `:user-valid` / `:user-invalid`

From the unlimited MDN knowledge archive...

Do you know that there are CSS classes that match valid/invalid form elements only after the user interacts with them? Now you do!

Validate at the right time

TIL recap – table `caption`

Be honest. Do all your HTML tables include the required caption element?

Give your tables a proper name

Find more short web development learnings in my "Today I learned" section.

New on the baseline — `popover`

Big news: the popover API is now "newly available" on the baseline, and if you're now thinking, "Hold on! Wasn't it baseline ready last year already?", that's right.

But webdev, spec work and browser implementations are hard. Rachel explained what happened and shared insights on how the baseline baseline evaluation works.

Pop over!

Classifieds & friends

If you can't get enough of WebDev news, I can highly recommend Adam's WeeklyFoo newsletter. It pairs wonderfully with Web Weekly to catch all the relevant web dev news!

Three valuable projects to have a look at

sindresorhus/emittery – A simpl and modern async event emitter.
localsend/localsend – An open-source cross-platform alternative to AirDrop.
yamadashy/repomix – A tool to pack your entire repository into a single, AI-friendly file.

A new Tiny Helper

When I blogged about font-family: system-ui, a few people pointed me to Modern Font Stacks. What is it?

Modern operating systems come with more installed fonts than Arial. Modern Font Stacks lets you play and test available fonts, so you don't have to deal with optimal font loading strategies.

Use what's already there

Find more single-purpose online tools on tiny-helpers.dev.

Thought of the week

Addy shared his thoughts on all this AI for coding madness happening right now, and his opinion might surprise you.

AI tools help experienced developers more than beginners.

Did you learn something from this issue?

💙 If so, join 21 other Web Weekly readers and support this small indie newsletter with a small monthly donation on Patreon or GitHub Sponsors.

This is all, friends!

Loved this email? Hated this email? I want to hear about it!

If you think something needs improvement or something sparked some joy, reply to this email because I want to know more!

And with that, take care of yourself - mentally, physically, and emotionally.

I'll see you next week! 👋

DEV Community: Web Weekly

Web Weekly 171 — ::details-content goes baseline, the `closed-by` attribute, and `field-sizing: content`.

Guten Tag! Guten Tag! 👋

Something that made me smile this week

No code

Are editor themes too "loud"?

closed-by=any

When the virtual keyboard messes with your viewport

header and footer elements change their roles

The wonderful weird web – spurious correlations

field-sizing works for input and select elements, too!

25 CSS you should know

Is AI really saving time?

More perf metrics in more browsers!

Yet another CSS reset

Random MDN – Object.freeze()

New on the baseline

Three valuable projects to have a look at

A new Tiny Helper

Thought of the week

Do you enjoy Web Weekly? | Did you learn something from this issue?

This is all, friends!

🧢 Web Weekly newsletter 152 — Interop 2025, console.context() and Number.POSITIVE_INFINITY

Guten Tag! Guten Tag! 👋

Something that made me smile this week

New on the blog

Let's stop using animated gifs

LCP !== LCP

Why we should consider searchability

console.context()

The wonderful weird web – Floor796

Is AI hindering new tech adoption?

Speculation rules on google.com

A 💙 for CSS grid

A massive Node.js ecosystem update

Random MDN – Number.POSITIVE_INFINITY

TIL recap – media query boolean contexts

New on the baseline — Styling scrollbars

Three valuable projects to have a look at

A new Tiny Helper

Thought of the week

Did you learn something from this issue?

This is all, friends!

🧢 Web Weekly 151 — `popover` enters the baseline!

Guten Tag! Guten Tag! 👋

Something that made me smile this week

New on the blog

The European Accessibility Act (EAA)

On native CSS nesting

It's about people

How to favicon in 2025

The wonderful weird web – Stripe's Black Friday stats

Replace your animation libs with startViewTransition()

Get started with MPA view transitions

Managing focus

Some WebDev Trivia...

How to start a blog

Random MDN – :user-valid / :user-invalid

TIL recap – table caption

New on the baseline — popover

Classifieds & friends

Three valuable projects to have a look at

A new Tiny Helper

Thought of the week

Did you learn something from this issue?

This is all, friends!

`closed-by=any`

`header` and `footer` elements change their roles

`field-sizing` works for `input` and `select` elements, too!

Random MDN – `Object.freeze()`

`console.context()`

Speculation rules on `google.com`

Random MDN – `Number.POSITIVE_INFINITY`

Replace your animation libs with `startViewTransition()`

Random MDN – `:user-valid` / `:user-invalid`

TIL recap – table `caption`

New on the baseline — `popover`