Web Weekly #157
Guten Tag! Guten Tag! 👋
Do you wish native CSS functions to exist? Do you use the media query range syntax? And do you know of all these HTML input attributes that enhance user experience?
Turn on the Web Weekly tune and find all the answers below. Enjoy!
Markus listens to "The Mighty Rio Grande" from This Will Destroy You:
You might recognize this track from the movie "Moneyball" – this one (and the whole album) immediately put me into a deep focus state for complicated coding tasks.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are two more songs left in the queue.
There's been some news on the user agent stylesheet front. Previously, browsers shipped these CSS lines.
What do they do? In another life, there was the idea of context-aware heading levels. The heading level (h1, h2, ...) would depend on the heading position inside the document. For example, if multiple nested section elements include an h1, the nested headings would receive their level depending on the surrounding HTML. The CSS lines above make this concept visible.
And you've read that right, an implemented outline algorithm would mean that multiple h1 elements would be valid, and maintaining heading levels would be more manageable. Every component or template could ship an h1, and the browsers would automatically figure out their semantic level. I still think the algorithm is a good idea, but unfortunately, browsers never implemented it.
Now, in 2025, it's time to remove this relict from the user agent stylesheets. Firefox plans to remove it in 140, Chrome currently shows a warning when you rely on these styles, and Lighthouse checks for it. Simon shares all the nitty gritty details over on MDN.
And speaking of user agent stylesheets, Manuel started working on UA+. What's that?
UA+ isn't yet another reset.css or normalize.css. The stylesheet includes quick rules that aren't overwriting or resetting browser defaults but enhancing the general user experience. I'm a big fan, and I'm sure you'll find some things to copy for your projects!
If you enjoy Web Weekly, help me grow this newsletter and let your friends know...
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
snappify - The PowerPoint alternative for Software Developers
Snappify comes with a powerful Editor that helps you to create stunning presentations, smoothly animated videos and elevate your technical content. With smooth code animations, it’s the perfect PowerPoint alternative for developers.
Web Weekly is open for sponsorships. When you want to reach 5.7k developers, you know what to do!
Something that made me smile this week
The challenge for the next generation of AI companies isn't just technological - it's finding visual language that communicates innovation without resorting to the same tired sphincter-inspired patterns.
I love the "scientific" analysis covering the most important question today — Why do AI company logos look like buttholes? 😅
Peak into the CSS future: @function
While it's still in the early stages, Chrome Canary ships a new, let's call it "groundbreaking", CSS feature: functions! What? Yes!
Who's now saying CSS isn't a programming language?
The different text-wrap: pretty; implementations
You might know about text-wrap: balance; which is available on the baseline for a while. But do you know about text-wrap: pretty;?
Chromium ships "pretty text blocks" for a while and future Safari will soon, too. The twist: Safari and Chromium will ship different implementations. Look at the subtle difference in the screenshot above. 😱
Jen explains the differences, explains text rendering details, and shares some current spec work (text-wrap: avoid-short-last-lines).
The best engineers out there
If I'd ask you about the best programmers you know, there are probably a few folks coming to mind. But what made these nerds stand out? Matthias collected some solid advice to become one of these great engineers.
The meaning of open source
As someone who used to maintain a somewhat successful open source project and has been burned pretty badly by "people", I can more than relate to Declan's take explaining what open source isn't.
Treat your maintainers nicely.
::: newsletter-nudge "You're halfway through!" Wowza! Would you enjoy getting Web Weekly straight to your inbox? :::
The wonderful weird web – checkboxrace
It took me roughly 90s to finish the checkbox race. Can you beat me?
Often forgotten input attributes
This post isn't new, but it's a good reminder that input elements come with more attributes than the obvious type.
New attr() features
I'm still skeptical about the new attr() features (currently, Chromium only), but, as always, Ahmad does a stellar job explaining in what scenarios it might make sense. It's nothing you couldn't do with inline styles paired with custom properties, but I do think that having "clean" attributes makes things a bit nicer.
What do you think about it?
Style components via properties
TIL — there's a faster localeCompare
Sorting strings can quickly become a nightmare with all the human languages out there. I mean, look at all these special characters: É, Ǒ, Ã, ... To sort these in a somewhat reasonable way, I would usually reach for localeCompare(), but I learned that everyone's most favorite util, Intl, offers a faster solution.
Is currentColor obsolete?
Chris discusses if using currentColor still makes sense today. I'm voting with a strong "YES!" but make up your own mind!
Fun fact: today I learned that CSS doesn't care about the capitalization of currentColor. CURRENTCOLOR, currentcolor and all variants still work. #wat
Random MDN – Array.at()
From the unlimited MDN knowledge archive...
If you're still using the Array bracket notation, you should check out .at(). It's a bit more readable and also works backward!
TIL recap – hr's semantic meaning
If you're using hr element for styling, remember these elements aren't "just" horizontal lines.
Find more short web development learnings in my "Today I learned" section.
New'ish on the baseline
The following isn't "cutting edge new" but still a feature that counts as new on the baseline. Do you know that media queries support a shorter range syntax? Now you do. 🫵
Classifieds & friends
If Web Weekly isn't enough reading material for you and you also want to stay up-to-date on more fullstacky things, my buddy Luciano runs the Fullstack Bulletin, and you should check it out if you're also into the server side of things.
Three valuable projects to have a look at
- paxtonhare/demo-magic – A handy shell script that enables you to write repeatable demos in a bash environment.
- 11ty/image-color – Fetch the colors from an image.
- pahen/madge – Create graphs from your JavaScript dependencies.
A new Tiny Helper
Brecht created a color palette generator that a) uses the OKLCH color space and b) includes some fancy math to make the palette look more natural.
I think I just learned about the first CSS sin use case that's not a proof of concept hack!
And if you are wondering why you should adopt oklch(), I blogged about the advantages of the new color space.
Thought of the week
There's nothing more to add to Dave's take.
Enshittification means that a person who lacks taste was put in a position of power.
Did you learn something from this issue?
If so, join 22 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! 👋