Web Weekly #171
- Published at
- Updated at
- Reading time
- 8min
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.
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.
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!
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.
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.
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?
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
I've got nothing but love for the person maintaining this site highlighting correlations that don't look "quite right".
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!
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
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!
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
interactionIdas 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!
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!
From the unlimited MDN knowledge archive...
Did you know that you can freeze JavaScript objects? Now you do. 🫵
![details::details-content { opacity: 0; transition: opacity 600ms, content-visibility 600ms allow-discrete; } details[open]::details-content { opacity: 1; }](https://images.ctfassets.net/f20lfrunubsq/1qZ0qcAgBrqdK7u6fd5Dn8/87350dc1a3e81e565fa13321fb0c6c56/Screenshot_2025-10-20_at_15.39.22.png)
Did you already celebrate that ::details-content went into the baseline with Firefox 143? If not, now's the time!
- 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
.docxfiles without leaving your terminal.
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!
Find more single-purpose online tools on tiny-helpers.dev.
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.
❤️ If so, join 25 other Web Weekly supporters and give back with a small monthly donation on Patreon or GitHub Sponsors.
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! 👋
Join 6.2k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.