Web Weekly #143
- Published at
- Updated at
- Reading time
- 8min
Do you know how to feature detect @container, @layer or @starting-style? Are you excited about the new CSS logo? And are you excited about Interop 2025?
Turn on the Web Weekly tune and find all the answers below. Enjoy!
Mario listens to "Röyksopp - Oh, Lover":
Oh Lover makes me always feel like floating and dancing while sitting on my office chair. It´s the perfect song for me to come down and it works every time.
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are two more songs left in the queue.
The man command, which you can use to access a programs manual, comes with an ABBA-themed easter egg printing out gimme gimme gimme. I love it!
- New on the blog: why I believe conventions make code reviews less intimidating.
- The CSS Next community group discusses a new "official" CSS logo.
- In a time when the average website weighs 2.3MB, it's unbelievable that some smart people sit down and build 3D games in 13KB. The winners of JS13KGames challenge are as incredible as always. "13 Steps to escape" was great!
Checking accessibility is required to ship good stuff for the web. But how do you get started?
Accessibility is a huge topic, but knowing how to control a screen reader is a valuable first step. Martin provides some guides to get you started on Windows and Mac.
Side note: if you're looking for a quick-to-use accessibility checklist, Moritz's cheatsheet is great.
So far, I've watched three newly released XOXO conf talks:
- Molly White — Web3 Is Going Just Great
- Erin Kissane — COVID Tracking Project
- Cabel Sasser — [No title but an exceptional talk]
Leave Netflix alone tonight and watch these inspiring talks instead!
You probably know the Promise methods resolve and reject. The two static methods just got company — Promise. If you must handle functions that could return errors, values or other promises, Promise is a handy addition to avoid some try/catch blocks.
So far, only Chromiums ship it, but now that we have reached Stage 4, it'll be implemented quickly.
Learn more about "Promise.try"
When you check the "Grid Layout Module Level 3" spec, you might be surprised to discover Masonry layouts.
And you might be even more surprised to learn that the editor's draft includes two competing standards. One will integrate Masonry layouts into the existing CSS grid functionality (grid-template-rows: masonry;) while the other is grid-independent (display: masonry).
Both proposals come with good arguments, and Geoff summarizes the discussion perfectly.
Wowza! Would you enjoy getting Web Weekly straight to your inbox?
Give it a try — I'm a true neutral with a hue boundary at 174. 😅
With the CSS evolution in full swing, many new at-rules are entering the web. We already have baseline-supported @container, @property and @layer. But we still have to wait for some at-rules to reach general support. @view-transition or @starting-style immediately come to mind.
How could you feature detect these at-rules and bet on progressive enhancement?
Theoretically, you could use @supports at-rule(). Unfortunately, the CSS at-rule function isn't supported anywhere yet.
Here are the browser bugs if you want to follow at-rule() implementations: Webkit (Safari), Gecko (Firefox) and Chromium (Chrome, Edge).
But there's a trick to evaluating at-rule browser support. CSS at-rules often come with "normal" CSS properties. @container comes with the container-type property. @position-try enables position-try: flip-block. Juan explains how to use this knowledge to detect all the juicy new CSS rules.
Feature detect the new'n'fancy
And if you want to dive even deeper, Bramus is on a feature detection world tour lately and covers the at-rules Juan missed.
- Feature detect CSS
@starting-stylesupport - Feature detect CSS
@propertysupport - Feature detect Style Queries Support in CSS
The Gov.uk team implemented a new "Exit this Page" component to offer visitors a quick keyboard-only way to leave a page. And they offer this feature by pressing shift three times.
Shift? Three times? beeps explains in fabulous detail all the considerations for building JS functionality with the fewest trade-offs.
Node.js v23 was released last week and ships a new and stable node --run flag. The flag allows running package scripts without npm. It's slightly faster than npm run (we're talking a couple of hundred ms) but doesn't run life cycle scripts (e.g. prestart). So, npm --run is not an npm run replacement.
Will you use it? I'll stick with npm run in this case... 🤔
Someone asked me the other day how it's decided what browser features make it into Interop, and I didn't have an answer. So, I researched a bit, and it doesn't look like the voting and decision process is documented anywhere. Do the browser makers decide in secret where the web is heading?
The Open Web Advocacy group filed an issue demanding more transparency. And I agree — all I know is that some humans will pick the Interop focus areas before December 19th, 2024. I've no idea how decisions will be made... Ouch.
But in the meantime, if you're curious about what feature requests received the most community upvotes, the labeled GitHub issues provide a quick idea of web feature demand.
From the unlimited MDN knowledge archive...
Did you know that the light-dark CSS color function allows you to style light and dark mode in a single declaration and also is baseline supported? Now you do. 🫵
Here's a quick HTML party trick: did you know you can apply a start value to ordered lists or even give specific values to list entries?
Find more short web development learnings in my "Today I learned" section.
The ECMAScript news newsletter is one of my favorite ways to stay up-to-date with the fast-moving JS ecosystem. It's short, very well-curated, and to the point. You should check it out!
- leerob/next-saas-starter – A Next.js, Postgres, and Stripe starter kit.
- ben-n93/SQL-tips-and-tricks – SQL tips and tricks.
- jehna/humanify – Deobfuscate Javascript code using ChatGPT.
If you're looking for a quick way to vectorize images to SVG, you should check out VTracer. I tried the Web Weekly header, which did a decent job of SVGing it.
Find more single-purpose online tools on tiny-helpers.dev.
I enjoyed this quick article on self-reflection a lot.
If you do what everyone does, you're gonna become what everyone is.
💙 If so, join 15 other Web Weekly readers 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 5.5k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.