Published at
Updated at
Reading time
8min
The Web Weekly newsletter keeps you up to date, teaches you web development tricks and covers all things working in tech.

Guten Tag! Guten Tag! πŸ‘‹

Have you used the ::target-text pseudo element before? Are you ready for CSS5? And how do you create perfectly aligned nested border radii (plural of radius 🀷)?

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

Julian listens to "CAN YOU FEEL THE LOVE TONIGHT (with lyrics) Nina" and says:

This version of the song was played at my wedding and whenever I hear it I instantly feel the joy of that day again.

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

The state of HTML survey results are out, and you should at least have a quick look. The participants are, as always, mainly white, male and western, but the results are still a perfect way to learn more about native web features (I did).

Here are my three highlights.

Only 50% of the participants knew about srcset and sizes. These two attributes are essential to loading well-sized images. If you don't use them today, you should because they'll make your sites lighter and faster.

Distribution of srcset / sizes: 53 have used and 30% have an interest, 16% haven't heard of them.

The search element is supported everywhere, but people don't know about it (I forgot about it, too).

12% have used search, 27% know about search and 60% haven't heard about search

And even less folks know about the inert attribute. It's so helpful, though!

6% have used "inert", 14% have heard of "inert" and 79% haven't heard of "inert".

And these are only a few facts from the survey. Srsly, check it out!

Open tabs

We need more native browser controls

Layer seven  My question here is why isn’t this kind of functionality a stock piece of browser UI?

Browsers should provide more native controls, full stop. I want to see origin-specific controls for darkmode, safe data, reduced motion, etc. It's so strange that we still don't have these because custom controls would make things so much easier.

We could stop building custom toggles. And internet people could also learn and know about this one way to "control the web". Everybody would win.

Bramus' recent Chrome extension experiment is a perfect example of this approach, and I love it.

But what if browsers would take another logical step? Eric Bailey makes strong points about browsers automatically fixing stuff.

Imagine a site with poor contrast. The browser knows that the site has poor UX. The element inspector shows it. Lighthouse tells it, too.

Wouldn't it be cool if browsers could have an option to automatically fix site issues? This would make the entire web more accessible.

Why aren't we doing this to create a better web?

Turn off AI Overview in Google Set "Web" as default

Without surprise, Google will enrich Search with more AI stuff. If you prefer the old way of searching, here's how to enable it.

Search without assistance

How does it work? Google search supports a udm=14 that turns off the artificially and generated content.

TIL about ::target-text

::target-text {   background-color: pink; }

Modern Chrome and Safari support URL text fragments (#:~:text=YOUR_WORD). What is this fancy syntax?

Text fragments enable you to scroll to and highlight text included on a page. E.g. https://webweekly.email/#:~:text=Web%20Weekly will highlight the first instance of Web Weekly. Fancy stuff.

But did you know that you can also target the selected text with ::target-text (Chromium-only)? I don't think that's a wowza feature, but alright.

But if browsers ship functionality to highlight text on a page, Remy asks why we couldn't expose this functionality to CSS?

[:~:text="fragment selector"] {   background: red; }  /* or */ [:~:text="Although,text is good"] {   background: red; }

And this is a neat idea! What do you think β€” would you use such selector?

You're halfway through!

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

The wonderful weird web – 98.js.org

Windows 98 screen including "my computer", "internet explorer", "minesweeper" and "pinball".

Don't judge, but I played Pinball for a little while.

Relive the good old windows

Google.io

Marc Ribellet

It was Google.io time last week and not only did Marc Rebillet perform live (I've seen him once; and his concert is still in my top 10 concert list), but as usual, there's been some solid web content.

I didn't make it to watch all this yet, but here are the videos I'll watch eventually:

Sound component advice

My point is simple. Even if we have to write a few more wrapping elements, by favoring composition, we make the code wildly more understandable and maintainable. You spend absolutely no time trying to figure out if you’re in the correct component or not.

Short'n'sweat: I like Kyles' approach to writing components. Less spaghetti and easier to read code. πŸ’―

Prefer easier to read code

overflow-clip-margin

.parent {   overflow: clip;   overflow-clip-margin: content-box; }

Disclaimer: overflow-clip-margin doesn't work in Safari yet, but it's perfect when dealing with nested border radii.

Nest rounded corners

CSS5 is coming

The CSS Next Community Group is looking for feedback on our initial exploration into CSS Levels. This is our formal request for comments.

The CSS working group is looking into new CSS categorization. I like it because I'm ready to update my LinkedIn profile. Bye bye CSS3! Welcome CSS4 and CSS5.

Explore CSS

Random MDN – :user-invalid

input:user-invalid {   border: 2px solid red; }

From the unlimited MDN knowledge archive...

Do you know that you can style input elements after someone enters invalid or no data? Yep, that's what :user-invalid is for. The pseudo selector has been in the baseline since November 2023.

Style invalid elements

TIL recap – Git's conditional imports

[user]   email = user@example.com   name = User   signingkey = ABC123 [commit]   gpgSign = true [includeIf "gitdir:~/work/"]   path = ~/.work.gitconfig

If you're working on multiple projects and require different Git configurations, here's a pro tip: Git's includeIf enables you to run Git with different configurations depending on the current directory.

Improve your setup

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

New on the platform

rotate: round(20deg, .125turn); /* 0deg */ rotate: round(80deg, .125turn); /* 90deg */

The CSS round() function shipped in Chrome (and soon Edge). I still have to think about when to use it, but I'm amazed that you can mix and match units. CSS is such a functionality beast these days. πŸ’ͺ

If you want to learn more, Daniel wrote a perfect guide.

Classifieds & friends

  • The interactive Component Odyssey course will teach you everything you need to build a modern web component library. Save yourself and your company weeks of development time by betting on the web and browser-native tools. Web Weekly readers get 10% off with the discount code WEBWEEKLY01.

Three valuable projects to have a look at

A new Tiny Helper

Multiple CSS shapes including heart, start, starburst, flower

If you're looking for CSS only shapes, css-shape.com has them all.

Find CSS shapes

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

Thought of the week

There's a new term in AI land β€” "slop". It stand for unwanted AI generated content. Simon Willison shared some "slop" thoughts and wrote this gem. πŸ‘‡

Sharing unreviewed content that has been artificially generated with other people is rude.

Let's try not to be rude, huh?

Do you enjoy Web Weekly?

πŸ’™ If you learned something from this issue, tell your friends about it. Here's the web version to share

This is all, friends!

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

If you think there’s something that needs to be improved or something that you enjoyed, 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! πŸ‘‹

Was this post interesting?
Yes? Cool! You might want to check out the email version. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles