Did you check out the new WebKit grid-lanes resources already? Do you "view transition" with match-element? And have you heard of HTML streaming maybe becoming a thing?
Turn on the Web Weekly tune and find some answers below. Enjoy!
I loved the cinematography, choreography and the whole bad-boys-from-high-school vibe.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are five more songs left in the queue.
Let's open this week with some fancy CSS grid stuff!
Peter-Paul explained how the grid layout algorithm works. For most cases you don't need to think about the internals, but it's good to know how things work. If you don't know what grid-auto-flow does, this post is for you!
And speaking of the grid algorithm, things get more and more complicated when you consider the new display: grid-lanes (Safari-only so far). Our friends at WebKit released a new cheatsheet with a built-in configurator and lots of examples. It has strong vibes of the CSS-Tricks materials back in the day!
And if all this isn't enough, Patrick published a tutorial explaining alignment in the new masonry world.
That's some funky new CSS we'll be able to use eventually! 🎉
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter grow. Thank you! ❤️
A huge bag of karma points goes to Caspar, Den, Marco, Savio, and Zoe this week. 50 people now support Web Weekly financially, thank you all! ❤️
If you enjoy Web Weekly, give back with a small monthly donation on Patreon or GitHub Sponsors.
The state of content creation is rough these days, and while I have let go of the idea of making this newsletter a sustainable income, every tiny support helps me keep going.
You know that I'm a sucker for single-purpose URLs and this one is right up my alley.
Here's something for you to shine at nerdy dinner parties. Did you know that history.pushState has a parameter that's "officially" unused? Alex gives a nice history lesson.
So, I've been using global Git ignores since forever (bye bye .DS_Store), but I didn't know .git/info/exclude is a thing.
view-transition-name: match-element 
I can't be the only one not realizing match-element works across browsers these days, can I? Bramus explains when to use match-element or go for the advanced attr() CSS function.
I've got no idea how I could have missed that, but Ollie shared that streaming HTML might become a thing. Granted, it's very early days still but this is exciting. It's yet another example of framework patterns entering the web!
I've seen multiple people talk about the logic puzzle game "Clues by Sam". And I must admit, it's a lot of fun!
I know that many Web Weekly readers aren't big AI fans. However, the new MDN MCP server is very useful to access docs and browser support data.
Adam released a new JS library that transforms JS runtime values into CSS custom properties. Just like that? Yes, if you want to use form values, pointer positions or even the current time in CSS, prop-for-that will make that possible without writing custom JS.
Side note: Adam also spoke at CSS Day and presented a MEGA LIST of the ways CSS can enable highly adaptive, contextually relevant components. This slide deck is very well worth your time. Trust me.
You're probably checking light and dark mode when writing your CSS. But do you check contrast, too? Here's a quick explainer telling what to watch out for.
HTML in canvas is still a long way off, but of course people are going wild with it already. I also wonder how useful this all will be, but hey... I'm always game for some eye candy.
overscroll-behavior 
From the unlimited MDN knowledge archive...
Overscroll behavior is one of those CSS properties that aren't used enough. I'm using a Mac and way too often do I accidentally swipe the history, just because a horizontal scroller wasn't containing the scroll. Let's fix that!
Did you know that container size queries can detect landscape and portrait ratios? Now you do!
I've mentioned CSS field-sizing plenty of times here and with Firefox supporting it now with version 152, it's finally baseline newly available.
And it feels like yesterday, but native CSS nesting is now widely available. Time flies!
todo.txtWith more and more throwaway tools being generated, I started to question Tiny Helper's usefulness. The project is also "under fire" with lots of useless vibe code submissions.
What do you think? Should we keep it? If 50 people reply and let me know that it's valuable, I'll keep going. Otherwise, I think it's time to "finish" this project.
Yep.
Paying for software isn't paying for a solution. It's paying for someone else to own a problem.
❤️ If so, join 50 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.5k+ developers and
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。