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! ❤️

Sponsored

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.

Get Started for Free

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? 😅

Question everything!

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?

Program CSS

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).

Prettify your paragraphs

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.

Be your best!

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.

You're halfway through!

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

Email

The wonderful weird web – `checkboxrace`

It took me roughly 90s to finish the checkbox race. Can you beat me?

Race!

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.

Tweak your inputs

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.

Sort things out!

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!

Use the current color

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!

Access your arrays

TIL recap – `hr`'s semantic meaning

If you're using hr element for styling, remember these elements aren't "just" horizontal lines.

Consider semantics

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. 🫵

Shorten your media queries

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!

Generate

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! 👋

Reply to Stefan