Julz

Web Weekly 177 - navigator.userActivation - DevTools debugging tricks - CSS-only arrows with corner-shape - The satisfies keyword - subgrid explained - cookieStore

I'm a bit late, but this week's Web Weekly will hit all the inboxes in just a little bit!

If you care about the web platform and browser features, you should check it out!

www.stefanjudis.com/blog/web-wee...

Generating Utility Classes from Design Tokens using Style Dictionary Generate Utility Class CSS from design tokens using Style Dictionary for seamless design-to-development workflows and collaboration and snowflakes.

🎉 Just published: a new Design Tokens article 🎉

Create consistent utility classes directly from design tokens for both flexibility _and_ consistency.

Generating Utility Classes from Design Tokens using Style Dictionary

www.alwaystwisted.com/articles/a-d...

🙏🖤

#DesignSystems #DesignTokens #CSS

CSS :is() :where() the Magic Happens, by @matthiasott@mastodon.social:

https://matthiasott.com/notes/css-is-where-the-magic-happens

#css #selectors #cascade

Ex-Masonry Display Type Keyword Poll See https://github.com/w3c/csswg-drafts/issues/12022 for context. This poll intentionally leaves out `masonry` as an option, see https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-34172962...

There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.

- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here

docs.google.com/forms/d/e/1F...

The Cascade is the underlying algorithm that applies our styles the web, and a main target of frustration when our styles go bad. But why is it there, how is it changing, and why should we care?… Cascading Layers of !mportance - Miriam Suzanne | JSHeroes 2025

Today's lunch video is "Cascading Layers of !mportance" - "Cascade Layers are now widely available, with the potential to fundamentally change how we think about the cascade and how we collaborate across design systems, component libraries, & third-party tools." #CSS www.youtube.com/watch?v=4Pkh...

I was just experiencing the same frustrating thing thanks for the tip

Jees, this was such an awesome article! Thank you.

It’s been a long-standing struggle to achieve full Progressive Web App (PWA) support. In my professional experience, it consistently hinders efforts to develop web-based applications at work.

Hypnotizing and fun meme

enjoying all the recent (or not so recent) updates to @projectwallace.com's (free) CSS analyser page, including a dedicated 'design tokens' section, like this –

www.projectwallace.com/design-token...

lovely stuff @veneman.dev

🙏 🖤

New to the web platform in June  |  Blog  |  web.dev Discover some of the interesting features that have landed in stable and beta web browsers during June 2025.

Here's my monthly post on what's landed on the web platform with the browser releases during June. It's been another busy month! web.dev/blog/web-pla...

The Component Gallery An up-to-date repository of interface components based on examples from the world of design systems, designed to be a reference for anyone building user interfaces.

The Component Gallery is a collection of interface components from real-world design systems. A very helpful reference for designers that's definitely worth bookmarking! Thank you @inbn.dev Great work!
component.gallery

This is a powerful browser DevTools hack 💡

You can get a full overview of any website’s CSS design system like colors, fonts, contrast issues, media-queries and more!

Watch the video for a quick demo 🎥

Follow @rammcodes.bsky.social for more 💎

#html #css #javascript #reactjs #100daysofcode

ROI Calculator Calculate the ROI of your design system with zeroheight using industry benchmarks

Built a little ROI calculator for @zeroheight.com so you can show off how much money you can save with a design system, from savings per component, to per release, to how much time saved.

Check it out: zeroheight.com/resources/ro...

What I Wish Someone Told Me When I Was Getting Into ARIA — Smashing Magazine [Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is an inevitability when working on web accessibility. That said, it’s everyone’s first time learning ...

ARIA! It exists and on a long enough timeline you'll need to use it. Here's how to get into the right headspace to do so! #a11y www.smashingmagazine.com/2025/06/what...

Anchoreum A game for learning CSS anchor positioning

a game for learning CSS anchor positioning

anchoreum.com

Quid Pro Quo | Follow the Crypto Cryptocurrency companies are reaping the benefits of their contributions to Trump and other pro-crypto politicians.

I keep the Trump family web of crypto involvement up-to-date at: www.mollywhite.net/etc/trump-fa...

The quid pro quo list is at: followthecrypto.org/quidproquo

I should have been doing other things, but someone asked about selecting the last row in an auto grid and it sent me down a rabbit hole, but got it working.

The codepen is pretty heavily commented to try and explain how it works, and I will be making a video eventually.

codepen.io/kevinpowell/...

Bluesky Likes Web Components • Lea Verou I set out to announce two components I wrote for displaying Bluesky likes and ended up ranting about the pain of building accessible, localizable web components in 2025. The components are still here,...

I set out to announce two web components I wrote for displaying @bsky.app likes and ended up ranting about how painful it is to build accessible, localizable web components in 2025.

The components are still there, though — lucky you?

lea.verou.me/blog/2025/bl...

Styling HTML form controls is something web designers & developers have wanted for years! My team is working on a solution — apply `appearance: base` and switch to a new interoperable consistent default control. Then override it using new pseudo-elements. See the details: drafts.csswg.org/css-forms/

👀

Very nice!

Such an exciting day.

I proposed if() last year and got CSS WG consensus to add it to the spec on my birthday (!) last June.

Now, less than a year later, it ships in the most widely used browser.

I think it can be a game changer for design systems, especially together with ident() & revert-rule.

YouTube video by Una Kravets CSS if() functions & reading-flow (in Chrome 137)

CSS if() function landed today(!!!) in Chrome 137 🥳

along with another rad feature: reading-flow 🥳

So I put together a quick video showcasing both:
youtu.be/Apn8ucs7AL0

So cool! Congratulations Lea

Ah interesting and these are separate pages also? How cool I have to take a deeper dive.

Are these zooming parts modals?

Update: She’s here!

I was a big Fireworks fan