Have you heard of focusgroup? Did you try aliases in Node.js imports already? Or do you know that CSS is available in JavaScript?
Turn on the Web Weekly tune and find some answers below. Enjoy!
Do you want to share your favorite song with the Web Weekly community? Hit reply; there are four more songs left in the queue.
If you enjoy Web Weekly, share it with your friends and family.
A quick "repost" really helps this indie newsletter out. Thank you! ❤️
A big thank you and a huge bag of karma points go to Jonathan this week. Thank you for supporting indie publishing in the times of AI slop by covering a small fraction of the cost it takes to send Web Weekly every week! My little side project is now supported by 40 people. This makes me incredibly happy (and proud). ❤️
You can support Web Weekly on Patreon or GitHub Sponsors.
And also, I messed up a link last week. I clicked all the links before sending the email, but because last week was an "unofficial Temami edition", I didn't recognize that I linked to the wrong post. Here's the correct link to anchor positioning issues. Sorry!
I didn't discover good "No code" articles this week. Did you read something great beyond coding lately? I'd love to read it, too!
color-contrast() beyond black & white 
With Chrome 147 (planned for Mar 25), the contrast-color() function will be newly available across all browsers. Theoretically, the function lets you throw a color in and get an accessible contrast color out. It's a great idea, but contrast-color() is limited to returning black or white right now.
Una describes how to work around this limitation.
Granted, Rob's article is very long, but the intro paragraphs make it worth reading already.
I've seen the attachInternals() method quite a few times in custom elements materials, but I never really understood what it's about.
Now I do, and it's quite cool if you're dealing with web components. Thanks, Rob!
focusgroup RFC 
There's a new HTML feature shipping behind a flag in Chromium: focusgroup. The idea is that the attribute will make it easier to build components that require custom focus handling.
It's also wild that a focusgroup is supposed to set the correct ARIA roles automatically. If this works, maybe that will make the web a bit more accessible? I've heard some skeptical voices already, though.
Browsers are asking for feedback, so now is your chance!
You've probably written this snippet many times by now. 👆 Even though view transitions have been cross-browser supported for a while, you still have to check every time if they're available with if (document.startViewTransition). What if you didn't have to do that? Bramus released a non-visual polyfill.
Today I learned about JND: Just Noticeable Difference. Keith built a fun little game for your lunch break. To what point can you differentiate the colors?
You can load JSON files via import attributes (that's the fancy with syntax) across modern browsers for roughly a year now. But how do import attributes affect caching? And are they really that much better than what bundlers already provided for years? Matt has some answers.
I know that I plugged a great-looking select last week already, but man... I'm very much into these new ways of customizing select elements. Patrick's article comes with many explanations this week.
Disclaimer: at-rule() is far from being cross-browser supported and will only hit Chrome in version 148 (we're currently at 146), but it's still cool that we'll be able to check support for at-rules (e.g. @starting-style) in the future.
Do you know that you can set custom import paths in vanilla Node.js? If not, John explains how they work. He's kind of skeptical about the idea, but I'm really digging it!
.to() in JS 
From the unlimited MDN knowledge archive...
Here are two fun ones. First, do you know that CSS exists in JavaScript? And second, how cool is it that you can convert one unit into another?
Disclaimer: .to() doesn't work in all browsers yet but will land in Firefox soon!
svg elements can be nested 
Here's a quick learning from eight years ago: did you know that you can nest svg elements? Now you do!
shape() 
With Firefox 148, the CSS shape() function entered the baseline, which means that you can now pair offset-path or clip-path with a function that understands CSS. That's right! No more SVG syntax fiddling!
As a WW subscriber, you should be pretty well aware of what's going on with browser features and the baseline. If the newsletter isn't enough, BaseWatch looks great!
Here are some wise words from one of my favorite bloggers.
Data tells you what people consume, not what you should make. [...] "What is happening?" and "What should happen?" are two completely different questions and should be dealt with as such.
❤️ If so, join 40 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阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。