This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
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 or normalize. 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 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!
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? 😅
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?
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).
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.
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.
It took me roughly 90s to finish the checkbox race. Can you beat me?
This post isn't new, but it's a good reminder that input elements come with more attributes than the obvious type.
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
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.
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
From the unlimited MDN knowledge archive...
If you're still using the Array bracket notation, you should check out
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.
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. 🫵
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.
- 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.
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.
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.
If so, join 22 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! 👋
Reply to Stefan
This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
Stefan Judis | Sciencx (2025-04-14T22:00:00+00:00) Web Weekly #157 (#blogPost). Retrieved from https://www.scien.cx/2025/04/14/web-weekly-157-blogpost/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.